Question

我已经尝试了十几种解决方案，但没有一个让我这么做

console.log(name + " " + value);

没有某种奇怪的JavaScript东西，我不知道该怎么做（我得到了90％的不同组合的东西）...我需要获取输入和选择以及文本区域，甚至最好是隐藏区域，输入或单击典型表格（文件上传除外）。

Answer 1

您可以使用FormData构造函数，并传入form您想要其键值对。如果您将form作为参数传递，它将自动包含表单的当前键/值对（键是元素的名称，值是它们的值）。文件输入内容也将被编码，非常适合AJAX调用。

var formData = new FormData(document.getElementById("myForm"));
console.log(...formData);

<form id="myForm" name="myForm">
  <div>
    <label for="username">Enter name:</label>
    <input type="text" id="username" name="username"value="John">
  </div>
  <div>
    <label for="useracc">Enter account number:</label>
    <input type="text" id="useracc" name="useracc" value="123456">
  </div>
<input type="submit" value="Submit!">
</form>

如果要在对象中包含所有键/值对，则可以遍历表单中具有name属性的所有元素，以将Object的属性设置为与元素名称相等的值的元素。

var formMap = {};
var formElems = document.querySelectorAll('#myForm [name]');
for(var i = 0; i < formElems.length; i++){
  var elem = formElems[i];
  formMap[elem.name] = elem.value;
}
console.log(formMap);
//now you can get the values of the form element with a particular name like so:
//formMap["username"];->"John"

<form id="myForm" name="myForm">
  <div>
    <label for="username">Enter name:</label>
    <input type="text" id="username" name="username"value="John">
  </div>
  <div>
    <label for="useracc">Enter account number:</label>
    <input type="text" id="useracc" name="useracc" value="123456">
  </div>
<input type="submit" value="Submit!">
</form>

Answer 2

通过querySelectorAll的简单解决方案是可能的。您可以选择具有form属性的name元素的所有后代，然后迭代结果，将每个元素记录到控制台，如下所示：

document.body
.querySelectorAll('form [name]')
.forEach(element => {

   console.log('name:', element.name, 'value:', element.value);
})

<form>
  <input name="name" value="bob" />
  <input name="age" value="30" />
</form>

在带有原始JavaScript的控制台中显示表单名称=值对吗？

2 个答案: