防止表單提交 JavaScript

1. 使用 script 標籤內的函式來停止 JavaScript 中表單的執行
2. 在 JavaScript 中使用 Vanilla JavaScript 停止表單的執行
3. 在 JavaScript 中使用 jQuery 庫停止表單的執行
4. 在 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();
});