Geek Answers Handbook

JavaScript - get value from multiple inputs in an array

I am trying to get a value from multiple inputs with the same identifier in an array. I already used the forum, but did not 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;
+4
source share
3 answers

You should not have elements with identical identifiers inside the document. ID must be unique throughout your specification. If you do this, methods like document.getElementById will only match the very first event, for example.

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

+5
source

What you are asking for is incorrectly wrong, it is recommended that the identifiers be unqiue, but for students here, what would you 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 the fact that someone missed the vote, giving a full explanation of why the above method is wrong, but does exactly what you asked for, the correct method is here.

change all id entries 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/

+3
source

  • You should not have more than one element with the same id .

  • getElementById returns exactly one element; use getElementsByName which will return the list you are looking for.

+2
source

More articles:


All Articles