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>

记者：

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）。

Answer 2

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

Answer 3

修复你的问题是使用submit类型的输入：

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

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

为此，您必须删除提交表单的click事件侦听器。 听取表单提交并调用preventDefault()是为了防止表单被提交。

Answer 4

更改

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

至

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

Answer 5

我刚刚过来，找到了正确的答案。

要在 JavaScript 中以编程方式触发事件，您可以执行以下操作。

创建一个冒泡且无法取消的提交事件

const form = document.getElementById('pform');

const evt = new Event("submit", {"bubbles":true, "cancelable":false});
// event can be dispatched from any element, not only the document
form.dispatchEvent(evt);

https://developer.mozilla.org/en-US/docs/Web/API/Event/Event

Answer 6

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

使用button type="submit".

它会警觉

的jsfiddle