form 表单提交 4 种方式
1、使用submit按钮提交表单
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>form表单提交方式</title>
</head>
<body>
<form action="demo_form.asp" method="post">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="提交">
</form>
<script>
/*这里是提交表单前的非空校验*/
$("form").submit(function () {
var first = $("input[name='firstname']").val();
var last = $("input[name='lastname']").val();
if (first == "" || first == null || first == undefined) {
alert("first");
return false;/*阻止表单提交*/
} else if (last == "" || last == null || last == undefined) {
alert("last");
return false;/*阻止表单提交*/
} else {
alert("提交");
return true;
}
})
</script>
</body>
</html>2、2.使用button按钮提交表单
（1）可以直接将 上述方法1中的直接换成
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>form表单提交方式</title>
</head>
<body>
<form id="Form" action="" method="post" >
<!--直接提交-->
<input type="text" name="dingdanhao"><input id="chaxun" type="submit" value="查询"><br>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname"><br><br>
<input id="tj" type="button" value="提交" onclick="checkForm();">
</form>
<script src="jquery.js"></script>
<script>
/*这里是提交表单前的非空校验*/
function checkForm () {
var first = $("input[name='firstname']").val();
var last = $("input[name='lastname']").val();
if (first == "" || first == null || first == undefined) {
alert("first");
return false;/*阻止表单提交*/
} else if (last == "" || last == null || last == undefined) {
alert("last");
return false;
} else {
alert("提交")
$("#Form").submit();
}
}
</script>
</body>
</html>3 、利用js进行表单提交，将form表单进行标记，将form表单中的某个元素设置点击事件，点击时调用js函数，再用js：如 $("#id").submit();等方法提交表单。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>form表单提交方式</title>
</head>
<body>
<form id="Form" action="" method="post" onsubmit="return checkForm();">
<!--直接提交-->
<input id="first" type="text" name="dingdanhao"><input id="chaxun" type="submit" value="查询"><br>
First name:<br>
<input id="last" type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname"><br><br>
<button type="button" onclick="subForm();">js提交</button>
</form>
<script src="jquery.js"></script>
<script>
/*这里是提交表单前的非空校验*/
function checkForm () {
var first = $("input[name='firstname']").val();
var last = $("input[name='lastname']").val();
if (first == "" || first == null || first == undefined) {
alert("first不能为空");
return false;/*阻止表单提交*/
} else if (last == "" || last == null || last == undefined) {
alert("last不能为空");
return false;
} else {
alert("提交")
return true;
}
}
function subForm(){
$("#Form").submit();
}
</script>
</body>
</html>
4、 图片提交表单，将input的属性设置为image时，点击图片也可触发form表单的提交
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>form表单提交方式</title>
</head>
<body>
<form id="Form" action="" method="post" onsubmit="return checkForm();">
<!--直接提交-->
<input id="first" type="text" name="dingdanhao"><input id="chaxun" type="submit" value="查询"><br>
First name:<br>
<input id="last" type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname"><br><br>
<input type="image" src="btn.png" style="width: 50px;height: 50px">
</form>
<script src="jquery.js"></script>
<script>
/*这里是提交表单前的非空校验*/
function checkForm() {
var first = $("input[name='firstname']").val();
var last = $("input[name='lastname']").val();
if (first == "" || first == null || first == undefined) {
alert("first不能为空");
return false;
/*阻止表单提交*/
} else if (last == "" || last == null || last == undefined) {
alert("last不能为空");
return false;
} else {
alert("提交")
return true;
}
}
</script>
</body>
</html>