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记录。。。

时间: 2024-10-21 07:40:59

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

JavaWeb学习总结(十一):Session解决form表单重复提交

在平时开发中,如果网速比较慢的情况下,用户提交表单后,发现服务器半天都没有响应,那么用户可能会以为是自己没有提交表单,就会再点击提交按钮重复提交表单,我们在开发中必须防止表单重复提交. 一.表单重复提交的常见应用场景 有如下的form.jsp页面 1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2 <!DOCTYPE HTML>

js阻止form表单重复提交

防止表单重复提交的方法总体来说有两种,一种是在js中阻止重复提交:另一种是在后台利用token令牌实现,大致思路是生成一个随机码放到session和form表单的隐藏输入框中,提交表单时两者对比,表单处理完毕清空或者修改session中的token. 在js中处理简单易懂,同时能解决我现在所做的项目中的问题,目前暂用js处理,后期如有需要再研究token机制.代码如下: 1.表单提交后禁用提交按钮(在本项目中表单提交完成后,如果处理成功都把form表单关掉了) 1 /** 2 * form表单格

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

在提交表单的时候,可能遇到网速等导致页面突然加载变慢,用户重复地点击提交按钮,将在数据库产生多条数据,导致不可控情况. 比如下面的情况就会导致表单重复提交: 点击提交按钮两次. 点击刷新按钮. 使用浏览器后退按钮重复之前的操作,导致重复提交表单. 使用浏览器历史记录重复提交表单. 浏览器重复的HTTP请求. 网页被恶意刷新. 下面是几种解决的方法: 一:利用js设置按钮点击后变成灰色 $(document).ready(function(){ $(input:submit).click(){ s

form表单重复提交问题

导致表单重复提交的原因是:第一次提交的表单会被缓存到内存中,直到页面下次提交或页面关闭或转向其他页面时才消失.在自调用返回时,内存中的数据依然在,这时页面中的判断提交的代码依然可以检测到提交的值,顾会产生重复提交的效果. 解决方法 Ⅰ重定向,页面提交后转到另一个页面而不是本页面 Ⅱ提交表单后提交按钮变灰/隐藏提交按钮 Ⅲ增加令牌token 访问页面前产生token public void toStart(HttpServletRequest req, HttpServletResponse re

easyUI的form表单重复提交处理

1. 问题 生产环境出现过新增用户提交, 入库两条重复数据的情况; 但是我查看代码, 页面做了校验, 后台插入数据也做了校验;  出现这种几率的事件的非常小的, 但是还是会碰到, 客户会对我们的产品产生怀疑, 所以解决这个问题很重要. 2. 解决办法 其实根本原因还是用户提交注册表单发生了重复提交, 只要杜绝重复提交就可以了; 所以提交表单之前加入遮罩层来解决, 代码如下: function submit(){ if(!$("#form").form('validate')){ ret

form表单常用提交方式—get与post的区别

表单有两种提交方式:get与post <form name="regForm" action="动作" method="提交方式"> </form> 1.get 以明文的方式通过URL提交数据,数据在URL中可以看到.提交数据最多不能超过2kb,安全性较低,但效率比post高.适合提交数据量不大安全性不高的数据,如搜索.查询等功能. 2.post 将用户提交的信息封装在HTML HEADER内,适合数据量大安全性高的用户信

JavaWeb学习总结(十三)——使用Session防止表单重复提交

在平时开发中,如果网速比较慢的情况下,用户提交表单后,发现服务器半天都没有响应,那么用户可能会以为是自己没有提交表单,就会再点击提交按钮重复提交表单,我们在开发中必须防止表单重复提交. 一.表单重复提交的常见应用场景 有如下的form.jsp页面 1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2 <!DOCTYPE HTML>

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

在平时开发中,如果网速比较慢的情况下,用户提交表单后,发现服务器半天都没有响应,那么用户可能会以为是自己没有提交表单,就会再点击提交按钮重复提交表单,我们在开发中必须防止表单重复提交. 一.表单重复提交的常见应用场景 有如下的form.jsp页面 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML> <

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

申明:此文章属于转载, 转自博客: http://www.cnblogs.com/xdp-gacl/p/3859416.html在平时开发中,如果网速比较慢的情况下,用户提交表单后,发现服务器半天都没有响应,那么用户可能会以为是自己没有提交表单,就会再点击提交按钮重复提交表单,我们在开发中必须防止表单重复提交. 一.表单重复提交的常见应用场景 有如下的form.jsp页面 1 <%@ page language="java" import="java.util.*&qu