FORM中使用onSubmit="return false"防止表單自動提交,以及submit和button提交表單的區別


在頁面中有多個input type="text"的文本輸入框的情況下沒有問題,但是當頁面中有只有一個文本框的情況下(),就會出現此問題.

 

后來在form 中添加:onsubmit="return false;"問題終於解決。

<form name="frm"  method="post" onsubmit="return false;">

 

 

下邊對“防止表單自動提交,以及submit和button提交表單”進行了些總結,希望對大家有些用(如果有不當的地方請指出)。

<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>

注意:將上邊的“<input type="hidden" name= "userName1"/>”去掉或者增加上,都不能改變頁面的自動提交!
-->

<!-- (2)而同樣的寫法,進行如上的操作,卻不會提交
可能是有兩個文本輸入框的緣故吧(注意:上邊僅有一個)。
那如果一個頁面中有多個from會怎樣??后邊有相關試驗。

<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>
經試驗,每個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>
經試驗,只有 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>
則,分別鼠標點擊frm1、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>

哈哈,分別鼠標點擊frm1、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>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM