Question

我有一个从用户那里获取输入的表单

<form id='myForm'>
        <div id='x'>
                 <h2> start </h2>
            <ul class="rounded">
                <li><input type="text"  placeholder="text" id="o" /></li>
            </ul>
                <h2>dests </h2>
            <ul class="rounded">
                <li><input type="text"  placeholder="text" id="d" /></li>
            </ul>
            <ul class="rounded">
                <li><input type="text"  placeholder="text" id="d" /></li>
            </ul>
        </div> 
<li class="arrow"><a href="#page2" onclick='function()'>Run </a></li>
</form>

我需要一种从表单中的每个字段获取用户输入并将其放入数组的方法。我查看了getElementByTagName（'input'），但这会返回一个HTMLCollection对象。有什么建议？（P.S我正在使用jqtouch，如果你想知道奇怪的语法是什么）

Answer 1

您可以使用Array.prototype.map从querySelectorAll获取的输入元素列表中创建数组。

尝试填写input并点击以下演示中的运行：

var elements = document.querySelectorAll('#myForm input');

function callme() {
  var result = Array.prototype.map.call(elements, function(e) {
    return e.value;
  });
  console.log(result);
}

<form id='myForm'>
  <div id='x'>
    <h2> start </h2>
    <ul class="rounded">
      <li>
        <input type="text" placeholder="text" />
      </li>
    </ul>
    <h2>dests </h2>
    <ul class="rounded">
      <li>
        <input type="text" placeholder="text" />
      </li>
    </ul>
    <ul class="rounded">
      <li>
        <input type="text" placeholder="text" />
      </li>
    </ul>
  </div>
  <ul>
    <li class="arrow"><a href="#page2" onclick='callme()'>Run </a>
    </li>
  </ul>
</form>

Answer 2

试试这个：

function getValues() { 
  var values = []; // Array of input values
  var elements = document.querySelectorAll("#myForm input");

  for(var i = 0; i < elements.length; i++) {
    values.push(elements[i].value);
    //If you need the input ID:
    //values.push({name: elements[i].id , value: elements[i].value});
  }
}

Answer 3

正如其他人所提到的那样，小心使用带有唯一id的html id属性，即每个输入都应该有自己的。

使用vanilla JavaScript，document.getElementsByTagName()会返回实时html collection，您可以使用[index]作为属性访问其成员，以获取所需的元素。然后使用textObject.value访问输入值。

总而言之，document.getElementsByTagName('input')[0].value将提供第一个输入的值！这是逻辑，也检查片段。

请同时考虑以下事项：

element.querySelectorAll()通常比element.getElementsByTagName()慢，因为第一个使用文档节点的深度优先预先遍历
element.querySelectorAll()返回一个StaticNodeList

我发现这个article非常有趣。

function retrieve(){
  let list = document.getElementById('inputListContainer');
  let input = list.getElementsByTagName('input');
  let array = [];
  for( let i = 0; i < input.length; i++ ){
    //input[i].value is the same as document.getElementsByTagName('input')[i].value
    array.push(input[i].value); 
  }
  console.log( array );
}

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div id='inputListContainer'>
      <!-- Using a single ul to parent list items. Note that this does not affect the script -->
      <ul id='inputList' class='rounded'>
        <li><input type="text"  placeholder="one"/></li>
        <li><input type="text"  placeholder="two"/></li>
        <li><input type="text"  placeholder="three"/></li>
      </ul>
      <button onclick='retrieve()'>Retrieve</button>
    </div>
  </body>
</html>

Answer 4

为此，您可以使用Document.querySelectorAll()

返回文档中的元素列表（使用与指定选择器组匹配的文档节点的深度优先预先遍历遍历）。返回的对象是NodeList。

使用document.querySelectorAll("#myForm input");会将表单中的所有输入定位为ID myForm。

然后使用for()循环遍历集合并将input值推送到数组中。

for语句创建一个循环，该循环由三个可选表达式组成，括在括号中并用分号分隔，后跟一个在循环中执行的语句（通常是一个块语句）。

for ([initialization]; [condition]; [final-expression]) statement

＆＃13;

function BuildArray() {
  var myArray = [];
  var input = document.querySelectorAll("#myForm input");
  for (var i = 0; i < input.length; i++) {
    myArray.push(input[i].value);
  }
  console.log(myArray);
}

＆＃13;

<form id='myForm'>
  <div id='x'>
    <h2> start </h2>
    <ul class="rounded">
      <li>
        <input type="text" placeholder="text" id="o" value="first" />
      </li>
    </ul>
    <h2>dests </h2>
    <ul class="rounded">
      <li>
        <input type="text" placeholder="text" id="d" value="second" />
      </li>
    </ul>
    <ul class="rounded">
      <li>
        <input type="text" placeholder="text" id="d" value="third" />
      </li>
    </ul>
  </div>
  <li class="arrow"><a href="#page2" onclick='BuildArray()'>Run </a>
  </li>
</form>

＆＃13;

如果需要ID，我还建议您保持ID的唯一性，但对于此任务，ID不是gmail.setClassName("com.google.android.gm","com.google.andro‌id.gm.ComposeActivit‌yGmail");在选择器中使用，所以如果ID相同则没有问题。

如果您对上述源代码有任何疑问，请在下面留言，我会尽快给您回复。

我希望这会有所帮助。快乐的编码！

Answer 5

您只需迭代每个输入并将每个值推送到数组中。你可以在点击时调用这样的东西。请参阅此处的jQuery示例。

function click() {
   var arr = [];

   $.each($('input'), function(k,v) {
      arr.push($(v).val());
   })

   console.log(arr);
}

从输入元素中检索值并存储在数组中

5 个答案: