我的网站有一堆由两个字段组成的行（与用户需要的一样多）。我希望用户填写所有字段，然后提交。但是，我相信这都可以在客户端处理，因为我想在 javascript 代码中使用字段值。
这是 html 代码：
<div class="players">
<div id="wrapper">
<span>Name: <input type="text"> Dex modifier: <input type="text"></span>
</div>
<input type="button" value="add player" onclick="add_fields()">
<input type="button" value="submit" onclick="submit()">
</div>
和我的 javascript 函数
function add_fields() {
document.getElementById("wrapper").innerHTML += '<br><span>Name: <input type="text"> Dex modifier: <input type="text"></span>\r\n'
}
我需要一种方法来获取所有表单值（现在使用未编写的函数 submit()）并将它们存储为变量。
<form>在同时处理多个输入时使用元素是一种很好的做法。的形式元件可以访问所有的它具有在其内部的输入。这样您就不必选择每个单独的输入，而是可以一起选择和处理它们。
所以从表单包装开始。然后，而不是侦听onclick上<input type="button" value="submit" onclick="submit()">，监听submit表单元素上的事件。
使用该.addEventListener()方法侦听事件被认为是最佳实践。通过这种方式，您可以将多个事件处理程序设置为单个事件，而无需覆盖元素的onclickoronsubmit属性。Chris Baker 在这篇 SO post 中做了出色的解释。
那么现在你有了一个表单，我们如何从中获取数据呢？您可以使用现代类FormData。FormData创建一个可迭代对象，这意味着我们可以使用for..of循环遍历它，它将输入的所有名称和值保存在一个表单中。它还具有从对象中添加、删除和获取键或值的方法。该FormData构造可以采用<form>单元作为像这样的说法：
var formElement = document.querySelector('form'); // Select the form.
var formData = new FormData(form); // Pass the form into the FormData class.
现在formData变量保存了表单的所有名称和值。
我添加了一个工作示例供您试用。请阅读我提供给您的文档，以了解正在发生的事情以及您可以用它做什么。
快速旁注：FormData和for..of循环相对较新，在IE浏览器不支持。如果这是一个交易破坏者，我建议您不要使用FormData构造函数，而是简单地遍历表单中的元素。
编辑：我改变循环从formData.values()以formData获得无论是name和value每个输入的属性。这与MDN 文档中formData.entries()显示的相同。
// Create storage for the values.
var values = [];
// Get the form element.
var form = document.getElementById('form');
// Add the submit event listener to the form.
form.addEventListener('submit', submit);
function submit(event) {
// Get the data from the form.
// event.target represents the form that is being submitted.
var formData = new FormData(event.target);
// Loop over each pair (name and value) in the form and add it to the values array.
for (var pair of formData) {
values.push(pair);
}
// Log the values to see the result.
console.log(values);
// Prevent the form from default submitting.
event.preventDefault();
}<div class="players">
<!-- Wrap a form around the inputs -->
<form id="form">
<div id="wrapper">
<span>Name: <input type="text" name="name"> Dex modifier: <input type="text" name="dex"></span>
</div>
<input type="button" value="add player" onclick="add_fields()">
<!-- Notice type="submit" instead of type="button". This is important -->
<input type="submit" value="submit">
</form>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句