Javascript e.preventDefault();不处理提交（）答案

【问题标题】：Javascript e.preventDefault(); not working on submit()Javascript e.preventDefault();不处理提交（）
【发布时间】：2021-10-12 04:15:52
【问题描述】：

我在使用 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()并取消提交。

我的代码有什么问题？

提前谢谢...

【问题讨论】：

stackoverflow.com/questions/645555/…
如果您的意图是手动提交表单，那么您不需要form 上的处理程序。只需使用必要的代码创建一个函数，并在您准备好在 button 上的处理程序中调用它。

标签： javascript

【解决方案1】：

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

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

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

或者，使用 submit 按钮提交表单（而不是 JavaScript）。

【讨论】：

【解决方案2】：

解决您的问题是使用submit 类型的输入：

<button id="myButton" type="submit">

https://jsfiddle.net/joherro3/98sm3f3t/4/

为此，您必须删除正在提交表单的单击事件侦听器。收听表单提交并调用preventDefault() 足以阻止表单提交。

【讨论】：

是的！抱歉@Quentin 我在答案中添加了信息。

【解决方案3】：

现在有一个requestSubmit() 方法来提交表单，就像点击了提交按钮一样（例如，它将运行 onSubmit 处理程序）。见https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/requestSubmit

【讨论】：

【解决方案4】：

改变

<button id="myButton" type="button">Submit form</button>

到

<button id="myButton" type="submit">Submit form</button>

【讨论】：

这不起作用。点击提交按钮触发点击事件，正常提交表单。正常提交被取消并触发警报。程序化提交仍然提交表单。

【解决方案5】：

您正在使用button type ="button"。

使用button type="submit".

它会提醒

jsfiddle

【讨论】：

这不起作用（即使在您的现场演示中）。点击提交按钮触发点击事件，正常提交表单。正常提交被取消并触发警报。程序化提交仍然提交表单。