公司测试提了一个项目后台在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-

form表单重复提交，type=“button”和type=“submit”区别的更多相关文章

  1. JavaWeb学习总结（十一）：Session解决form表单重复提交

    在平时开发中,如果网速比较慢的情况下,用户提交表单后,发现服务器半天都没有响应,那么用户可能会以为是自己没有提交表单,就会再点击提交按钮重复提交表单,我们在开发中必须防止表单重复提交. 一.表单重复提 ...

  2. js阻止form表单重复提交

    防止表单重复提交的方法总体来说有两种,一种是在js中阻止重复提交:另一种是在后台利用token令牌实现,大致思路是生成一个随机码放到session和form表单的隐藏输入框中,提交表单时两者对比,表单 ...

  3. php 解决和避免form表单重复提交的方法

    在提交表单的时候,可能遇到网速等导致页面突然加载变慢,用户重复地点击提交按钮,将在数据库产生多条数据,导致不可控情况. 比如下面的情况就会导致表单重复提交: 点击提交按钮两次. 点击刷新按钮. 使用浏 ...

  4. easyUI的form表单重复提交处理

    1. 问题 生产环境出现过新增用户提交, 入库两条重复数据的情况; 但是我查看代码, 页面做了校验, 后台插入数据也做了校验;  出现这种几率的事件的非常小的, 但是还是会碰到, 客户会对我们的产品产 ...

  5. java web学习总结(十三) -------------------使用Session防止表单重复提交

    在平时开发中,如果网速比较慢的情况下,用户提交表单后,发现服务器半天都没有响应,那么用户可能会以为是自己没有提交表单,就会再点击提交按钮重复提交表单,我们在开发中必须防止表单重复提交. 一.表单重复提 ...

  6. JavaWeb防止表单重复提交(转载）

    转载自:http://blog.csdn.net/ye1992/article/details/42873219 在平时开发中,如果网速比较慢的情况下,用户提交表单后,发现服务器半天都没有响应,那么用 ...

  7. JavaWeb---总结(十三)使用Session防止表单重复提交

    在平时开发中,如果网速比较慢的情况下,用户提交表单后,发现服务器半天都没有响应,那么用户可能会以为是自己没有提交表单,就会再点击提交按钮重复提交表单,我们在开发中必须防止表单重复提交. 一.表单重复提 ...

  8. [Java拾遗五]使用Session防止表单重复提交

    申明:此文章属于转载, 转自博客: http://www.cnblogs.com/xdp-gacl/p/3859416.html在平时开发中,如果网速比较慢的情况下,用户提交表单后,发现服务器半天都没 ...

  9. java web 学习十三（使用session防止表单重复提交）

    在平时开发中,如果网速比较慢的情况下,用户提交表单后,发现服务器半天都没有响应,那么用户可能会以为是自己没有提交表单,就会再点击提交按钮重复提交表单,我们在开发中必须防止表单重复提交. 一.表单重复提 ...

随机推荐

  1. APUE学习笔记(1)：APUE运行环境

    APUE全称<Advanced Programming in the UNIX Environment>(UNIX环境高级编程) 书中例子大都使用作者自己写的头文件,所以需要解决一下,还好 ...

  2. css3动画实例测试

    1.css3动画属性分析(2016-5-11) 1.transition: 规定属性变换规则,可以这样讲.transition(a,b,c,d); a:要变换的属性: b:过渡时间: c:运动方式: ...

  3. DataUml Design 课程6-DataUML Design 1.1版本号正式宣布（支持PD数据模型）

    从DataUML Design正式宣布到现在两个月,因为最近忙,出版到现在为止1.1版本号.稍后我们将始终坚持以良好DataUML Design软件,我希望程序员有很多支持. 一.1.1新的和改进的版 ...

  4. QTP使用技巧

    1QTP基本功能的使用 QTP的基本功能包括两大部分:一部分是提供给初级用户使用的关键字视图:另一部分是提供给熟悉VBScript脚本编写的自动化测试工程师使用的专家视图.但是,并没有严格的区分,在实 ...

  5. T4模版

    T4模版 这讲适合所有的MVC程序 很荣幸,我们的系统有了体验的地址了.演示地址 之前我们发布了一个简单的代码生成器,其原理就是读取数据库的表结构,生成文本的一个方式来生成代码! 为了替代重复的劳动, ...

  6. SZU:L89 Frog Encoding

    Judge Info Memory Limit: 65536KB Case Time Limit: 3000MS Time Limit: 3000MS Judger: Normal Descripti ...

  7. vim简单的实用总结

    vim简单的实用总结 介绍vim常用的四种模式:一般模式,编辑模式,指令列命令模式与可视模式.一,一般模式   用vim filename打开文件后直接进入的就是一般模式,在这个模式下可以用hjkl移 ...

  8. vijos1004 博弈论

    一道挺简单的博弈论题 感觉自己也没有很规范的学过博弈论吧,就是偶尔刷到博弈论的题目,感受一下推导的过程,大概能领悟些什么 我们设2001.11.4必败,推上去,即2001.10.4和2001.11.3 ...

  9. C/C++基础知识总结——数据的共享与保护

    1. 标识符的作用域与可见性 1.1 作用域 标识符的作用域包括:函数原型作用域.局部作用域.类作用域.命名空间作用域 (1) 函数原型作用域:函数的参与的作用域就是从函数的开始到结束 (2) 局部作 ...

  10. python（学习之路一）

    ''' Created on 2013-5-3 @author: lixingle ''' #输出的练习 length=3 width=4; area=length*width print(area) ...