专栏首页大道七哥form表单重复提交,type=“button”和type=“submit”区别

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-

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Hadoop(十一)Hadoop IO之序列化与比较功能实现详解

      上一篇给大家介绍了Hadoop是怎么样保证数据的完整性的,并且使用Java程序来验证了会产生.crc的校验文件。这一篇给大家分享的是Hadoop的序列化!

    大道七哥
  • Linux搭建Nexus3.X构建maven私服

    原文出处:http://www.yund.tech/zdetail.html?type=1&id=4845e7e60a03d871e6960a99a7abbc8...

    大道七哥
  • ReentrantLock实现原理分析

    原文出处:http://www.yund.tech/zdetail.html?type=1&id=ef94715a2838f06ab03b8621c23d161...

    大道七哥
  • 带你了解Android常见的内存缓存算法

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gdutxiaoxu/article/details/...

    用户2965908
  • 人脸生成新SOTA?它还是GAN。

    众所周知,GAN可分为无条件无监督式、条件监督式两大类;前者不需要标签,后者相反;

    机器学习与生成对抗网络
  • (数据科学学习手札25)sklearn中的特征选择相关功能

    一、简介   在现实的机器学习任务中,自变量往往数量众多,且类型可能由连续型(continuou)和离散型(discrete)混杂组成,因此出于节约计算成本、精...

    Feffery
  • 【Python学习笔记之三】lambda表达式用法小结

    除了def语句之外,Python还提供了一种生成函数对象的表达式形式。由于它与LISP语言中的一个工具很相似,所以称为lambda。就像def一样,这个表达式创...

    Angel_Kitty
  • 19个案例轻松学会python爬虫

    之前在荔枝微课上开了一门叫《不用写代码,10分钟学会微信知乎豆瓣微博的爬虫》课程,受到了不少同学的欢迎,然而web scraper的爬取面临的局限不小,无法进行...

    沉默的白面书生
  • 在线办公市场竞争加剧,百度如流锚定“知识管理”,生态联动大有可为

    日前,百度宣布旗下的在线办公品牌“百度Hi”进行全面升级,正式更名为“如流”,期望进一步打造成为具备知识管理能力的新一代人工智能办公平台。

    曾响铃
  • explain

    id        SELECT识别符。这是SELECT的查询序列号。 select_type 1.SIMPLE:简单的SELECT,不实用UNION或者子查询...

    苦咖啡

扫码关注云+社区

领取腾讯云代金券