javascript
JSP FORM 提交
總結(jié)：FORM中使用onSubmit="return false"防止表單自動提交，以及submit和button提交表單的區(qū)別
最近被form的自動提交煩的不行，網(wǎng)上搜了一些資料，下面這篇文章總結(jié)的非常全，基本好多我之前也都試過了（就差總結(jié)了^=^）。呵呵，有網(wǎng)友總結(jié)的這么全，就直接拿來了：）
在頁面中有多個input type="text"的文本輸入框的情況下沒有問題，但是當(dāng)頁面中有只有一個文本框的情況下()，就會出現(xiàn)此問題.
后來在form 中添加：οnsubmit="return false;"問題終于解決。
<form name="frm" method="post" οnsubmit="return false;">
下邊對“防止表單自動提交，以及submit和button提交表單”進行了些總結(jié)，希望對大家有些用（如果有不當(dāng)?shù)牡胤秸堉赋?#xff09;。
<html>
<script>
function exec(p){
??? document.frm.action = p;
??? document.frm.submit();
}
function exec1(p){
??? document.frm.action = p;
??? document.frm.submit();
??? document.frm1.submit();//IE頁面定位到最后一個提交的action所對應(yīng)的頁面
??? alert("haha");//submit()后邊的語句正常執(zhí)行，這里彈出框文字”haha“
}
</script>
<head>
<h1>總結(jié)：FORM onSubmit="return false"防止表單自動提交，以及submit和button提交表單的區(qū)別</h1>
<head>
<body>
<!-- （1） 下邊的寫法使得表單frm能夠自動提交
下邊的這個form，將鼠標(biāo)點進的文本框中然后按鍵盤的回車鍵，則頁面自動進入百度頁面：http://www.baidu.com
<form name='frm' action="http://www.baidu.com">
??? <input type="text" name= "userName"/>
??? <input type="hidden" name= "userName1"/>
</form>
注意：將上邊的“<input type="hidden" name= "userName1"/>”去掉或者增加上，都不能改變頁面的自動提交！
-->
<!-- （2）而同樣的寫法，進行如上的操作，卻不會提交
可能是有兩個文本輸入框的緣故吧（注意：上邊僅有一個）。
那如果一個頁面中有多個from會怎樣？？后邊有相關(guān)試驗。
<form name='frm' action="http://www.baidu.com">
??? <input type="text" name= "userName"/>
??? <input type="text" name= "pass"/>
</form>
-->
<!-- （3）下面試試，同一個頁面有多個from的情況
這里先試試多個form、每個form中僅有一個文本輸入框
<form name='frm1' action="http://www.baidu.com">
??? <input type="text" name= "userName"/>
??? <input type="hidden" name= "userName1"/>
</form>
<form name='frm2' action="http://www.google.cn/">
??? <input type="text" name= "userName"/>
</form>
經(jīng)試驗，每個from中的文本輸入框都具有自動提交的能力。
-->
<!-- （4）下面試試，同一個頁面有多個from的情況
這里先試試多個form、有的form中僅有一個文本輸入框，有的form中則有多個文本輸入框
<form name='frm1' action="http://www.baidu.com">
??? <input type="text" name= "userName"/>
??? <input type="text" name= "passWord"/>
</form>
<form name='frm2' action="http://www.google.cn">
??? <input type="text" name= "userName"/>
</form>
<form name='frm3' action="http://www.yahoo.com">
??? <input type="text" name= "userName"/>
??? <input type="text" name= "passWord"/>
</form>
經(jīng)試驗，只有 frm2 具有自動提交的特性。
看來：只要頁面中的某個表單中僅有一個文本輸入框，則其頁面就具有自動提交的特性了。
-->
<!--（5）如何防止頁面自動提交？！
很簡單！只要在from 中加上 onSubmit="return false;"就OK了！
<form name='frm1' action="http://www.baidu.com">
??? <input type="text" name= "userName"/>
??? <input type="text" name= "passWord"/>
</form>
<form name='frm2' action="http://www.google.cn" onSubmit="return false;">
??? <input type="text" name= "userName"/>
</form>
呵呵，經(jīng)過onSubmit="return false;" 改造后，frm2不再自動提交了！
-->
<!--（6）下邊看看input type="submit"對提交表單的影響
這里不拿僅有一個文本框的form進行測試了(如果不用onSubmit="return false;" ，它是自動提交的)
<form name='frm1' action="http://www.baidu.com">
??? <input type="text" name= "userName"/>
??? <input type="text" name= "passWord"/>
??? <input type="submit" value="提交1"/>
</form>
<form name='frm2' action="http://www.google.com">
??? <input type="text" name= "userName"/>
??? <input type="text" name= "passWord"/>
??? <input type="submit" value="提交2"/>
</form>
則，分別鼠標(biāo)點擊frm1、frm2中的文本框并按回車后，會根據(jù)各自的action來進入不同的頁面
-->
<!--（7）下邊看看input type="button"對提交表單的影響
<form name='frm1' action="http://www.baidu.com">
??? <input type="text" name= "userName"/>
??? <input type="text" name= "passWord"/>
??? <input type="button" value="提交1"/>
</form>
<form name='frm2' action="http://www.google.com">
??? <input type="text" name= "userName"/>
??? <input type="text" name= "passWord"/>
??? <input type="button" value="提交2"/>
</form>
哈哈，分別鼠標(biāo)點擊frm1、frm2中的文本框并按回車后，都沒有反應(yīng)！看來button這樣是不能提交表單的
-->
<!--（8）使用 "button" 來提交表單
<form name='frm' action="http://www.baidu.com">
??? <input type="text" name= "userName"/>
??? <input type="text" name= ""/>
??? <input type="button" value="提交1" οnclick="exec('http://www.google.com')"/>
</form>
userName 、passWord處都填寫數(shù)據(jù)，點擊button。
OK！連上google了，IE地址欄顯示：http://www.google.com/?userName=1passWord=1
-->
<!-- (9)使用 "button" 來提交表單——參考js exec1()中的相關(guān)注釋??
-->
<form name='frm' action="http://www.google.com">
??? <input type="text" name= "userName"/>
??? <input type="text" name= "passWord"/>
??? <input type="button" value="提交1" οnclick="exec1('http://www.google.com')"/>
</form>
<form name='frm1' action="http://www.hao123.com">
??? <input type="text" name= "userName"/>
</form>
</body>
</html>
總結(jié)期間找了些關(guān)于οnsubmit="return false;"的文章，作為資料也貼在下邊。
URL：http://bbsanwei.iteye.com/blog/271547
onSubmit的使用
在web開發(fā)中，我們經(jīng)常會遇到，一點回車鍵表單就自己提交的問題，能不能禁用回車鍵呢，答案是肯定的.
Html代碼
<from action="" method="post" onSubmit="return false">??
...............???
</from>?
如果想在表單提交時，進行驗證
Html代碼
<html>??
<head>??
<script lanuage="javascript">??
function check()???
{???
//驗證不通過時???
return false;???
}???
</script>??
</head>??
<body>??
<from action="" method="post" onSubmit="return check()">??
...............???
</from>??
</body>??
</html>?
<html>
<head>
<script lanuage="javascript">
function check()
{
//驗證不通過時
return false;
}
</script>
</head>
<body>
<from action="" method="post" onSubmit="return check()">
...............
</from>
</body>
</html>
這樣就會對表單進行驗證再進行提交
要注意的是，千萬不能寫成
Html代碼
<from action="" method="post" onSubmit="check()">??
...............???
</from>?
因為check()不通過后會返回false， 因為onsubmit屬性就像是<form>這個html對象的一個方法名，其值（一字符串）就是其方法體，默認(rèn)返回true，所以還是相當(dāng)于驗證通過
記得對表單驗證一定要寫成這樣
Html代碼
<from action="" method="post" onSubmit="return check()">??
...............???
</from>?
轉(zhuǎn)載于:https://www.cnblogs.com/liuzhuqing/archive/2012/11/07/7480712.html
總結(jié)
以上是生活随笔為你收集整理的JSP FORM 提交的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 马尔代夫旅游选岛全功略
- 下一篇： VC++分析数据包实现Telnet协议分