input tags with array

Question

Hi , Recently i am doing a project in which i encountered a strange problem

this is the program which previous programmer did MPAN

<input name="mpan[]" id="mpan[]" value="" maxlength="2" size="2" >    ///this  one to read
<input name="mpan[]" id="mpan[]" value="" maxlength="3" size="3">
<input name="mpan[]" id="mpan[]" value="" maxlength="3" size="3">
<input name="mpan[]" id="mpan[]" value="" maxlength="3" size="3">
<input name="mpan[]" id="mpan[]" value="" maxlength="3" size="3">///this  one to read

i have to read it from a javascript what i did

1) document.getElementByName("mpan").value ==> not reading script does not work
2) document.getElementByName("mpan[]").value ==> reading first one
3) document.getElementByName("mpan[0]").value ==> script does not work
4) document.getElementByName("mpan[3]").value ==> script does not work
5) document.getElementByName("mpan[]")[3].value ==> not working

can any body tell me how to read this from a javascript program

Answer 1

In HTML the ID must be unique. So it is an error to use the same ID for more than one element.

Use different IDs for every element in the list. Supposedly you are parsing the POST (or GET) data with PHP, so that you can mantain the same name (mpan[]) with no problem.

Furthermore, the IDs can be composed only by certain characters; from W3C HTML Recommendation:

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens (”-”), underscores (”_”), colons (”:”), and periods (”.”).

Answer 2

One noticeable thing is id has to be unique to each element so document.getElementById('mpan') should not work.

The names of your fields can be same. So if you want to find elements based on names. You can do

document.getElementsByName('mpan[]')[0].value;

Answer 3

An id is just a string, don't be fooled by the "[]" to assume this is an array, there's nothing to make the id property's value (or any other) have a meaning in JavaScript.

<a id="throw('don't click me bro');" href="about:blank">This should be OK too</a>

Other than that ids should be unique in the document.

Answer 4

document.getElementsByTagName("input")[0].value

document.getElementsByTagName("input")[1].value

document.getElementsByTagName("input")[2].value

document.getElementsByTagName("input")[3].value

Answer 5

This should work

  function ReadLines() {
            var x = document.getElementsByName("mpan[]");
            alert(x[3].value);
        }