Accessing an array of HTML input text boxes using jQuery or plain Javascript

Question

I'm looking to create a form which contains a dynamic number of input text boxes. I would like each text box to form part of an array (this would in theory make it easier for me to loop through them, especially as I won't know the number of text fields that will eventually exist). The HTML code would like something like:

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

This data would then be sent to a PHP script and would be represented as an array - or at least, that's the theory.

So my first question is, is this achievable using HTML? Are forms designed to work that way?

If the answer to that is "yes", how would I then go about accessing each of those using jQuery or failing that, plain old JavaScript?

I've attempted to achieve this using the following jQuery code:

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

and

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

and the following JavaScript:

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

But I've not had any luck.

Thanks in advance.

Edit:

I should note that from a Javascript point of view, I've had it working where the ID of each element is something like field_1, field_2 etc. However, I feel that if I can achieve it by placing each text box into an array, it would make for tidier and easier to manage code.

Answer 1

Give each element a class and access the group using 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
});

This will run the anonymous function on each input element with a classname of "fields", with the this keyword pointing to the current element. See http://api.jquery.com/each/ for more info.

Answer 2

First of all, id attribute cannot contains [ or ] character.

There is lots of ways to get jQuery/plain JavaScript references to these elements. You can use descendant selector:

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

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

You can also use attribute selector:

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

I'm not sure whether that's the only way but I think in plain JavaScript you'll have to fetch all input elements ( document.getElementsByTagName ) and then loop through array of these elements and check each element (whether it has name attribute which value starts with field ).