資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
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+ 次瀏覽
