JavaScript - 从数组中的多个输入中获取值

JavaScript - get value from multiple inputs in an array

提问by Hamada Badran

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.

我试图从数组中具有相同 id 的多个输入中获取值。我已经使用过论坛，但还没有找到适合我的解决方案。

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;

回答by jAndy

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

您不应该在文档中包含具有相同ID 的元素。ID根据规范，在整个标记中必须是唯一的。如果你无论如何都这样做，例如，像这样的方法document.getElementById只会匹配第一次出现。

Use a classinstead of ids.

使用class代替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/

演示：http: //jsfiddle.net/QgJrq/

回答by Yusaf Khaliq

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

你要求的是错误的非常错误，建议ID应该是unqiue，但为了学习者的缘故，你会这样做

  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/

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

将所有输入 ID 更改为类

  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/

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

回答by Mathletics

1. You shouldn't have more than one element with the same id.

2. getElementByIdreturns exactly one element; use getElementsByNamewhich will return the list you seek.

1. 您不应该有多个具有相同id.

2. getElementById只返回一个元素；使用getElementsByName这将返回您寻找的列表。