Javascript e.preventDefault();不处理提交()

Question

我在使用 javascript submit() 提交表单时遇到问题

现场直播 : https://jsfiddle.net/98sm3f3t/

HTML :

<form id="myForm" action="">
    First name: <input type="text" name="fname"><br>
    <button id="myButton" type="button">Submit form</button>
</form>

JS :

document.getElementById("myButton").addEventListener("click", function() {

    document.getElementById("myForm").submit();

});

document.getElementById("myForm").addEventListener("submit", function(e) {

    e.preventDefault();

    alert("cancel submitting");

});

它应该显示 alert()并取消提交。

我的代码有什么问题？

提前致谢...

Answer 1

使用 JavaScript 以编程方式提交表单不会触发提交事件。

如果您希望您的代码显示警报而不提交表单，请编写它以便仅显示警报。

document.getElementById("myButton").addEventListener("click", function() {
    alert("Your message");
});

或者，使用提交按钮来提交表单(而不是 JavaScript)。