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

2022-03-31 00:00:00 validation forms javascript submit onsubmit

我在尝试使用提交函数(formElement.mit())提交表单时遇到了困难。 实际上,它确实会将表单输入值发送到后端,但我正在尝试阻止它,并在两者之间添加了AJAX。

玉/泥

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

一切都运行得很好,只是看起来.mit()并没有调用onSubmit。是否有任何解决方法(最好使用普通的js)来提示程序表单已提交,即使使用.mit()也是如此?

谢谢


解决方案

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

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

否则,事件将在您设置监听程序之前激发

编辑:我似乎误读了您的问题。您正在寻找的答案是submit()不会解雇监听器。您可以通过使用click()以编程方式单击按钮来模拟它。Here is a good对此行为的解释。尝试:

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

相关文章