Crear mas de un campo de form dinamicamente

loncho_rojas · #1 (**permalink**) 06/03/2012, 06:29

Buenas... estoy intentando crear unos campos de manera dinamica con Javascript o ajax... si bien en la web hay muchas opciones para crear 1 campo mas.. yo necesito crear un juego de campos.. es decir... asi como se muestra en el ejemplo:

Campo Normal

Creando juego de campos

debido a que pude lograr que cree 1 solo campo ya sea INPUT o SELECT... la idea es que me cree esos juegos de campos, es decir, 2 SELECT y 1 INPUT HIDDEN donde se ve el precio...

Si alguno sabe de la solucion, puede pasarme una mano, tiene algun script hecho o conoce un enlace para crear algo asi.. le estaria enormemente agradecido...

Les paso el que tengo.:

campos.php

Código PHP:

  <?php 

 
if($_POST['hobby']) 

{ 

 
$array=$_POST['hobby']; 

foreach($array as $hobby) 

{ 

if(strlen($hobby)>0) 

{ 

echo '<h3>'.$hobby.'<h3/>'; 

}}} 

 
?> 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 

"http://www.w3.org/TR/html4/loose.dtd">

<html> 

<head> 

<title>Jquery Duplicate Fields Submit Form</title> 

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 

<script type="text/javascript" src="1.js"></script> 

<script type="text/javascript"> 

$(function(){ 

 var removeLink = ' <a class="remove" href="#" onclick="$(this).parent().slideUp(function(){ $(this).remove() }); return false">remove</a>'; 

$('a.add').relCopy({ append: removeLink});     

}); 

</script> 

<style type="text/css"> 

body{ font-family:Arial, Helvetica, sans-serif; font-size:13px; } 

.remove {color:#cc0000} 

.input{ border: solid 1px #006699; padding:3px} 

 
</style> 

</head> 

 
<body> 

 
  <form method="post" action=""> 

  <p class="clone"> <input type="text" name="hobby[]" class='input'/></p> 

  <p><a href="#" class="add" rel=".clone">sumar campo</a></p> 

  <input type="submit" value=" Enviar " /> 

  </form> 

</body> 

</html>

1.js

Código Javascript:

Ver original/** 
 * jQuery-Plugin "relCopy" 
 *  
 * @version: 1.1.0, 25.02.2010 
 *  
 * @author: Andres Vidal 
 *     [email][email protected][/email] 
 *     [url=http://www.andresvidal.com]Andres A. Vidal - User Experience and Information Architecture Consultant[/url] 
 * 
 * Instructions: Call $(selector).relCopy(options) on an element with a jQuery type selector  
 * defined in the attribute "rel" tag. This defines the DOM element to copy. 
 * @example: $('a.copy').relCopy({limit: 5}); // <a href="example.com" class="copy" rel=".phone">Copy Phone</a>
 * 
 * @param: string    excludeSelector - A jQuery selector used to exclude an element and its children 
 * @param: integer    limit - The number of allowed copies. Default: 0 is unlimited 
 * @param: string    append - HTML to attach at the end of each copy. Default: remove link 
 * @param: string    copyClass - A class to attach to each copy 
 * @param: boolean    clearInputs - Option to clear each copies text input fields or textarea 
 *  
 */ 
 
(function($) { 
 
    $.fn.relCopy = function(options) { 
        var settings = jQuery.extend({ 
            excludeSelector: ".exclude", 
            emptySelector: ".empty", 
            copyClass: "copy", 
            append: '', 
            clearInputs: true, 
            limit: 0 // 0 = unlimited 
        }, options); 
         
        settings.limit = parseInt(settings.limit); 
         
        // loop each element 
        this.each(function() { 
             
            // set click action 
            $(this).click(function(){ 
                var rel = $(this).attr('rel'); // rel in jquery selector format                 
                var counter = $(rel).length; 
                 
                // stop limit 
                if (settings.limit != 0 && counter >= settings.limit){ 
                    return false; 
                }; 
                 
                var master = $(rel+":first"); 
                var parent = $(master).parent();                         
                var clone = $(master).clone(true).addClass(settings.copyClass+counter).append(settings.append);
                 
                //Remove Elements with excludeSelector 
                if (settings.excludeSelector){ 
                    $(clone).find(settings.excludeSelector).remove(); 
                }; 
                 
                //Empty Elements with emptySelector 
                if (settings.emptySelector){ 
                    $(clone).find(settings.emptySelector).empty(); 
                };                                 
                 
                // Increment Clone IDs 
                if ( $(clone).attr('id') ){ 
                    var newid = $(clone).attr('id') + (counter +1); 
                    $(clone).attr('id', newid); 
                }; 
                 
                // Increment Clone Children IDs 
                $(clone).find('[id]').each(function(){ 
                    var newid = $(this).attr('id') + (counter +1); 
                    $(this).attr('id', newid); 
                }); 
                 
                //Clear Inputs/Textarea 
                if (settings.clearInputs){ 
                    $(clone).find(':input').each(function(){ 
                        var type = $(this).attr('type'); 
                        switch(type) 
                        { 
                            case "button": 
                                break; 
                            case "reset": 
                                break; 
                            case "submit": 
                                break; 
                            case "checkbox": 
                                $(this).attr('checked', ''); 
                                break; 
                            default: 
                             $(this).val(""); 
                        }                         
                    });                     
                }; 
                 
                $(parent).find(rel+':last').after(clone); 
                 
                return false; 
                 
            }); // end click action 
             
        }); //end each loop 
         
        return this; // return to jQuery 
    }; 
     
})(jQuery);

la fuente de este código, no lo recuerdo... gracias enserio

loncho_rojas · #2 (**permalink**) 06/03/2012, 06:44

perdón.. que infantil mi error.. es decir, mi desatención.. ya logre crear esos campos.. y para que el post no sea en vano.. explico..

Ok.. leyendo un poco el codigo de 1.js, aunque no comprendo mucho de Javascript ni de Ajax, vi que existe un atributo CLASS llamado CLONE.. que hace posible que se creen o se eliminen elementos...

en el archivo campos.php existe una etiqueta del tipo <p> con el class CLONE... todo lo que inserte ahi como campo tipo input, select o similar sera duplicado tal cual... es lo que hice.. insertar dentro de la etiqueta <p>, mis campos y se duplicaron sin problemas...

Espero les sirva a otros