Quelle est la meilleure façon de mettre à jour les noms d'entrée lors de leur ajout dynamique à un formulaire?

Question

Je suis trynig à trouver une manière propre et efficace de gérer les noms d'entrée de formulaire lors de l'ajout dynamique de plus à la matrice POST.

Par exemple, si je la forme suivante:

<fieldset> 
    <input type="text" name="users-0.firstname" /> 
    <input type="text" name="users-0.lastname" /> 
</fieldset> 

Je puis cliquez sur un bouton « addmore » qui fait double emploi que HTML et ajoute de nouveau dans le document. Résultat:

<fieldset> 
    <input type="text" name="users-0.firstname" /> 
    <input type="text" name="users-0.lastname" /> 
</fieldset> 

J'essaie de trouver la meilleure façon d'augmenter cet indice de nom que je peux utiliser les données sur le serveur. Jusqu'à présent, je l'ai utilisé le code suivant:

$('.addmore').click(function() 
{ 
    var $button = $(this); 
    var $fieldset = $button.prev('fieldset'); 
    var $newset = $('<div class="new">' + $fieldset[0].innerHTML + '</div>'); 

    $newset.insertBefore($button); 
    updatenames($newset, $('fieldset').length + 1); 
}); 

function updatenames($set, newIndex) 
{ 
    /* 
     updates input names in the form of 
     set-index.name 
     set-index 
    */ 
    var findnametype = function(inputname) 
    { 
     if (inputname.indexOf('-') != -1 && inputname.indexOf('.') != -1) 
     { 
     var data1 = inputname.split('-'); 
     var data2 = data1[1].split('.'); 

     // [type, set, index] 
     return [1, data1[0], parseInt(data2[0])] 
     } 

     if (inputname.indexOf('-') != -1 && inputname.indexOf('.') == -1) 
     { 
     var data = inputname.split('-'); 
     return [2, data[0], data[1]]; 
     } 

     return false; 
    }; 

    var type = findnametype($set.find('input:eq(0)')[0].name); 

    $set.find('input, select').each(function() 
    { 
     var $input = $(this); 

     var oldname = $input[0].name; 
     var newname = false; 

     switch (type[0]) 
     { 
     case 1: newname = oldname.replace('-' + type[2], '-' + newIndex); 
      break; 
     case 2: newname = oldname.replace('-' + type[2], '-' + newIndex); 
      break; 
     } 

     $input[0].name = newname; 
    }); 

    return type; 
} 

Cette updatenames fonction est une variante de ce que je me sers de ces derniers temps. Dans ce cas, je vérifie pour trouver le format du nom d'entrée. J'incrémente ensuite l'index.

L'incrémentation, comme vous l'avez probablement remarqué, se produit dans le DOM. En tant que «partie 2» à ma question, j'aimerais apprendre comment avoir cet objet retourné pour que je l'insère ensuite dans le DOM.

Quelque chose comme:

$newset = updatenames($newset, $('fieldset').length +1); 
$newset.insertBefore($button); 

Votre aide est appréciée. À votre santé.

Answer 1

Avez-vous envisagé d'utiliser des noms de champs basés sur des tableaux? Vous ne voudriez pas avoir à modifier ceux du tout:

<input type="text" name="users.firstname[]" /> 
<input type="text" name="users.lastname[]" /> 

si cela fonctionne pour vous dépendra bien sûr de ce que vous allez faire avec les champs.

Answer 2

<fieldset> 
    <input index=1 var=user prop=firstname /> 
    <input index=1 var=user prop=lastname /> 
</fieldset> 

<fieldset> 
    <input index=2 var=user prop=firstname /> 
    <input index=2 var=user prop=lastname /> 
</fieldset> 

avant de soumettre votre formulaire

obtenir les attributs personnalisés et construire votre « nom » attribut

[mise à jour]

son jsp mais ne devrait pas être difficile pour u pour convertir php

<% 
for (int i = 0; i < 1000; i++) { 
%> 

<fieldset> 
<input index=<%=i%> var=user prop=firstname /> 
<input index=<%=i%> var=user prop=lastname /> 
</fieldset> 
<% 
} 
%> 

pour le code js

$('button').click(function(){ 

    $('input').each(function(i, node){ 
     var $node = $(node); 

     $node.attr('name', $node.attr('var') + $node.attr('index') + "."+ $node.attr('prop')) 

    }); 

}); 

Answer 3

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.addmore').click(function() { 
      var fieldset = $(this).prev('fieldset'); 
      var newFieldset = fieldset.clone(); 
      incrementFieldset(newFieldset); 
      newFieldset.insertBefore($(this)); 
     }); 
    }); 

    function incrementFieldset(set) { 
     $(set).find('input').each(function() { 
      var oldName = $(this).attr('name'); 
      var regex = /^(.*)-([0-9]+)\.(.*)$/; 
      var match = regex.exec(oldName); 
      var newName = match[1] + '-' + (parseInt(match[2]) + 1) + '.' + match[3]; 
      $(this).attr('name', newName); 
     }); 
    } 
</script> 

<fieldset> 
    <input type="text" name="users-0.firstname" /> 
    <input type="text" name="users-0.lastname" /> 
</fieldset> 
<input type="button" class="addmore" value="Add" />