form表单的onsubmit()问题 集合
眾所周知，在表單中加上οnsubmit="return false;"可以阻止表單提交。
下面是簡單的一小段代碼：
java代碼:
1 <form action="index.jsp" method="post" onsubmit="submitTest();"> 2 3 <INPUT value="www"> 4 5 <input type="submit" value="submit"> 6 7 </form> 8 9 <SCRIPT LANGUAGE="JavaScript"> 10 11 <!-- 12 13 function submitTest() { 14 // 一些邏輯判斷 15 return false; 16 } 17 18 //--> 19 20 </SCRIPT>?
大家判斷像上面的寫法，點(diǎn)擊submit按鈕該表單是否提交？
若答案為是，就不用往下看了。
若答案為否，錯(cuò)了。實(shí)際情況是表單正常提交，若想它不提交，應(yīng)該將
java代碼:
1 <form action="index.jsp" method="post" onsubmit="submitTest();">?
改為
java代碼:
?
為何？
原來onsubmit屬性就像是<form>這個(gè)html對象的一個(gè)方法名，其值（一字符串）就是其方法體，默認(rèn)返回true；
和Java一樣，在該方法體中你可以寫任意多個(gè)語句，包括內(nèi)置函數(shù)和自定義函數(shù)，如
java代碼:
1 οnsubmit=" 2 3 alert('haha'); // 內(nèi)置函數(shù) 4 5 submitTest(); // 自定義函數(shù) 6 7 alert(this.tagName); // 用到了this關(guān)鍵詞 8 9 ......(任意多條語句) 10 11 return false; 12 13 "?
就相當(dāng)于
java代碼:
1 Form.prototype.onsubmit = function() { 2 3 alert('haha'); // 內(nèi)置函數(shù) 4 5 submitTest(); // 自定義函數(shù) 6 7 alert(this.tagName); // 用到了this關(guān)鍵詞 8 9 ......(任意多條語句) 10 11 return false; 12 13 };?
這樣的話你就覆寫了(override)其默認(rèn)方法（默認(rèn)返回true）
大家注意到方法體中可以用this這個(gè)關(guān)鍵詞，這里即代表了<form>的對象實(shí)例。
經(jīng)過這樣的分析后，以上情況就不難理解了：
java代碼:
1 <form action="index.jsp" method="post" onsubmit="submitTest();">?
這樣寫，override方法的效果為：
java代碼:
?
在這里submitTest()雖然返回false，但我們只執(zhí)行了此函數(shù)，沒有對其結(jié)果進(jìn)行任何處理。而
java代碼:
1 <form action="index.jsp" method="post" onsubmit="return submitTest();">?
override方法的效果為：
java代碼:
1 Form.prototype.onsubmit = function() { 2 return submitTest(); 3 };?
這樣，我們利用到了它的返回值，達(dá)到了預(yù)期效果。
這樣理解的話我想印象會深刻得多，就不易出錯(cuò)了
結(jié)論：
我們可以用Java里的思維方式來思考模擬JavaScript中的類似情況（JavaScript中基于prototype的面向?qū)ο蠹夹g(shù)也確實(shí)是這樣做的），但他們畢竟還是有本質(zhì)上的區(qū)別，如Java是強(qiáng)類型的，有嚴(yán)格的語法限制，而JavaScript是松散型的。象上述方法：
java代碼:
1 Form.prototype.onsubmit = function() { 2 3 };?
既可以有返回值，又可以沒有返回值，在Java里是通不過的，畢竟Java里面不能靠方法的返回值不同來重載(overload)方法，而JavaScript中的重載要松散得多。
submit()和onsubmit()的區(qū)別
最近在開發(fā)中遇到了表單提交前驗(yàn)證的問題，用一個(gè)普通的button按鈕代替submit按鈕，
在提交前觸發(fā)這個(gè)button的onclick事件，在其事件中觸發(fā)form的submit事件。問題出現(xiàn)了：
以下是出現(xiàn)相關(guān)代碼：
?
卻發(fā)現(xiàn)并沒有觸發(fā)form的onsubmit方法，而是直接提交了。奇怪了，難道沒有這種方式無法結(jié)合form的onsubmit方法嗎？
仔細(xì)想了想，既然this.form表示form這個(gè)對象，那么肯定能獲取到form的屬性和方法的
，就改成this.form.onsubmit(); 成功！
我又查了查手冊，原來submit的方法是這樣解釋的：
The submit method does not invoke the onsubmit event handler. Call the onsubmit event handler directly. When using Microsoft? Internet Explorer 5.5 and later, you can call the fireEvent method with a value of onsubmit in the sEvent parameter.
意思是說submit這個(gè)方法是不觸發(fā)onsubmit時(shí)間的，如果想要觸發(fā)它，需要調(diào)用
fireEvent方法。嘗試一下：this.form.fireEvent('onsubmit');哈哈，果然也成功！不過這樣不是多此一舉嗎？呵呵！
就這個(gè)小問題也搞了我將近一個(gè)小時(shí)，不過為了以后不為這個(gè)問題煩惱，這也是值得的。
1 this.form.submit(); //直接提交表單 2 this.form.onsubmit(); //調(diào)用form 的 onsubmit方法 3 this.form.fireEvent('onsubmit'); //同上,?
PS:又學(xué)到了fireEvent這個(gè)方法，
?
2.onsubmit()與submit() ：
1 <sCript> 2 function fun() 3 { 4 alert("form_submit"); 5 } 6 </script> 7 8 <form onsubmit="fun()"> 9 <input type="submit" id="aaa" value="submit"> <!--能彈出form_submit--> 10 <input type="button" id="bbb" value="onCliCk_submit" onCliCk="document.forms[0].submit()"> 11 <!-- 12 表單會提交，但是不會運(yùn)行fun() 原因是 onsubmit事件不能通過此種方式觸發(fā)（在IE環(huán)境） 13 直接用腳本doCumetn.formName.submit()提交表單是不會觸發(fā)表單的onsubmit()事件的 14 --> 15 <input type="button" id="bb1" value="onCliCk_onsubmit" onCliCk="document.forms[0].onsubmit()"> 16 17 <!--會觸發(fā)fun()參數(shù)--> 18 </form>?
轉(zhuǎn)載于:https://www.cnblogs.com/dandeliongogo/p/6612080.html
總結(jié)
以上是生活随笔為你收集整理的form表单的onsubmit()问题 集合的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： awk、变量、运算符、if多分支
- 下一篇： csdn中使用Git的一些注意问题