input tags with array

Question

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 anybody tell me how to read this from a javascript program?

This is a total shot in the dark, but try document.getElementByName("mpan")[3].value note the name. — Pekka
– Pekka, Commented Jun 16, 2010 at 18:06
I've taken the time to format your code. You have to indent HTML with 4 spaces, or put it inside of backticks (`) if you want it to show. — Matt Ball
– Matt Ball, Commented Jun 16, 2010 at 18:07
AFAIK the id attribute don't work with arrays ("[]") as ALL id must be UNIQUE. — AlexV
– AlexV, Commented Jun 16, 2010 at 18:09

Iacopo · Accepted Answer · 2010-06-16 18:09:47Z

2

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 (”.”).

answered Jun 16, 2010 at 18:09

Iacopo

4,3221 gold badge25 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Iacopo Over a year ago

Actually the W3C tells that neither the id nor the name can contain []. But of course using the square brackets in the input names work, so I'm puzzled.

Shawn O · Accepted Answer · 2010-06-16 18:12:19Z

1

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

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

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

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

answered Jun 16, 2010 at 18:12

Shawn O

233 bronze badges

Comments

Motti · Accepted Answer · 2010-06-16 18:12:17Z

0

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.

answered Jun 16, 2010 at 18:12

Motti

116k56 gold badges195 silver badges277 bronze badges

Comments

josephj1989 · Accepted Answer · 2010-06-16 18:13:43Z

0

This should work

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

answered Jun 16, 2010 at 18:13

josephj1989

9,7299 gold badges50 silver badges70 bronze badges

Comments

ann · Accepted Answer · 2015-09-17 08:58:54Z

0

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;

edited Sep 17, 2015 at 8:58

ann

5721 gold badge10 silver badges19 bronze badges

answered Jun 16, 2010 at 18:10

sushil bharwani

30.2k30 gold badges98 silver badges130 bronze badges

Collectives™ on Stack Overflow

input tags with array

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related