将表单输入传递给 JavaScript 函数

Question

TL;DR：有没有办法将 HTML 表单作为对象提交给 JavaScript 函数？

以这样的形式：

<form action="javascript:myFunction(this);" name="myForm">
<label>First: <input type="text" name="first"></label>
<label>Second: <input type="text" name="second"></label>
<input type="submit" value="Submit this to Javascript!">
</form>

我想将表单输入的值传递给 JavaScript 函数myFunction ，而不是将它们发送到其他带有action页面（如此处的这一行： action="sendToPHPPage.php" ）。

到目前为止，我最好的尝试是从表单中获取所有元素，如下所示：

function myFunction(formThis) {
  let form = document.getElementsByName('myForm')[0];
  inputs = form.getElementsByTagName('input');
  for (let x of inputs) //do something with x.value

  console.log(formThis);
}

我想要的东西，虽然是使this在myFunction(this) ，让我对形式的直接投入工作。 因此，我可以简单地处理this参数，而不是使用document.getElementsByName('myForm') 。 但是console.log(thisForm)告诉我formThis === window 。 也就是说， this让我得到了 window 对象。

问题：我怎样才能让this绑定到表单——也就是说，我怎样才能让this参数代表表单或成为一个以每个输入作为键的对象？ 这是否可能不使用document.get... || document.querySelector... document.get... || document.querySelector... ？

---

相关 SO 问题： 如何使用 JavaScript 获取文本输入字段的值？ , 将HTML 输入值作为 JavaScript 函数参数传递

Answer 1

您应该尝试使用您希望在提交表单时调用的回调将事件侦听器绑定到表单，您的代码将如下所示

function myFunction(event) {
  event.preventDefault(); // prevents the form from reloading the page
  const form = event.currentTarget;
  // your logic goes here
}

document.getElementById('my-form').addEventListener('submit', myFunction);

请注意，我在my-form添加了一个 id my-form以便更容易在页面上进行选择。

Answer 2

<form class="contact_form" onsubmit="return sendForm()">

---

const sendForm = () => {
      event.preventDefault();
      console.log(event.target.elements[***])
    }