Question

我用香草js替换了一些jquery代码，但表单提交事件侦听器遇到了麻烦

<!-- html -->
<form name="myForm">
   <input type="text" name="name" />
   <button type="button">Click me</button>
</form>

/* jquery code that works */
$myForm = $("form[name=myForm]")
$("form button").on("click", function(e){
   $myForm.submit()
})

$myForm.on("submit", function(e){
  e.preventDefault()
  console.log("Submitting form")  
})

/* vanilla js replacement */
myForm = document.querySelector("form[name=myForm]")
myForm.querySelector("button").addEventListener('click', function(){
   myForm.submit()
})

myForm.addEventListener('submit',function(e){
  e.preventDefault()
  console.log("Submitting form")
})

在普通js中，以编程方式提交表单时似乎未触发表单提交事件侦听器。我该如何解决？

Answer 1

在HTMLFormElement上使用.submit()方法时，不会触发表单的提交事件侦听器：

当用户单击“提交”按钮（或<input type="submit">），或在编辑字段时按 Enter （例如 <input type="text">）。该事件不会在以下情况下发送到表单直接调用form.submit()方法。

-MDN

您可以改用.requestSubmit()方法，该方法会触发表单的onsubmit事件处理程序并在表单上执行constraint validation：

/* vanilla js replacement */
myForm = document.querySelector("form[name=myForm]")
myForm.querySelector("button").addEventListener('click', function() {
  myForm.requestSubmit();
})

myForm.addEventListener('submit', function(e) {
  e.preventDefault()
  console.log("Submitting form");
})

<form name="myForm">
  <input type="text" name="name" />
  <button type="button">Click me</button>
</form>

此方法的主要缺点是，与jQuery的.submit()方法不同，requestSubmit（）的浏览器支持较弱。

如何获取表单提交事件侦听器以在JS中工作？

1 个答案: