資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 JavaScript 提交 HTML 表單？
在本教程中，我們將學習如何使用JavaScript提交 HTML 表單。要使用 JavaScript 提交 HTML 表單，我們在發生 onsubmit 事件時呼叫validate()來驗證資料。
我們將討論直接提交 HTML 表單的方法以及檢查表單中任何欄位是否為空的方法。這兩種方法都列在下面 -
使用表單submit()方法
使用手動驗證
讓我們在與每個方法相關的程式碼示例中詳細討論這兩種方法。
使用表單submit()方法
submit()方法只需點選與表單關聯的提交按鈕即可提交表單。submit 方法既不接受任何引數也不返回值，它只是提交表單。
注意− 我們可以使用表單reset()方法重置表單，使所有欄位為空。
語法
以下語法將用於使用表單 submit() 方法提交表單 -
var selectedForm=document.getElementById("id");
selectedForm.submit();
在上面的語法中，我們首先透過其id獲取要提交的表單元素，然後使用submit()方法提交表單。
讓我們藉助程式碼示例瞭解 submit 方法的實際實現 -
演算法
步驟 1 - 在第一步中，我們將定義表單標籤，其中包含一些所需的輸入欄位和提交按鈕。
步驟 2 - 在此步驟中，我們將為提交按鈕內使用的 onclick 事件定義回撥函式，該函式透過單擊按鈕來呼叫函式以提交表單。
步驟 3 - 在最後一步中，我們將編寫上一步中宣告的回撥函式的主體，並在表單上使用 submit() 方法。
示例
以下示例將說明使用submit()方法提交 HTML 表單 -
<!DOCTYPE html>
<html>
<body>
<h2>How to submit an HTML form using JavaScript?</h2>
<p id="result"></p>
<form id="myForm">
<label>Username:</label>
<input type="text" id="inp1" name="username"><br>
<label>Password: </label>
<input type="password" id="inp2" name="password"><br><br>
<button type="submit" onclick="submitForm(event)">Submit</button>
</form>
<script>
var myForm = document.getElementById("myForm");
var result = document.getElementById("result");
function submitForm(event) {
event.preventDefault();
myForm.submit();
result.innerHTML = "<b>The button is pressed and form is submitted.</b>"
}
</script>
</body>
</html>
在上面的示例中，我們使用event.preventDefault()方法來防止表單重新整理，但表單仍然在單擊提交按鈕時重新整理，這意味著表單在每次單擊時都會提交，並且每次都會重新整理。
使用驗證方法
我們可以使用驗證方法來提交表單。在此方法中，我們首先在函式中手動分配條件，以檢查表單中的所有輸入欄位是否都已填寫。如果任何輸入欄位為空，它將返回錯誤訊息並聚焦導致錯誤的空欄位。否則，它將返回 true 到表單中的onsubmit事件，這意味著應提交表單。
讓我們藉助程式碼示例瞭解此提交表單的方法 -
演算法
步驟 1 - 在第一步中，我們將在 HTML 文件內定義一個表單標籤，稍後我們將提交該標籤。
步驟 2 - 在下一步中，我們將向表單標籤提供所有必要的和必需的輸入欄位。
步驟 3 - 在此步驟中，我們將定義一個返回布林值的 JavaScript 回撥函式，並將其作為表單的 onsubmit 事件的值。
步驟 4 - 在最後一步中，我們將編寫 JavaScript 函式的主體，該函式將驗證表單，並且僅在表單透過所有驗證時才提交表單。否則，它將顯示錯誤。
示例
以下示例將解釋驗證和驗證方法以提交表單 -
<!DOCTYPE html>
<html>
<body>
<form action="/cgi-bin/test.cgi" name="myForm" onsubmit="return(validate());">
<table cellspacing="2" cellpadding="2" border="1">
<tr>
<td align="right">Name</td>
<td><input type="text" name="Name" /></td>
</tr>
<tr>
<td align="right">EMail</td>
<td><input type="email" name="EMail" /></td>
</tr>
<tr>
<td align="right">Zip Code</td>
<td><input type="text" name="Zip" /></td>
</tr>
<tr>
<td align="right">Country</td>
<td>
<select name="Country">
<option value="-1" selected>[choose yours]</option>
<option value="1">Canada</option>
<option value="2">Sri Lanka</option>
<option value="3">Mexico</option>
</select>
</td>
</tr>
<tr>
<td align="right"></td>
<td><input type="submit" value="Submit" /></td>
</tr>
</table>
</form>
<script>
function validate() {
if (document.myForm.Name.value == "") {
alert("Please provide your name!");
document.myForm.Name.focus();
return false;
}
if (document.myForm.EMail.value == "") {
alert("Please provide your Email!");
document.myForm.EMail.focus();
return false;
}
if (document.myForm.Zip.value == "" ||
isNaN(document.myForm.Zip.value) ||
document.myForm.Zip.value.length != 5) {
alert("Please provide a zip in the format #####.");
document.myForm.Zip.focus();
return false;
}
if (document.myForm.Country.value == "-1") {
alert("Please provide your country!");
return false;
}
return (true);
}
</script>
</body>
</html>
在上面的示例中，我們使用了驗證來驗證表單中的所有輸入欄位。如果任何輸入欄位沒有遵循以特定方式填寫它的說明或為空（內部沒有寫入任何文字），則螢幕上將出現一個提示框，顯示錯誤。更正錯誤後，如果您單擊提交按鈕，它將向 onsubmit 事件傳送 true，並且表單將被提交。
在本教程中，我們討論了提交 HTML 表單的兩種方法。您可以使用任何一種方法來驗證或提交表單。
17K+ 瀏覽量
