Javascript e.preventDefault（）;不工作的提交（）

我用JavaScript submit()Javascript e.preventDefault（）;不工作的提交（）

真人提交表單時，有一個問題：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()並取消提交。

我的代碼有什麼問題？

在此先感謝...

來源

2016-06-08 Ching Ching

http://stackoverflow.com/questions/645555/should-jquerys-form-submit-not-trigger-onsubmit-within-the -form-tag – epascarello

如果你的意圖是手動提交表單，那麼你不需要''表單'上的處理程序。只需使用必要的代碼創建一個函數，然後在''button''的處理程序中準備就緒時調用它。 – 2016-06-08 14:32:57

使用JavaScript以編程方式提交表單不會觸發提交事件。

如果您希望代碼顯示警報而不提交表單，請將其寫入，以便它只顯示警報。

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

或者，使用提交按鈕以提交表格（代替的JavaScript）。

來源

2016-06-08 14:21:04 Quentin

修復您的問題是使用submit類型的輸入：

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

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

對於這個工作，你必須刪除click事件偵聽這是submiting表單。聽表格提交併致電preventDefault()已足以阻止表單提交。

來源

2016-06-08 14:21:14

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

變化

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

到

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

來源

2016-06-08 14:21:15

這不起作用。點擊提交按鈕會觸發點擊事件並正常提交表單。正常提交被取消並觸發警報。程序提交**仍提交表格**。 – Quentin

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

使用button type="submit".

它會提醒

jsfiddle

來源

2016-06-08 14:21:33 brk

這不起作用（即使在您的現場演示中）。點擊提交按鈕會觸發點擊事件並正常提交表單。正常提交被取消並觸發警報。程序提交**仍提交表格**。 – Quentin

Javascript e.preventDefault（）;不工作的提交（）

回答

相關問題