如何使用 JavaScript 提交 HTML 表单?
在本教程中，我们将学习如何使用 JavaScript 提交 HTML 表单。要使用 JavaScript 提交 HTML 表单，我们将在 onsubmit 事件发生时调用 validate() 来验证数据。
我们将讨论提交 HTML 表单的直接方法以及检查所有字段是否为空的方法。这两种方法都列在下面 -
使用表单 submit() 方法
使用手动验证
让我们在与每种方法相关的代码示例中详细讨论这两种方法。
使用表单 submit() 方法
submit() 方法只需单击与表单关联的提交按钮即可提交表单。 submit 方法不接受任何参数也不返回任何值，它只是提交表单。
注意 − 我们可以使用 Form reset() 方法重新设置表单，所有字段均为空。
语法
以下语法将用于使用 Form submit() 方法提交表单 −
var selectedForm=document.getElementById("id");
selectedForm.submit();
在上述语法中，我们首先通过其id获取要提交的表单元素，然后使用submit()方法提交表单。
让我们借助代码示例了解提交方法的实际实现 -
算法
步骤 1 - 在第一步中，我们将定义带有一些必填输入字段和一个提交按钮的表单标签。
步骤 2 - 在此步骤中，我们将为提交按钮内使用的 onclick 事件定义一个回调函数，该函数通过单击按钮来提交表单，从而调用该函数。
步骤 3 - 在最后一步中，我们将编写上一步中声明的回调函数的主体，并在表单。
示例
下面的示例将说明如何使用 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 表单的两种方法。您可以使用其中任何一种方法来验证或提交表单。
