Accès à un éventail de zones de texte entrée HTML à l'aide jQuery ou simplement Javascript

Question

Je cherche à créer un formulaire qui contient un nombre dynamique de zones de texte d'entrée. Je voudrais que chaque zone de texte fasse partie d'un tableau (cela me faciliterait en théorie la lecture en boucle, d'autant plus que je ne connaîtrai pas le nombre de champs de texte qui existeront éventuellement). Le code HTML aimerait quelque chose comme:

<p>Field 1: <input type="text" name="field[1]" id="field[1]"></p> 
<p>Field 2: <input type="text" name="field[2]" id="field[2]"></p> 
<p>Field 3: <input type="text" name="field[3]" id="field[3]"></p> 
<p>Field 4: <input type="text" name="field[4]" id="field[4]"></p> 
<p>Field 5: <input type="text" name="field[5]" id="field[5]"></p> 

Ces données seraient alors envoyées à un script PHP et serait représentée par un tableau - ou tout au moins, qui est la théorie.

Donc, ma première question est, est-ce réalisable en utilisant le HTML? Les formulaires sont-ils conçus pour fonctionner de cette façon?

Si la réponse est « oui », comment pourrais-je aller ensuite sur l'accès à chacun de ceux qui utilisent jQuery ou à défaut, bon vieux JavaScript?

J'ai essayé d'y parvenir en utilisant le code jQuery suivant:

someval = $('#field[1]').val(); 

et

someval = $('#field')[1].val(); 

et le code JavaScript suivant:

someval = document.getElementById('related_link_url')[1].value; 

Mais je ne l'ai pas eu n'importe quelle chance.

Merci d'avance.

Edit:

Je dois souligner que, d'un point de vue Javascript, je l'ai eu de travail où l'ID de chaque élément est quelque chose comme champ_1, Champ_2 etc. Cependant, je pense que si je pouvez y parvenir en plaçant chaque zone de texte dans un tableau, il serait plus facile et plus facile de gérer le code.

Answer 1

Tout d'abord, l'attribut id ne peut pas contenir [ ou ].

Il y a beaucoup de façons d'obtenir des références jQuery/JavaScript simples à ces éléments.Vous pouvez utiliser le sélecteur descendant:

<fieldset id="list-of-fields"> 
    <!-- your inputs here --> 
</fieldset> 

$("#list-of-fields input"); 
document.getElementById("list....").getElementsByTagName("input"); 

Vous pouvez également utiliser le sélecteur d'attribut:

$("input[name^=field]"); 

Je ne suis pas sûr que ce soit la seule façon, mais je pense en JavaScript simple, vous devrez chercher tous input éléments (document.getElementsByTagName), puis bouclez le tableau de ces éléments et vérifiez chaque élément (s'il a name attribut dont la valeur commence par field).

Answer 2

Donnez à chaque élément d'une classe et accéder au groupe en utilisant jQuery:

<p>Field 1: <input type="text" name="field[1]" class="fields"></p> 
<p>Field 2: <input type="text" name="field[2]" class="fields"></p> 
<!-- etc... --> 

jQuery:

$("input.fields").each(function (index) 
{ 
    // Your code here 
}); 

Cela exécutera la fonction anonyme sur chaque élément input avec un nom de classe de « champs », avec le mot-clé this pointant vers l'élément en cours. Voir http://api.jquery.com/each/ pour plus d'informations.