開發中表單提交是很常見的，表單的提交方式也多種方式。
1.使用submit按鈕提交表單 <input type="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>
當您點擊提交按鈕，表單數據會被發送到名為demo_form.asp的頁面。submit按鈕提交表單，表單直接被提交了！當然提交表單前可能需要進行驗證，可以根據自己的需求做表單提交【校驗請看Jquery部分代碼】
如果不喜歡用$(selector).submit(function) 提交方法，也可以使用 onsubmit="return function()"方法進行提交驗證。代碼如下：
<!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 id="tj" type="submit" value="提交"> </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>
注釋：
onsubmit直接寫false表單還是會被提交。
表單的onsubmit事件句柄（比如：onsubmit="return false"）不會執行。 不能保證由其一定會被HTML用戶代理調用。
如果一個表單空間（比如一個submit類型的按鈕）的name 或者id值為"submit"，則它將覆蓋表單的submit方法。
2.使用button按鈕提交表單 <input type="button"/>
（1）可以直接將 上述方法1中的<input type="submit" value="提交">直接換成<input type="button" value="提交">
（2） 方法差不多 沒啥區別 直接貼代碼
<!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 type="image" src=""> 圖片提交表單，將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>
參考資料地址：http://blog.csdn.net/s_liuxin_s/article/details/51011821