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)允许我直接处理表单的输入。因此，我可以简单地处理document.getElementsByName('myForm')参数，而不是使用this。但console.log(thisForm)告诉我formThis === window。也就是说，this为我提供了窗口对象。

问题：如何将this绑定到表单 - 也就是说，如何使this参数表示表单或成为对象每个输入都有键作为键？这可能不使用document.get... || document.querySelector...？

<小时/> 相关SO问题：How do I get the value of text input field using JavaScript?，Passing HTML input value as a JavaScript Function Parameter

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);

请注意我已在表单中添加了一个ID my-form，以便在页面上轻松选择。

Answer 2

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

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

将表单输入传递给JavaScript函数

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

2 个答案: