javascript - 触发 onsubmit 而不使用提交按钮

标签 javascript forms validation submit onsubmit

我陷入困境,试图使用提交函数( formElement.submit() )提交我的表单。 好吧,实际上它确实将表单输入值发送到后端,但我试图阻止它并在两者之间添加 ajax。

Jade /哈巴狗

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() 也可以给程序提示表单已提交?

谢谢

最佳答案

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

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

否则该事件将在您设置监听器之前触发

编辑:看来我误读了你所问的内容。您正在寻找的答案是 submit() 不会触发监听器。您可以通过使用 click() 以编程方式单击按钮来模拟它。 Here is a good对这种行为的解释。尝试:

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

关于javascript - 触发 onsubmit 而不使用提交按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42402560/

相关文章:

javascript - ObjMap 返回值或函数

php - Laravel 5.2 - Authenticated User to Change Password - 更新后密码匹配问题

Dropwizard 中的 Java 复杂验证?

javascript - 检查输入值是否有 "."(点)(Javascript)

javascript - TokBox 错误 : OT. session : Cannot connect, session 已未定义

javascript - Jquery prop required 错误

html - Bootstrap 4 中单行的多个表单组

validation - 如果命名空间存在,则无法在 JAXB 中验证 XML 的特定部分

javascript - 为什么在这种情况下我不能过滤本地 json 文件 (vuejs2)

javascript - 必需 ||必需的 HTML5 表单