在web开发中，表单是一种常见的元素，允许用户向web服务器提交数据。当用户在表单中输入数据并点击提交按钮时，表单会向服务器发送请求，服务器对请求进行处理并响应结果。在这个过程中，javascript可以用来监听表单的提交事件，以便在不刷新页面的情况下对表单数据进行处理和验证。在本文中，我们将介绍如何使用javascript提交表单。
一、表单控件
在使用javascript提交表单之前，我们首先需要了解一些关于html表单控件的知识。表单控件包括输入框、下拉框、单选框、复选框等等。在html中，这些控件都用d5fd7aea971a85678ba271703566ebfd标签定义，每个标签都有一个type属性用来表示它的类型。例如，用来输入文本的输入框可以使用e67338802192d7bd5294b2aa965c9bc5标签，用来提交表单的按钮可以使用b374d97eedc1ba0e17e06a9fd6f01874标签。下面是一些常用的表单控件及其类型：
1.文本框
1de1b62aa68ee587b084f40b9d51e5a5
2.密码框
06d8877249563ab35308b0405d632f32
3.复选框
79be49a343b0216c26772eb0f6d4181a游泳
4.单选框
f5f426088e3526416fa0015b84c2f7ea男
5.下拉框
2afe5f97e3410172ef9e8d73db31130e
983096952e853cb304a7017ad1519622北京4afa15d3069109ac30911f04c56f3338
65ae164243b7b3c8080987021d95fc65上海4afa15d3069109ac30911f04c56f3338
4f268119e575f88a8851f3a0da094a97广州4afa15d3069109ac30911f04c56f3338
18bb6ffaf0152bbe49cd8a3620346341
二、监听表单提交事件
要在javascript中处理表单数据，我们需要先监听表单的提交事件。在html中，表单的提交事件是由ff9c23ada1bcecdd1a0fb5d5a0f18437标签定义的，可以使用javascript的addeventlistener()方法来监听它。例如，以下代码将监听提交按钮被点击时的事件：
var btnsubmit = document.getelementbyid(btnsubmit);
btnsubmit.addeventlistener(click, function(event) {
//处理表单数据
event.preventdefault(); //禁止默认提交行为
});
在这个例子中，我们先通过getelementbyid()方法获取提交按钮的元素，并调用addeventlistener()方法来监听它的点击事件。在事件处理函数中，我们可以获取表单数据并进行处理。最后，为了防止表单默认提交行为的发生，我们调用event.preventdefault()方法来取消它。
三、获取表单数据
在监听了表单的提交事件后，我们需要获取表单数据以便进行处理。在javascript中，可以使用document.forms[]集合来获取表单元素。例如，以下代码将获取表示用户名和密码的输入框元素：
var txtusername = document.forms[0].username;
var txtpassword = document.forms[0].password;
在这个例子中，我们使用document.forms[0]来获取第一个ff9c23ada1bcecdd1a0fb5d5a0f18437标签的表单元素，然后通过name属性获取用户名和密码输入框的元素。
获取表单数据的另一种方法是使用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对象发送到服务器，并将响应结果显示在提示框中。
以上就是如何使用javascript提交表单的详细内容。