如何使用JavaScript提交表单

var btnSubmit = document.getElementById("btnSubmit");
btnSubmit.addEventListener("click", function(event) {
//处理表单数据
event.preventDefault(); //禁止默认提交行为
});

在这个例子中，我们先通过getElementById()方法获取提交按钮的元素，并调用addEventListener()方法来监听它的点击事件。在事件处理函数中，我们可以获取表单数据并进行处理。最后，为了防止表单默认提交行为的发生，我们调用event.preventDefault()方法来取消它。

三、获取表单数据

在监听了表单的提交事件后，我们需要获取表单数据以便进行处理。在JavaScript中，可以使用document.forms[]集合来获取表单元素。例如，以下代码将获取表示用户名和密码的输入框元素：

Shopxp网上购物系统

Shopxp购物系统历经多年的考验，并在推出shopxp免费购物系统下载之后，收到用户反馈的各种安全、漏洞、BUG、使用问题进行多次修补，已经从成熟迈向经典，再好的系统也会有问题，在完善的系统也从在安全漏洞，该系统完全开源可编辑，当您下载这套商城系统之后，可以结合自身的技术情况，进行开发完善，当然您如果有更好的建议可从官方网站提交给我们。Shopxp网上购物系统完整可用，无任何收费项目。该系统经过

下载

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

在这个例子中，我们使用document.forms[0]来获取第一个

获取表单数据的另一种方法是使用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对象发送到服务器，并将响应结果显示在提示框中。