FORM中使用onSubmit="return false"防止表單自動提交，以及submit和button提交表單的區別
在頁面中有多個input type="text"的文本輸入框的狀況下沒有問題，可是當頁面中有隻有一個文本框的狀況下()，就會出現此問題.javascript
後來在form 中添加：onsubmit="return false;"問題終於解決。html
<form name="frm" method="post" onsubmit="return false;">java
下邊對「防止表單自動提交，以及submit和button提交表單」進行了些總結，但願對你們有些用（若是有不當的地方請指出）。web
<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所對應的頁面
alert("haha");//submit()後邊的語句正常執行，這裏彈出框文字」haha「
}
</script>
<head>
<h1>總結：FORM onSubmit="return false"防止表單自動提交，以及submit和button提交表單的區別</h1>
<head>
<body>
<!-- （1） 下邊的寫法使得表單frm可以自動提交
下邊的這個form，將鼠標點進的文本框中而後按鍵盤的回車鍵，則頁面自動進入百度頁面：http://www.baidu.com
<form name='frm' action="http://www.baidu.com">
<input type="text" name= "userName"/>
<input type="hidden" name= "userName1"/>
</form> post
注意：將上邊的「<input type="hidden" name= "userName1"/>」去掉或者增長上，都不能改變頁面的自動提交！
--> 測試
<!-- （2）而一樣的寫法，進行如上的操做，卻不會提交
多是有兩個文本輸入框的緣故吧（注意：上邊僅有一個）。
那若是一個頁面中有多個from會怎樣？？後邊有相關試驗。 google
<form name='frm' action="http://www.baidu.com">
<input type="text" name= "userName"/>
<input type="text" name= "pass"/>
</form>
--> orm
<!-- （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>
經試驗，每一個from中的文本輸入框都具備自動提交的能力。
--> htm
<!-- （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>
經試驗，只有 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>
呵呵，通過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>
則，分別鼠標點擊frm一、frm2中的文本框並按回車後，會根據各自的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>
哈哈，分別鼠標點擊frm一、frm2中的文本框並按回車後，都沒有反應！看來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" onclick="exec('http://www.google.com')"/>
</form>
userName 、passWord處都填寫數據，點擊button。
OK！連上google了，IE地址欄顯示：http://www.google.com/?userName=1passWord=1
-->
<!-- (9)使用 "button" 來提交表單——參考js exec1()中的相關注釋
-->
<form name='frm' action="http://www.google.com">
<input type="text" name= "userName"/>
<input type="text" name= "passWord"/>
<input type="button" value="提交1" onclick="exec1('http://www.google.com')"/>
</form>
<form name='frm1' action="http://www.hao123.com">
<input type="text" name= "userName"/>
</form>
</body>
</html>
總結期間找了些關於onsubmit="return false;"的文章，做爲資料也貼在下邊。
URL：http://bbsanwei.javaeye.com/blog/271547
onSubmit的使用
在web開發中，咱們常常會遇到，一點回車鍵表單就本身提交的問題，能不能禁用回車鍵呢，答案是確定的.
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對象的一個方法名，其值（一字符串）就是其方法體，默認返回true，因此仍是至關於驗證經過
記得對錶單驗證必定要寫成這樣
Html代碼 <from action="" method="post" onSubmit="return check()"> ............... </from>
- 1. onsubmit return false仍提交表單
- 2. js實現表單提交submit()，onsubmit
- 3. ajax提交，form表單提交，onsubmit="return checksubmit()"提交驗證
- 4. 阻止表單submit提交（在提交以前作驗證及判斷）
- 5. form表單的兩種提交方式，submit和button的用法
- 6. php 防止表單重複提交
- 7. JS表單提交中onsubmit事件return的做用
- 8. 表單submit提交與ajax提交
- 9. 如何防止表單重複提交
- 10. Javascirpt 阻止表單提交
- 更多相關文章...
- • PHP PDO 事務與自動提交 - PHP參考手冊
- • SVN 提交操作 - SVN 教程
- • SpringBoot中properties文件不能自動提示解決方法
- • IntelliJ IDEA中SpringBoot properties文件不能自動提示問題解決
-
每一个你不满意的现在，都有一个你没有努力的曾经。