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

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

javascript arrays forms dom

Javascript 从输入元素中检索值并存储在数组中,javascript,arrays,forms,dom,Javascript,Arrays,Forms,Dom,我有一个表单，它接受用户的输入 <form id='myForm'> <div id='x'> <h2> start </h2> <ul class="rounded"> <li><input type="text" placeholder="text" id="o" /></li>

我有一个表单，它接受用户的输入

<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对象。有什么建议吗？（如果你想知道奇怪的语法是怎么回事，我正在使用jqtouch）

试试这个：

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});
  }
}

函数getValues（）{
var values=[]；//输入值数组
var elements=document.queryselectoral（#myForm input”）；
对于（var i=0；i

您只需迭代每个输入并将每个值推送到数组中。单击时，您会调用类似的内容。请参见这里的jQuery示例

function click() {
   var arr = [];

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

   console.log(arr);
}

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

使用普通JavaScript，

document.getElementsByTagName（）

返回一个live，您可以使用

[index]

以属性形式访问其成员，以获取所需的元素。然后使用

textObject.value

访问输入值

总之，

document.getElementsByTagName（'input'）[0]。value

将提供第一个输入的值！这就是逻辑，还要检查代码段

也请考虑以下内容：

```
element.querySelectorAll（）
```
通常比
```
element.getElementsByTagName（）
```
慢，因为第一个元素使用深度优先的预先顺序遍历文档节点
```
element.querySelectorAll（）
```
返回StaticNodeList

我觉得这个话题很有趣

函数检索（）{
let list=document.getElementById（'inputListContainer'）；
让input=list.getElementsByTagName（'input'）；
让数组=[]；
for（设i=0；i








检索
您可以使用从中获取的输入元素列表创建数组
尝试填写输入
s并在下面的演示中单击运行：

var elements=document.querySelectorAll（“#myForm input”）；
函数callme（）{
var result=Array.prototype.map.call（元素，函数（e）{
返回e.value；
});
控制台日志（结果）；
}

开始




目的地












为此，您可以使用
返回文档中与指定选择器组匹配的元素列表（使用文档节点的深度优先顺序遍历）。返回的对象是一个
使用document.queryselectoral（#myforminput”）
将使用myForm
的ID
将表单中的所有输入作为目标
然后使用循环遍历集合，并将input
值推送到数组中
for语句创建一个循环，该循环由三个可选表达式组成，用括号括起来，用分号分隔，然后是要在循环中执行的语句（通常是块语句）
（[初始化]；[条件]；[最终表达式]）的
声明


函数BuildArray（）{
var myArray=[]；
var输入=document.queryselectoral（#myForm输入”）；
对于（变量i=0；i


开始




目的地










我看到您有两个id相同的输入<代码>id应该是唯一的，而且到目前为止您尝试了什么？javsascript在哪里使用？您有几个元素具有他们在注释中提到的相同IDA，您有几个控件具有相同id。您可以尝试下面的代码行。var inputControls=$（'#myForm'）.find（'input[type=text]'）；变量inputArray=[]；$。每个（inputControls，函数（索引，值）{var inputValue=$（item）.val（）；inputArray.push（inputValue）；}）；它们必须是独一无二的吗？表单是动态的（用户可以添加更多dest），因此很难随着用户添加更多dest而增加id。如果我是你，我会交换getElementsByTagName（'input'）document.querySelectorAll（“#myForm input”）否则将从页面获取所有输入。OP希望从表单中获取所有输入。捕捉得好！谢谢@NewToJSVery welcome，您的原始答案非常接近，所以我没有提交相同的答案，但有一个小改动，我认为发布评论会更容易：）老实说，我想添加一些有关使用querySelectorAll（）
的信息和一个工作片段。观看演示和详细答案似乎更有价值。如果你选择不更新你的答案，我会的