如何使用 JavaScript 攔截並阻止表單提交？

攔截表單提交以進行預防

在您的表單帶有無法修改的現有提交按鈕的情況下，阻止其提交可以透過JavaScript 來實現。

要捕獲提交事件並防止其發生，可以執行以下步驟已採取：

捕捉提交事件：

1. 找到表單元素：

   const form = document.querySelector('form');

2. 為「提交」表單新增事件偵聽器事件：

   form.addEventListener('submit', handleSubmit);

阻止提交：

在事件處理函數（本例為「handleSubmit」）中，您可以阻止提交操作通過：

1. 呼叫事件物件上的PreventDefault():

   const handleSubmit = (e) => {
     e.preventDefault();
   };

2. 此外，對於AJAX 表單提交，返回false 進一步阻止預設表單操作：

   function handleSubmit(e) {
     e.preventDefault();
     // Insert your custom logic here
     return false;
   };

注意： 如所提供的答案中突出顯示的，如果發生JavaScript錯誤在return false語句之前，表單仍然會被提交。為了解決這個問題，請考慮使用 try...catch 區塊來處理任何潛在的錯誤，並確保即使在這種情況下也不會提交表單。

以上是如何使用 JavaScript 攔截並阻止表單提交？的詳細內容。更多資訊請關注PHP中文網其他相關文章！