JavaScript - get value from multiple inputs in an array

Question

I am trying to get the value from muliple inputs with the same id in an array. I already used the forum, but haven't find a solution for me.

Exmaple

<input type="hidden" value="'+image_url+'" name="webcampics[]" id="webcampics">
<input type="hidden" value="'+image_url+'" name="webcampics[]" id="webcampics">
<input type="hidden" value="'+image_url+'" name="webcampics[]" id="webcampics">
<input type="hidden" value="'+image_url+'" name="webcampics[]" id="webcampics">


  var elem = document.getElementById("webcampics");
  var names = [];
  for (var i = 0; i < elem.length; ++ i) {
     names += elem[i]+'|';
  }
  var webcamval = names;

This attribute defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS). - developer.mozilla.org/en-US/docs/HTML/Global_attributes — Chase
– Chase, Commented Jan 14, 2013 at 15:58
HTML does not allow two elements with the same id. When you do include them, the results are unpredictable. Often the problems show up when you try to search by id. Can you give them different ids, or search by other criteria? — Scott Sauyet
– Scott Sauyet, Commented Jan 14, 2013 at 15:58
@ScottSauyet The results are actually very predictable -- the browser or JavaScript engine will stop at the first ID match it finds and ignore any that come after. — Blazemonger
– Blazemonger, Commented Jan 14, 2013 at 15:59
@Blazemonger: How about CSS engines? How about attribute selectors [id=xyz]? The trouble is that you're doing something against the rules, and now you can't count on the remaining rules to work consistently. — Scott Sauyet
– Scott Sauyet, Commented Jan 14, 2013 at 16:03

jAndy · Accepted Answer · 2013-01-14 16:05:24Z

8

You shouldn't have elements with identical id's within the document. ID's have to be unique throughout your entire markup, by specification. If you do it anyways, methods like document.getElementById will only match the very first occurence for instance.

Use a class instead of ids.

<input type="hidden" value="'+image_url+'" name="webcampics[]" class="webcampics">
<input type="hidden" value="'+image_url+'" name="webcampics[]" class="webcampics">
<input type="hidden" value="'+image_url+'" name="webcampics[]" class="webcampics">
<input type="hidden" value="'+image_url+'" name="webcampics[]" class="webcampics">

var inputs = document.getElementsByClassName( 'webcampics' ),
    names  = [].map.call(inputs, function( input ) {
        return input.value;
    }).join( '|' );

Demo: http://jsfiddle.net/QgJrq/

edited Jan 14, 2013 at 16:05

answered Jan 14, 2013 at 15:59

jAndy

237k57 gold badges313 silver badges363 bronze badges

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

3 Comments

Hamada Badran Over a year ago

How would the soultion be if I use a class for example.

marekful Over a year ago

Actually you CAN have ID duplicates in the DOM. It is allowed but not standard compliant.

jAndy Over a year ago

@HamadaBadran: no its actually correct. But if you're using some legacy / old'ish browsers it might not be supported. If thats the case, replaced it with .getElementsByTagNames( 'input' ) instead for instance. That would just grab any input node (which probably should be more precise in real-world apps)

Yusaf Khaliq · Accepted Answer · 2013-01-14 16:36:17Z

3

What you are asking for is wrong very wrong, it is recommended IDs should be unqiue, but for learners sake here's what you would do

  var elem = document.getElementsByTagName("input");
  var names = [];
  for (var i = 0; i < elem.length; ++i) {
    if (typeof elem[i].attributes.id !== "undefined") {
      if (elem[i].attributes.id.value == "webcampics") {
        names.push(elem[i].value);
      }
    }
  }
  var webcamval = names;

http://jsfiddle.net/5vamG/

Due to someone down voting after giving a full explanation why the above mentioned method is wrong, however does exactly what youve asked for, here's the correct method.

change all the inputs id to class

  var elem = document.getElementsByClassName("webcampics");
  var names = [];
  for (var i = 0; i < elem.length; ++i) {
    if (typeof elem[i].value !== "undefined") {
        names.push(elem[i].value);
      }
    }
  }
  var webcamval = names;

http://jsfiddle.net/5vamG/1/

edited Jan 14, 2013 at 16:36

answered Jan 14, 2013 at 15:58

Yusaf Khaliq

3,39312 gold badges46 silver badges82 bronze badges

6 Comments

Yusaf Khaliq Over a year ago

although this is a bad thing, as ID's should be unique it does specifically what you asked for

Blazemonger Over a year ago

Don't encourage new programmers to embrace bad practices with kludgey code. Teach them the right practices instead.

Yusaf Khaliq Over a year ago

Try reading what i have put before the script?... what they are asking for is WRONG, i gave a script which specified their needs for the sake of teaching how it can be done. the downvote was really unnecessary, please read my entire post rather than the quoted script :@

Blazemonger Over a year ago

I know exactly what you were doing. It shouldn't be done anyway. Please don't teach new programmers bad habits.

Yusaf Khaliq Over a year ago

I AM A NEW PROGRAMMER, if i just give the right method there's no flexibility in the way they learn to program, I can't remember saying use my method alternatively to the correct methods provided

|

Evan Davis · Accepted Answer · 2013-01-14 16:01:35Z

2

You shouldn't have more than one element with the same id.
getElementById returns exactly one element; use getElementsByName which will return the list you seek.

answered Jan 14, 2013 at 16:01

Evan Davis

36.7k7 gold badges53 silver badges58 bronze badges

Collectives™ on Stack Overflow

JavaScript - get value from multiple inputs in an array

3 Answers 3

3 Comments

http://jsfiddle.net/5vamG/

http://jsfiddle.net/5vamG/1/

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related