在 JavaScript 中提交表單

1. 建立 HTML 表單
2. 訪問表單
3. 在 JavaScript 中獲取表單欄位的值
4. 在 JavaScript 中驗證表單欄位的資料

本教程將介紹如何使用 JavaScript 提交表單。

表單有助於從使用者那裡獲取資料並將其儲存在結構化資料庫中。當我們使用各種應用程式和網站時，表單提交是關鍵事件。它不像呼叫 form.submit() 或單擊提交按鈕那樣簡單。提交表單後，將在將請求傳送到伺服器之前立即觸發 Submit 事件。這是 JavaScript 起作用並驗證輸入資料的地方。我們甚至可以建立物件並新增各種屬性。

因此，要提交表單，我們必須首先建立一個表單，訪問該表單，獲取各個欄位的值，驗證所有值，然後單擊提交按鈕/呼叫 for.submit()。

建立 HTML 表單

我們可以使用 <form> 元素建立 HTML 表單。

<form action="/" method="post" id="signup-form">
    <input type="text" name="Username" placeholder="Full Name">
    <input type="email" name="EmailAddress" placeholder="Email Address">
    <button type="submit">Submit</button>
</form>

上面的表格具有兩個屬性：action 和 method。

1. action：它指定將處理表單提交過程的 URL。
2. method*：它指定用於提交表單的 HTTP 方法。post 方法通過將資料傳送到請求正文中的伺服器來幫助將資料儲存在資料庫中。get 方法將表單資料附加到帶有 ? 的 URL 上。

訪問表單

我們可以使用任何一種 JavaScript 選擇器（例如 getElementByTag，getElementById 等）訪問表單元素。

let form = document.getElementById('signup-form');

在 JavaScript 中獲取表單欄位的值

我們可以使用表單元素陣列或引用欄位的 ID 來訪問表單中的輸入欄位。訪問該欄位後，可以使用 .values 屬性來獲取儲存在該欄位中的值。一旦我們獲取了表單資料，就可以在進行最終表單提交之前驗證資料。

// Syntax1:
let name = form.elements[0];
let username = name.value;
// Syntax2:
let name = form.elements['name'];
let username = name.value;

在 JavaScript 中驗證表單欄位的資料

我們將事件偵聽器新增到 submit 按鈕，並在進入下一頁之前呼叫驗證過程。例如：對於註冊頁面，使用者必須同時提供電子郵件和密碼。

// Function to check that the input field is not empty while submitting
function requireValue(input) {
  return !(input.value.trim() === '');
}
// Event listener to perform the validation when user clicks on submit button
form.addEventListener('submit', (event) => {
  requiredFields.forEach((input) => {
    valid = valid | requireValue(input.input);
  });
  if (!valid) {
    event.preventDefault();
  }
});

在上面的程式碼中，我們編寫了一個小的驗證檢查，以檢視輸入欄位是否為空。然後，我們在提交按鈕上附加了一個事件偵聽器，以首先處理資料，然後再將其傳遞給操作 URL。我們確保輸入欄位不為空，如果是的話，我們通過呼叫 event.preventDefault() 來阻止表單提交。這樣，JavaScript 和 HTML 可以處理完整的表單提交。