Clonage et renommage des éléments de formulaire avec jQuery

Je suis à la recherche d'un moyen efficace pour soit clone/renommer ou de les re-créer des champs d'adresse à offrir la capacité de soumettre des adresses multiples sur la même page. Donc, avec l'exemple de formulaire comme ceci:

<div id="addresses">
  <div class="address">
    <input type="text" name="address[0].street">
    <input type="text" name="address[0].city">
    <input type="text" name="address[0].zip">
    <input type="text" name="address[0].state">
  </div>
</div>
<a href="" id="add_address">Add address form</a>

De ce que je peux comprendre, il y a deux options pour ce faire:

  1. Recréer la forme du champ par champ et incrémenter l'index qui est le genre de commentaire: 
    var index = $(".address").length;

$('<`input`>').attr({
name: 'address[' + index + '].street',
type: 'text'
}).appendTo(...);

$('<`input`>').attr({
name: 'address[' + index + '].city',
type: 'text'
}).appendTo(...);

$('<`input`>').attr({
name: 'address[' + index + '].zip',
type: 'text'
}).appendTo(...);

$('<`input`>').attr({
name: 'address[' + index + '].state',
type: 'text'
}).appendTo(...);
  2. Clone couche Existante et remplacer le nom du clone: 
    $("div.address").clone().appendTo($("#addresses"));

Que l'on ne vous recommandons d'utiliser en termes d'être plus efficace et si son #2 pouvez-vous s'il vous plaît suggérer comment je pourrais aller sur la recherche et le remplacement de toutes les occurrences de [0] à [1] ([n]). Merci.

source d'informationauteur Micor

  1. 29

    En théorie, la façon la plus simple serait de cloner ensuite modifier le nom:

    var newaddress= $("#addresses div.address").eq(0).clone();
newaddress.find('input').each(function() {
    this.name= this.name.replace('[0]', '['+i+']');
});
$('#addresses').append(newaddress);

    Cependant:

    un. jQuery clone() est une très mauvaise pièce de travail. Sur IE, il serialises les nœuds de HTML, processus de la chaîne HTML avec la regex (!) pour supprimer son bodge de travail interne attributs ID et ensuite il demande au navigateur de l'analyser à nouveau. C'est l'une de mes parties préférées de jQuery: il est fortement sujette à erreur, perd une partie de l'information, et il est lent (pas que la vitesse qui compte pour les tout petit travail vous semblent être en train de faire ici).

    Le navigateur natif du cloneNode(true) méthode est beaucoup mieux, mais vous ne pouvez pas vraiment utiliser si vous êtes en train de faire jQuery ça parce qu'elle copie de jQuery id internes, susceptibles de créer la confusion de son script. Ugh. Quel gâchis.

    b. Lorsque vous modifiez une entrée de nom, si c'est par input.name comme ici, ou à l'aide de attr() comme dans votre exemple, il y a des problèmes dans IE<=7.

    En particulier, bien qu'il soumettra les entrées avec le bon nom de contrôle, ils ne seront pas indexés sous le bon nom dans le form.elements HTMLCollection (ou sur form lui-même, bien que vous ne devriez pas l'utiliser de toute façon). Ce n'est pas nécessairement un problème si vous êtes à la sélection des données fondées sur des Id ou des sélecteurs jQuery plutôt que de la vieille école HTMLCollection interface. Le pire, c'est que les boutons radio, si vous utilisez l'un, ne sera pas correctement le nom groupées.

    Si c'est une préoccupation pour vous, je suis peur d'utiliser innerHTML/html() pour créer la div, comme dans la tvp de la réponse, est votre seule option. (Vous pouvez toujours combiner les deux, de la création à l'aide de HTML, puis de changer les autres attributs de texte et de contenu à l'aide de text()attr()val() etc. pour éviter l'habituel HTML échapper à des problèmes lorsque vous allez dans les coller des chaînes de texte en HTML.)

  2. 4

    C'est beaucoup moins verbeux si vous écrivez sainement 🙂 je serais probablement utiliser le clone et l'ajouter. Cependantvous allez obtenir des noms en double. Ce n'est pas une grosse affaire si votre back-end peut gérer correctement "adresse[].de la rue", mais il ne peut pas et dans ce cas, vous auriez besoin pour le nettoyage après le clone. Donc je recommande de "se cacher dans l'ordre du générateur de fonction".

    function createAddress (index) {
  return jQuery(replace('\
    <div class="address">\
      <input type="text" name="address[{i}].street">\
      <input type="text" name="address[{i}].city">\
      <input type="text" name="address[{i}].zip">\
      <input type="text" name="address[{i}].state">\
    </div>\
    ', {i: index}))
}

    Où les remplacer est certains ranger fonction qui comprend une simple interpolation de la cartographie. Je préfère "garder le balisage dans quelque chose qui ressemble à de balisage".

    Se soucier de la performance ici est probablement pas justifié.

  3. 0

    Je belive je suis passer par la même chose et a trouvé quelques grande source qui va comme ceci:

    <script type="text/javascript">
function trimNums(stringToTrim)
{
return stringToTrim.replace(/\d+$/,"");
}
function dupForm(divId, divClass, btnAdd, btnRm)
{
//alert(divId+'   '+divClass);
var num     = $(divClass).length;
var newNum  = new Number(num + 1);
var i;
var newElem = $('#' + divId + num).clone().attr('id', divId + newNum).fadeIn('slow');
for (i=0; i < newElem.children().length; i++)
{
var attrId = trimNums(newElem.children(':eq('+i+')').attr('id'));
var attrName = trimNums(newElem.children(':eq('+i+')').attr('name'));
newElem.children(':eq('+i+')').attr('id', attrId + newNum).val('');
}
$('#' + divId + num).after(newElem);
$('#' + btnRm).attr('disabled','');
if (newNum == 15)
$('#' + btnAdd).attr('disabled','disabled');
}
function rmForm(divId, divClass, btnAdd, btnRm)
{
var num = $(divClass).length;
$('#' + divId + num).remove();
$('#' + btnAdd).attr('disabled','');
if (num-1 == 1)
$('#' + btnRm).attr('disabled','disabled');
}
</script>

    et le code html est:

    <form id="myForm" action="testingForm.php" method="post">
<div id="input1" style="margin-bottom:4px;" class="clonedInput">
Part #: <input name="part[]" type="text" id="part1" size="10" maxlength="15" />
Description: <input name="description[]" type="text" id="description1" size="30" maxlength="50" />
Qty: <input name="quantity[]" type="text" id="quantity1" size="5" maxlength="5" />

    ....