在没有提交按钮的情况下触发提交

Question

我卡住了，正在尝试使用提交功能 ( formElement.submit() ) 提交我的表单。好吧，实际上它确实将表单输入值发送到后端，但我试图阻止它并在两者之间添加 ajax。

Jade/pug

form#score-form(method="POST" action="/leaderboard")
    input#submit-score(type="hidden" value="" name="submitscore")
    //value is fetched from JS

JS

scoreForm.submit();
scoreForm.addEventListener('submit', function(){
    //Nothing here will be invoked
});

但是，当使用提交按钮时，它会按预期工作

form#score-form(method="POST" action="/leaderboard")
    input#submit-score(type="hidden" value="" name="submitscore")
    button(type="submit")

scoreForm.submit();
scoreForm.addEventListener('submit', function(){
    console.log("works"); //logs works
});

一切正常，除了 .submit() 似乎没有调用 onsubmit。是否有任何解决方法（最好使用 vanilla js）来提示程序表单已提交，即使使用 .submit() 也是如此？

谢谢

Answer 1

您需要在实际提交之前添加监听器：

scoreForm.addEventListener('submit', function(){
    console.log("works"); //logs works
});
scoreForm.submit();

否则事件会在您设置侦听器之前触发

编辑： 看来我误读了你的问题。您正在寻找的答案是 submit() 不会触发侦听器。您可以通过编程方式单击带有 click() 的按钮来模拟它。 Here is a good 对此行为的解释。尝试：

scoreForm.querySelector('input[type="submit"]').click()

在没有提交按钮的情况下触发提交

trigger onsubmit without submit-button

javascript

forms

validation

submit

onsubmit