javascript - 通过字符串访问 JavaScript 中的事件数据以指定要捕获的输入表单

Question

我目前正在为允许用户创建自定义表单的应用程序创建一个功能。这很好，但我的问题在于在提交表单后捕获信息。

为了这个问题，假设我有一个输入名称数组(作为字符串)。

['firstName', 'lastName', 'emailAddress']

提交后，我需要遍历数组并使用字符串来确定要从中获取值的目标元素。

e.target.'array string'.value;

我该怎么做？

Answer 1

表单有一个 elements collection这是一个HTMLFormControlsCollection由 name 键控。所以假设 e.target 是表单(例如，这是一个 submit 事件)；

e.target.elements[someVariable].value;

实例:

document.querySelector("form").addEventListener("submit", function(e) {
  e.preventDefault();
  var elements = e.target.elements;
  ['firstName', 'lastName', 'emailAddress'].forEach(function(name) {
    console.log(name + ": " + elements[name].value);
  });
});

<form>
  <input type="text" name="firstName" value="The first name">
  <input type="text" name="lastName" value="The last name">
  <input type="email" name="emailAddress" value="email@example.com">
  <br>
  <input type="submit" value="Submit">
</form>

或者，更通用的解决方案是querySelector:

e.target.querySelector('[name="' + someVariable + '"]').value;

实例:

document.querySelector("form").addEventListener("submit", function(e) {
  e.preventDefault();
  var form = e.target;
  ['firstName', 'lastName', 'emailAddress'].forEach(function(name) {
    console.log(name + ": " + form.querySelector('[name="' + name + '"]').value);
  });
});

<form>
  <input type="text" name="firstName" value="The first name">
  <input type="text" name="lastName" value="The last name">
  <input type="email" name="emailAddress" value="email@example.com">
  <br>
  <input type="submit" value="Submit">
</form>