如何使用JavaScript提交表單

在網路開發中，表單是常見的元素，允許使用者向Web伺服器提交資料。當使用者在表單中輸入資料並點擊提交按鈕時，表單會向伺服器發送請求，伺服器對請求進行處理並回應結果。在這個過程中，JavaScript可以用來監聽表單的提交事件，以便在不刷新頁面的情況下對表單資料進行處理和驗證。在本文中，我們將介紹如何使用JavaScript提交表單。

一、表單控制項

在使用JavaScript提交表單之前，我們首先需要了解一些關於HTML表單控制項的知識。表單控制項包括輸入方塊、下拉方塊、單選方塊、複選框等等。在HTML中，這些控制項都以d5fd7aea971a85678ba271703566ebfd標籤定義，每個標籤都有一個type屬性用來表示它的型別。例如，用來輸入文字的輸入框可以使用23efcc05e98690ceeb219581933e4231標籤，用來提交表單的按鈕可以使用54b28e0e73a12e4a8ed487872a6fb5b8標籤。以下是一些常用的表單控制項及其類型：

1.文字方塊

b97cf5df8b28e4a76caaaadaf8e76d05

2.密碼框

941744aa44fdd721c0b67eb5ad94b319

3.複選框

ab268299b5e7674ec0bc5b840c827437游泳

4.單選框

cb136f4facccb7e48fa76e34d3c08152男

5.下拉框

27635b6fcc057cb18cd9e06a4cbf5a69
1ce0228a93b5a6b254ce1df3c39bf506北京4afa15d3069109ac30911f04c56f3338
aa0a9f38537fae184d8689c927ff3b02上海4afa15d3069109ac30911f04c56f3338
df9b1a06c7c7872194b28a87d3374989廣州4afa15d3069109ac30911f04c56f3338
18bb6ffaf0152bbe49cd8a3620346341

二、監聽表單提交事件

要在JavaScript中處理表單數據，我們需要先監聽表單的提交事件。在HTML中，表單的提交事件是由ff9c23ada1bcecdd1a0fb5d5a0f18437標籤定義的，可以使用JavaScript的addEventListener()方法來監聽它。例如，以下程式碼將監聽提交按鈕被點擊時的事件：

var btnSubmit = document.getElementById("btnSubmit");
btnSubmit.addEventListener("click", function(event) {
//處理表單資料
event.preventDefault(); //禁止預設提交行為
});

在這個範例中，我們先透過getElementById()方法取得提交按鈕的元素，並呼叫addEventListener()方法來監聽它的點擊事件。在事件處理函數中，我們可以取得表單資料並進行處理。最後，為了防止表單預設提交行為的發生，我們呼叫event.preventDefault()方法來取消它。

三、取得表單資料

在監聽了表單的提交事件後，我們需要取得表單資料以便進行處理。在JavaScript中，可以使用document.forms[]集合來取得表單元素。例如，以下程式碼將取得表示使用者名稱和密碼的輸入框元素：

var txtUsername = document.forms[0].username;
var txtPassword = document.forms[0].password;

在這個範例中，我們使用document.forms[0]來取得第一個ff9c23ada1bcecdd1a0fb5d5a0f18437標籤的表單元素，然後透過name屬性取得使用者名稱和密碼輸入框的元素。

取得表單資料的另一種方法是使用FormData物件。 FormData是一個新的API，可以用來建立表單資料並將其傳送到伺服器。例如，以下程式碼將使用FormData物件傳遞使用者資訊：

var formData = new FormData();
formData.append("username", txtUsername.value);
formData.append(" password", txtPassword.value);

在這個範例中，我們先建立一個新的FormData對象，然後使用append()方法將表單資料加入到FormData對象。最後，將FormData物件傳遞給XMLHttpRequest物件的send()方法即可將表單資料傳送至伺服器。

四、驗證表單資料

在提交表單之前，我們需要先對表單資料進行驗證。例如，我們可以檢查使用者名稱和密碼是否為空：

if(txtUsername.value == "") {
alert("請輸入使用者名稱");
txtUsername.focus() ;
return false; //取消提交
} else if(txtPassword.value == "") {
alert("請輸入密碼");
txtPassword.focus();
return false; //取消提交
} else {
//提交表單
return true;
}

在這個範例中，我們先檢查使用者名稱輸入框是否為空，如果為空則彈出提示框並將遊標移至使用者名稱輸入框。如果使用者名稱不為空，我們繼續檢查密碼輸入框是否為空。如果密碼不為空，我們允許表單提交。

五、完整的JavaScript程式碼範例

現在，我們已經了解如何使用JavaScript提交表單。以下是一個完整的JavaScript程式碼範例，它將監聽表單的提交事件、取得表單資料、驗證資料並將其傳送到伺服器：

var frmLogin = document.getElementById("frmLogin");
frmLogin.addEventListener("submit", function(event) {
var txtUsername = document.forms[0].username;
var txtPassword = document.forms[0].password;

if(txtUsername.value == "") {

alert("请输入用户名");
txtUsername.focus();
event.preventDefault();

} else if(txtPassword.value == "") {

alert("请输入密码");
txtPassword.focus();
event.preventDefault();

} else {

var formData = new FormData();
formData.append("username", txtUsername.value);
formData.append("password", txtPassword.value);

var xhr = new XMLHttpRequest();
xhr.open("POST", "login.php", true);
xhr.onload = function() {
  if(xhr.status == 200) {
    alert(xhr.responseText);
  } else {
    alert("请求失败：" + xhr.status);
  }
};
xhr.send(formData);

event.preventDefault();

}
});

在這個範例中，我們先透過getElementById()方法取得表示登入表單的元素，並且呼叫addEventListener ()方法來監聽它的提交事件。在事件處理函數中，我們取得使用者名稱和密碼的輸入框元素，並進行判斷，如果不符合要求則會彈出提示方塊並取消表單的預設提交行為。如果使用者名稱和密碼都不為空，則建立一個FormData對象，並將資料新增至其中。最後，使用XMLHttpRequest物件將FormData物件傳送到伺服器，並將回應結果顯示在提示方塊中。

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