数据结构
网络
关系数据库管理系统 (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+ 次浏览
