如何避免表單提交？

Question

我有一個表單，在其中的某個地方有一個提交按鈕。

然而，我想以某種方式「捕捉」提交事件並阻止其發生。

有沒有辦法可以做到這一點？

我無法修改提交按鈕，因為它是自訂控制項的一部分。

Answer 1

您可以像這樣使用內聯事件onsubmit

#

<form onsubmit="alert('停止提交'); return false;">

或

<script>
   function toSubmit(){
      alert('我不会提交');
      return false;
   }
</script>

<form onsubmit="return toSubmit();">

範例

現在，在開發大型專案時，這可能不是一個好主意。您可能需要使用事件監聽器。

請在這裡閱讀更多關於內聯事件 vs 事件監聽器（addEventListener和IE的attachEvent）的更多資訊。因為我無法比Chris Baker解釋得更好。

Answer 2

與其他答案不同，返回false只是答案的部分。考慮在回傳語句之前發生JS錯誤的情況...

html

<form onsubmit="return mySubmitFunction(event)">
  ...
</form>

script

function mySubmitFunction()
{
  someBug()
  return false;
}

在這裡返回false不會被執行，表單將以任何方式提交。您還應該呼叫preventDefault來阻止Ajax表單提交的預設操作。

function mySubmitFunction(e) {
  e.preventDefault();
  someBug();
  return false;
}

在這種情況下，即使有錯誤，表單也不會被提交！

或者，可以使用try...catch區塊。

function mySubmit(e) { 
  e.preventDefault(); 
  try {
   someBug();
  } catch (e) {
   throw new Error(e.message);
  }
  return false;
}