表單：事件和方法提交

當表單提交時，submit 事件會觸發，通常用於在將表單傳送至伺服器之前驗證表單，或中止提交並在 JavaScript 中處理表單。

方法 form.submit() 允許從 JavaScript 初始化表單傳送。我們可以使用它來動態建立並將我們自己的表單傳送至伺服器。

讓我們看看它們的更多詳細資訊。

事件：提交

有兩種主要方式可以提交表單

1. 第一種 – 按一下 <input type="submit"> 或 <input type="image">。
2. 第二種 – 在輸入欄位中按下 Enter。

兩個動作都會導致表單上的 submit 事件。處理函式可以檢查資料，如果出現錯誤，則顯示錯誤並呼叫 event.preventDefault()，這樣表單就不會傳送至伺服器。

在以下表單中

1. 進入文字欄位並按下 Enter。
2. 按一下 <input type="submit">。

兩個動作都會顯示 alert，而且表單不會傳送至任何地方，因為有 return false

<form onsubmit="alert('submit!');return false">
  First: Enter in the input field <input type="text" value="text"><br>
  Second: Click "submit": <input type="submit" value="Submit">
</form>

<form onsubmit="return false">
 <input type="text" size="30" value="Focus here and press enter">
 <input type="submit" value="Submit" onclick="alert('click')">
</form>

方法：submit

若要手動將表單傳送至伺服器，我們可以呼叫 form.submit()。

然後不會產生 submit 事件。假設如果程式設計師呼叫 form.submit()，則指令碼已經執行所有相關處理。

有時會用來手動建立並傳送表單，如下所示

let form = document.createElement('form');
form.action = 'https://google.com/search';
form.method = 'GET';

form.innerHTML = '<input name="q" value="test">';

// the form must be in the document to submit it
document.body.append(form);

form.submit();