Question

通常，如果我添加新的输入标签，我还必须添加Javascript。

我尝试从输入标签中收集所有值，那么如何通过循环将值传递给对象使用标签输入名称也是对象键名称。

尝试使用计数

document.getElementById("form1").elements.length

似乎它也收集了按钮标签，如何取消它

<form name="form1">
 <input type="text" name="value1">
 <input type="text" name="value2">
 <input type="text" name="value3">
 <input type="text" name="value4">

 <input type="button" id="save" onClick="fc1()" value="Save">
</form>


for(i=0;......)
{
    obj.value+'i' =  document.forms["form1"]["value"+ (i+1)].value;
}

Same result as this.


function fc1(){

   this.value1 = document.forms["form1"]["value1"].value;
   this.value2 = document.forms["form1"]["value2"].value;
   this.value3 = document.forms["form1"]["value3"].value;
   this.value4 = document.forms["form1"]["value4"].value;


   const obj = {
      "value1": this.value1,
      "value2": this.value2,
      "value3": this.value3,
      "value4": this.value4
   };

}

Answer 1

我通常会通过他们的ID或类来获取输入：

<input type="text" id="value1">

然后抓住价值：

const value1 = document.getElementById('value1').value

减少代码，可能把它扔进一个数组：

const valueArray = [value1, value2, value3]

然后你可以这样做：

const allValues = {}

valueArray.forEach((value, index) => {
  allValues[`value${index + 1}`] = value
})

现在当你记录allValues时，你应该拥有你想要的东西。注意，我正在使用一些es6。

Answer 2

这个怎么样？

var obj = {};
 var form = document.getElementById("form1");
    form.children.forEach(function(elm){
    if(elm.type === 'text'){
        obj[elm.name] = elm.value;
      }
  });
  console.log(obj);

Answer 3

尝试给予同样的课程＆＃39;或者＆＃39; name＆＃39;属性到文本字段。试试var x = document.getElementsByClassName("example");

它为您提供了类名为＆＃34;示例＆＃39;的所有元素的列表。然后你可以根据x的长度循环。

<强>参考文献：

https://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp

Answer 4

document.querySelectorAll就是这样做的。

document.querySelectorAll("form[name='form1'] input[type='text']")

将返回form1中所有类型为text的输入字段作为HTML节点。

let elements = document.querySelectorAll("form[name='form1'] input[type='text']");

elements.forEach(e => console.log(e.value));

...记录输入字段的值。不要通过硬编码类或ID来使自己变得更难，这将允许您无需额外检查或不获取页面上的每个输入就可以定位所需的输入元素。

示例：

const values = {};
document.querySelectorAll("form[name='form1'] input[type='text']").forEach(element => values[element.name] = element.value);

console.log(values);

<form name="form1">
  <input type="text" name="value1" value=1>
  <input type="text" name="value2" value=2>
  <input type="text" name="value3" value=3>
  <input type="text" name="value4" value=4>
  <input type="button" id="save" onclick="fc1()" value="Save">
</form>

Answer 5

这是使用jQuery完成的替代解决方案。

希望这就是你要找的东西。如果需要，很乐意解释或帮助提供更好的解决方案。

//jQuery solution
const obj = {}

$('#save').click(function(e){
  var form = $(this).parent();
  var inputs = form.children().not(':input[type=button]');
  $.each( inputs, function(){
    obj[$(this).attr('name')] = $(this).val();
  });
  console.log(obj);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>jQuery solution</h2>
<form name="form1">
 <input type="text" name="value1">
 <input type="text" name="value2">
 <input type="text" name="value3">
 <input type="text" name="value4">

 <input type="button" id="save" value="Save">
</form>

JS解决方案

//JS Solution
const objs = {}
var button = document.getElementById('savejs'); 
var form = document.getElementById('formjs'); 
var element = {};

button.addEventListener('click', function(){
  inputs = form.children;
  for(i=0; i < inputs.length; i++){
    if(inputs[i].name != ""){

        objs[inputs[i].name] = inputs[i].value;
    }
  }
   console.log(objs);
})

<h2>JS solution</h2>
<form name="form1" id='formjs'>
 <input type="text" name="value1">
 <input type="text" name="value2">
 <input type="text" name="value3">
 <input type="text" name="value4">

 <input type="button" id="savejs" value="Save">
</form>

Answer 6

试试这个：

var input = document.forms[0].querySelectorAll('input[type=text]');
var result = Array.from(input).reduce((r, ele) => {
  r[ele.name] = ele.value;
  return r;
}, {});
console.log(result);

<form name="form1">
  <input type="text" name="value1" value=1>
  <input type="text" name="value2" value=2>
  <input type="text" name="value3" value=3>
  <input type="text" name="value4" value=4>
  <input type="button" id="save" onclick="fc1()" value="Save">
</form>

Answer 7

如果您使用类似的东西......我认为它会起作用。：）

var myObj = {};
var elems = document.getElementsByTagName('input'), i;
for (i in elems) {
    myObj[value + i] = myObj[i].value;
}

从getElementsByTagName返回的是一个包含所有匹配标记的数组。这里有一些巫师的答案哈。：）

从输入html表单收集所有值到javascript对象

7 个答案: