form表單重復提交,type=“button”和type=“submit”區別


公司測試提了一個項目后台在IE瀏覽器下(360,firefox就沒問題)出現數據重復的問題,調試了好久終於發現問題所在,也不知道是誰寫的代碼,醉醉的。。。。

錯誤地點:

<input type="submit" value="提交"  class="btn"  id="formSubmit" onclick="checkForm()"  />

type類型寫成submit,而在checkForm中也進行了form提交。

 

type=“button”和type="submit"在IE firefox 360下分別進行submit()提交和走ajax測試:

測試代碼:

<body>
    <form id="form1" method="get" >
        <input name="username" value="zhangsan" /><br> 
        <input name="age" value="20" /><br>
        <input name="address" value="beijing" /><br>
        <input name="birthday" value="10-12" /><br> 
        <input name="contactInfo.tel" value="13321464327" /><br> 
        <input name="contactInfo.address" value="hebei" /><br> 
        <input id="subbutton" type="submit" value="submit" onclick=""/>
<!--         <input id="subbutton" type="button" value="submit" onclick="submit();"/> -->
    </form>
    <script type="text/javascript" src="jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {

            $("#subbutton").click(function() {
                $.ajax({
                    type : "POST",
                    url : "queryItems.action?name='xuhui'",
                    data : $("#form1").serialize(),
                    async : false,
                    dataType : "json",
                    success : function(data) {

                    }
                });
            });
            
//             function submit(){
//               $("#form1").submit();
//             }
        });
    </script>
</body>

測試結果:

type=“submit”

普通submit:

IE        提交form  two
firefox  提交form  one
360     提交form   one

ajaxsubmit:

IE                     two
firefox               two
360                   two


type="button"

普通submit:
IE                    one
firefox              one
360                  one

ajaxsubmit:

IE                   one
firefox             one
360                 one

結果分析:

type=button      就單純是按鈕功能   
type=submit      是發送表單

但是對於從事WEB UI的人應該要注意到,使用submit來提高頁面易用性:
使用submit后,頁面支持鍵盤enter鍵操作,而很多WEB軟件設計師,可能沒有注意到submit統一.

用button后往往頁面不支持enter鍵了。所以需要支持enter鍵,必須要設置個submit,默認enter鍵對頁面第一個submit進行操作。

 

 

<input type="submit" name="submit" value="提交"     onClick="submit()">
執行完onClick,轉到action。可以自動提交不需要在onClick中進行提交。所以說onclick這里可以不要。

這里就可以解釋為什么上面會出現重復提交了,但是重復提交情況只會在IE瀏覽器中,firefox 和360就沒有,猜想應該是對form提交進行了優化。

<input type="button" name="button" value="提交"     onClick="submit()">
執行完onClick,跳轉文件在 js文件里控制。提交需要onClick。

 

學習過程中的bug記錄。。。

  


 -END-


免責聲明!

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



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