Question

我的网站有一堆由两个字段组成的行（根据用户需要）。我希望用户填写所有字段，然后提交。但是，我相信这都可以在客户端处理，因为我想在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'
}

我需要一种方法来获取所有表单值（现在使用未编写的函数commit（））并将它们存储为变量。

Answer 1

您需要能够获取动态添加的输入元素的值。

首先，您需要以一种可以将它们分开的方式添加它们。因此，必须为每对提供唯一的父母。

document.getElementById("wrapper").innerHTML += '<div id="aparent"><br><span>Name: <input type="text" id="name"> Dex modifier:  <input type="text" id="dex"></span><div>\r\n'

现在，获取所有父元素并对其进行迭代以填充“名称”和“ dex-修饰符”对的数组。使用类似JQuery的库可以轻松进行DOM操作。这似乎是您的“提交”功能。

var userData = [];

//Iterate all the parents
$('#aprane').each(function() {

    //Get the values of each pair and put them in an array
    userData.push({name: $(this).children('#name').val(), dex: $(this).children('#dex').val()}

})

Answer 2

同时处理多个输入时，最好使用<form>元素。 form元素可以访问其内部的所有输入。这样，您不必选择每个单独的输入，而是可以一起选择和处理它们。

所以从表格包装开始。然后，不监听onclick上的<input type="button" value="submit" onclick="submit()">，而是监听form元素上的submit事件。

使用.addEventListener()方法来侦听事件被认为是最佳实践。这样，您可以将多个事件处理程序设置为单个事件，而无需覆盖元素的onclick或onsubmit属性。克里斯·贝克（Chris Baker）在this 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 documents中显示的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>

如何获得用户输入的HTML以在JS中处理？

2 个答案: