forma de clon y el ID de la subasta

Question

Considere el siguiente formulario:

<form> 
    <input type="button" value="Input Button"/> 
    <input type="checkbox" /> 

    <input type="file" id="file"/> 
    <input type="hidden" id="hidden"/> 
    <input type="image" id="image" /> 

    <input type="password" id="password" /> 
    <input type="radio" id="radio" /> 
    <input type="reset" id="reset" /> 
</form> 

Utilizando Javascript (jQuery y), lo que sería la forma más fácil de clonar todo el formulario y el incremento de cada individuo dentro de Identificación, para garantizar la unicidad.

Usando jQuery que supongo que le clonar la forma inicialmente a través de clone() e iterar a través de los objetos clonados id y añadir el nuevo ID fieldname1, fieldname2 etc. Sin embargo, mi conocimiento de jQuery no es demasiado grande y este proyecto es casi matándome.

¡Cualquier ayuda sería genial!

Answer 1

Lo haría clone(), y antes de adjuntar el elemento clonado al DOM, lo ejecutaría y agregaría el número a cada atributo id.

(function() { 
    var count = 0; 

    window.duplicateForm = function() 

     var source = $('form:first'), 
      clone = source.clone(); 

     clone.find(':input').attr('id', function(i, val) { 
      return val + count; 
     }); 

     clone.appendTo('body'); 

     count++; 
    }; 

})(); 

jsFiddle.

Éste comienza con 0, pero puede comenzar fácilmente count con 1.

También es posible usar un closure si quería, es decir

var cloneForm = function(form, start) { 
    start = start || 0; 

    return function() { 
     var clone = form.clone(); 

     clone.find(':input').attr('id', function(i, val) { 
      return val + start; 
     }); 
     start++; 

     return clone; 
    }; 
}; 

allí tendría que hacer ...

var cloneContactForm = cloneForm($('#contact-form'), 5); 

// Now I want to clone it and put it somewhere. 
$(cloneContactForm()).appendTo('body'); 

jsFiddle.

Answer 2

Aquí es una solución sin actualizar los ID:

1. damos todas formas el mismo class
2. dar a todos los campos de un name
3. se refieren a formas clonadas relativos a todas las formas con la clase
4. Consulte los campos con su nombre

Ejemplo: ¿Qué le parece dar a cada formulario clonado una identificación diferente y luego usar name s para cada elemento de entrada?

<form class="theForm"> 
    <input type="password" name="password" /> 
</form> 

Entonces clonarlo con

container.append($('.theForm:first').clone()); 

(o almacenar en caché la primera forma en una variable).

último, el acceso a los campos de entrada con:

$('form.theForm:eq(0) [name=password]') // password from first form 
$('form.theForm:eq(1) [name=password]') // password from second form 
... 

Si la eficiencia de las operaciones de búsqueda selector es un factor aquí, entonces hay varias maneras triviales para acelerarlo, como las variables de almacenamiento en caché con las diferentes formas, el almacenamiento en caché $('.theForm') y usando el método eq(), etc.

jsFiddle muestra está aquí: http://jsfiddle.net/orip/dX4sY