防止表單提交 JavaScript
Kushank Singh
2023年1月30日
2021年7月4日
-
使用
script
標籤內的函式來停止 JavaScript 中表單的執行 - 在 JavaScript 中使用 Vanilla JavaScript 停止表單的執行
-
在 JavaScript 中使用
jQuery
庫停止表單的執行 - 在 JavaScript 中使用 Dojo Toolkit 停止表單的執行
所有網路瀏覽器都支援 JavaScript,用於製作動態網頁。在本教程中,我們將停止使用 JavaScript 執行表單。
使用 script
標籤內的函式來停止 JavaScript 中表單的執行
script
標籤用於包含客戶端指令碼。我們在 script
標籤中建立了一個 JavaScript 函式來防止提交表單。
參考下面的程式碼。
<form onsubmit="submitForm(event)">
<input type="text">
<button type="submit">Submit</button>
</form>
<script type="text/JavaScript">
function submitForm(event){
event.preventDefault();
window.history.back();
}
</script>
preventDefault()
函式不會讓事件的預設操作發生。window.history.back()
將我們帶到歷史記錄中的上一個 URL。討論的所有方法都將包括這兩個功能。
在 JavaScript 中使用 Vanilla JavaScript 停止表單的執行
Vanilla JavaScript 純粹在 JavaScript 上工作,不使用任何額外的庫。
事件偵聽器可用於防止表單提交。它被新增到提交按鈕,該按鈕將執行該功能並在單擊時阻止表單提交。
例如,
element.addEventListener("submit", function(event) {
event.preventDefault();
window.history.back();
}, true);
在 JavaScript 中使用 jQuery
庫停止表單的執行
jQuery
是一個快速而強大的庫,可以簡化 JavaScript 的使用。它是最流行的 JavaScript 庫之一。
我們將看到我們如何才能阻止表單的提交。
參考下面的程式碼。
$('#form').submit(function(event) {
event.preventDefault();
window.history.back();
});
$('#form').submit()
函式用於在 jQuery 中提交表單。
在 JavaScript 中使用 Dojo Toolkit 停止表單的執行
它是一個 JavaScript 庫,有助於簡化 JavaScript 在基於 Web 的應用程式中的跨平臺使用。它使用 dojo.connect()
函式來處理事件。在我們的例子中,這用於表單提交,我們將使用 preventDefault()
和 window.history.back()
函式來防止這種情況。
例如,
dojo.connect(form, "submit", function(event) {
event.preventDefault();
window.history.back();
});