Acceder a una matriz de cuadros de texto de entrada HTML usando jQuery o Javascript simple

Question

Estoy buscando crear un formulario que contenga un número dinámico de cuadros de texto de entrada. Me gustaría que cada cuadro de texto forme parte de una matriz (en teoría, esto me facilitaría recorrerlos, sobre todo porque no sabré la cantidad de campos de texto que finalmente existirán). El código HTML que le gustaría algo así como:

<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> 

Estos datos luego se enviará a un script PHP y estaría representado como una matriz - o por lo menos, esa es la teoría.

Así que mi primera pregunta es, ¿esto se puede lograr usando HTML? ¿Los formularios están diseñados para funcionar de esa manera?

Si la respuesta es "sí", ¿cómo podría acceder a cada una de las que utilizan jQuery o, en su defecto, el JavaScript antiguo?

He intentado lograr esto usando el siguiente código de jQuery:

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

y

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

y el siguiente JavaScript:

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

Pero no he tenido alguna suerte.

Gracias de antemano.

Editar:

Debo señalar que desde un punto de vista Javascript, lo he tenido trabajando en la identificación de cada elemento es algo así como field_1, field_2 etc. Sin embargo, siento que si yo puede lograrlo colocando cada cuadro de texto en una matriz, esto haría que el código sea más ordenado y fácil de administrar.

Answer 1

En primer lugar, el atributo id no puede contener [ o ] caracteres.

Hay muchas maneras de obtener referencias de JavaScript jQuery/plain a estos elementos.Puede utilizar el selector descendiente:

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

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

También puede usar selector de atributos:

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

No estoy seguro de si esa es la única manera, pero creo que en la llanura JavaScript que tendrá que obtener todos input elementos (document.getElementsByTagName) y luego recorra la matriz de estos elementos y compruebe cada elemento (si tiene el atributo name cuyo valor comienza con field).

Answer 2

Dé a cada elemento de una clase y llegar al grupo usando 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 
}); 

Esto ejecutará la función anónima en cada elemento input con un nombre de clase de "campos", con la palabra clave this apuntando al elemento actual. Vea http://api.jquery.com/each/ para más información.