通过字符串访问JavaScript中的事件数据，以决定捕获哪些输入表单。

Question

我目前正在为一款应用程序创建一个功能，允许用户创建自定义表单。这部分渲染看起来不错，但我的问题在于提交表单后如何捕获信息。

为了解决这个问题，假设我有一个输入名称数组（字符串形式）。

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

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

e.target.'array string'.value;

我应该怎么做？

- Aero

---

e.target жҳҜ form еҗ—пјҹfirstName жҳҜе…ғзҙ зҡ„ name еұһжҖ§еҗ—пјҹдҪ иғҪеңЁй—®йўҳдёӯеҢ…еҗ« html еҗ—пјҹиҝҷдәӣеҖјеңЁ form жҸҗдәӨж—¶еҪ“еүҚдёҚеҸҜи®ҝй—®гҖӮ - guest271314

是的，e.target 是表单，'firstName' 是名称值。 - Aero

Answer 1

表单拥有一个元素集合，它是由name键控的HTMLFormControlsCollection。因此假设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="[e-mail]">
  <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="[e-mail]">
  <br>
  <input type="submit" value="Submit">
</form>

- T.J. Crowder

---

谢谢您，这正是我寻找的东西。 - Aero