您好,登錄后才能下訂單哦!
今天在做項(xiàng)目的過程中用到了submit()提交表單。
折騰許久很是郁悶,經(jīng)過多方資料查詢和親測后,得出結(jié)論:
一定要慎用submit()方法
首先,在form表單中一定不要將input中的name或id命名為submit,否則會導(dǎo)致在submit()的失效,例如以下腳本在所有瀏覽器(IE/FF/CHROME/SAFARI)中都會失效:
<!DOCTYPE html> <html> <head> <script src="http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.js"></script> <title>Page Title</title> </head> <body> <form id="myform" method="post" action="chromeTest.php"> <input name="test" value="test"> <input type="submit" name="submit" value="Edit"> </form> <script> $(function(){ form = $('#myform'); $('#myform input[type="submit"]').on("click",function(e){ e.preventDefault() form.submit(); }) }) </script> </body> </html>
jquery的官方文檔的additional notes中也提到了這一點(diǎn)
https://api.jquery.com/submit/
Forms and their child elements should not use input names or ids that conflict with properties of a form, such as submit
,length
, or method
. Name conflicts can cause confusing failures. For a complete list of rules and to check your markup for these problems, see DOMLint.
----------------------
其次,我們要注意到通過form.submit()提交的表單,相對于正常提交表單會遺漏一些信息。
測試以下兩個(gè)腳本:
腳本1
<? //腳本1 if(!empty($_POST)) print_r($_POST); ?> <!DOCTYPE html> <html> <head> <script src="http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.js"></script> <title>Page Title</title> </head> <body> <form id="myform" method="post" action="chromeTest.php"> <input type="text" name="text1" value="test"> <input type="password" name="password1" value="test"> <input type="radio" name="radio1" value="test"> <input type="checkbox" name="checkbox1" value="test"> <input type="button" name="button1" value="test"> <input type="submit" name="submit1" value="Edit"> <input type="reset" name="reset1" value="Reset"> </form> <script> $(function(){ form = $('#myform'); $('#myform input[type="submit"]').on("click",function(e){ e.preventDefault() form.submit(); }) }) </script> </body> </html>
輸出結(jié)果為:
Array ( [text1] => test [password1] => school [radio1] => test [checkbox1] => test )
腳本2
<? //腳本2 if(!empty($_POST)) print_r($_POST); ?> <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <form id="myform" method="post" action="chromeTest.php"> <input type="text" name="text1" value="test"> <input type="password" name="password1" value="test"> <input type="radio" name="radio1" value="test"> <input type="checkbox" name="checkbox1" value="test"> <input type="button" name="button1" value="test"> <input type="submit" name="submit1" value="Edit"> <input type="reset" name="reset1" value="Reset"> </form> </body> </html>
輸出結(jié)果為:
Array ( [test1] => test [password1] => school [radio1] => test [checkbox1] => test [submit1] => Edit )
比較結(jié)果:
type為"text"、"password"、"radio"、"checkbox"的input在兩種方法中都會正常傳遞
type為"button"、"reset"的input在兩種方法中都不會傳遞
type為"submit"的input在正常的表單提交中會傳遞,而在submit()中會丟失
解決方法:
在submit()前,添加"submit"的值
<input type="hidden" name="submit1" value="Edit">
2.換用以下方法,親測可用
form.submit(function(){ submit = true //你的業(yè)務(wù)邏輯 if(!submit) return false })
---------------
要說明一點(diǎn):
網(wǎng)上有部分聲音說webkit瀏覽器(例如chrome)不支持submit()方法,根據(jù)我親身測試新版本的chrome/safari是支持的,可能某些遠(yuǎn)古版本不支持吧。
最后附上測試所用的瀏覽器版本:
Chrome: 50.0.2661.102 m
Firfox: 48.0a2
IE:11.0.9600
Safari:windows上的5.1.7 及IOS9.3.1上的Safari
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。