Nouvelle numérotation des index de tableau de saisie de texte avec jQuery

J’ai le bloc HTML suivant qui est utilisé pour collecter des informations sur un élément de l’utilisateur dans le cadre d’un formulaire:

 Name: 
 Amount:

Je peux cloner cet élément (si l’utilisateur souhaite append un autre élément) et le placer après la dernière instance de div.clone_block dans le DOM. Tout fonctionne div.clone_block et je peux également supprimer des éléments. Cependant, je me retrouve avec plusieurs occurrences d’entrées de texte portant le même nom, ce qui signifie que seule la dernière apparaît dans une demande POST (les précédentes sont écrasées). Ce que je veux faire est de renuméroter tous les éléments de sorte que le premier soit l’ item[0] , le second l’ item[1] etc.

Existe-t-il un moyen de faire cela dans jQuery? La création de noms de cette manière facilite le traitement des données POST avec PHP. Par conséquent, je ne souhaite pas modifier le schéma de dénomination, si possible.

Vous pouvez implémenter quelque chose comme ceci pour renommer les éléments après chaque clone / suppression:

 function renumber_blocks() { $(".clone_block").each(function(index) { var prefix = "items[" + index + "]"; $(this).find("input").each(function() { this.name = this.name.replace(/items\[\d+\]/, prefix); }); }); }

Démo: http://jsfiddle.net/Wzzf2/1/

Si vous utilisez PHP comme langage côté serveur, vous pouvez le faire:

  Name: 
 Amount:

PHP gérera automatiquement la création des bons index de décalage lorsqu’il recevra les données.

Cependant, pour répondre à votre question, une fois que vous avez cloné votre bloc, il vous suffit de naviguer dans sa structure et de modifier les atsortingbuts de nom avec un nombre incrémenté. Ou mieux, parcourez toutes les entrées et réindexez-les chaque fois qu’un bouton d’ajout ou de suppression est utilisé … cela permet des suppressions.

 /// find each row with inputs $('div.form_row').each(function(rowIndex){ /// find each input with a name atsortingbute inside each row $(this).find('input[name]').each(function(){ var name; name = $(this).attr('name'); name = name.replace(/\[[0-9]+\]/g, '['+rowIndex+']'); $(this).attr('name',name); }); });

Ce qui précède fonctionnera (et a été testé) avec le balisage suivant, vous devriez voir que les index sont réorganisés:

Correction!

Je viens juste de réaliser un bogue avec le recours à PHP pour générer les index … cela fonctionnera si vos index sont la dernière partie de la structure du tableau:

 something[abc][] something[def][]

Mais si vous utilisez (comme vous):

 something[][abc] something[][def]

Vous allez finir par le côté PHP suivant:

 array ( '0' => array( 'abc' => 'value' ), '1' => array( 'def' => 'value' ), )

Plutôt que:

 array ( '0' => array( 'abc' => 'value', 'def' => 'value', ), );

Ce qui est probablement plus ce que vous voulez. Donc, pour votre exemple, ignorez la route PHP que je mentionne et utilisez plutôt l’extrait de code jQuery. La solution PHP rest utile si vous n’avez qu’une entrée par ligne mais …

Si vous voulez faire autre chose en utilisant l’index pendant la copie, ce serait un peu plus compliqué:

 var name = $('input').attr('name'), newId = parseInt(name.match(/\d+/)[1])++; // clone the input and use newId for something else $('input.new').attr('name', name.replace(/\d+/, newId));