zoukankan      html  css  js  c++  java
  • 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-

  • 相关阅读:
    GPT分区安装windows10详细教程
    paddle07-paddle.regularizer正则化
    paddle02-paddle.io(数据读取相关) 【完】
    【python】80行代码实现压缩包密码破解软件,支持zip和rar
    【python】B站弹幕数据分析及可视化(爬虫+数据挖掘)
    【python】10行代码下载B站弹幕
    【pytorch】使用迁移学习(resnet18)训练mnist数据集
    迁移学习在实际应用中需要注意什么?
    【python】进度条的简单实现
    【机器学习】AI去马赛克工具(图像修复)
  • 原文地址:https://www.cnblogs.com/jstarseven/p/4979975.html
Copyright © 2011-2022 走看看