关于form表单中button按钮自动提交问题

坑:点击确认按钮,form表单提交2次,发送后台2次请求

  

//错误代码:
<Button id="btnSubmit" name="btnSubmit" class="btn btn-primary" >确认</Button>

$("#btnSubmit").click(function(){
    $(‘#formSave‘).ajaxSubmit(function(data) {
    if(data.code == 0){
         $.alert({
            title: ‘提示!‘,
            content: ‘添加成功!‘
        });
    }
    });
});

//改正后代码:
<input id="btnSubmit" type="button" class="btn btn-primary" value="确认"/>

执行错误代码,后台总是会请求2次,而且页面总是会跳转至一个黑页面.

百度原因如下:在ie中,button默认的type是button,而其他浏览器和W3C标准中button默认的属性都是submit

同时看到一片文章:如何阻止form表单中的button按钮提交,不过还未实践,有兴趣的可以自己试试.
时间: 2024-10-12 16:59:31

关于form表单中button按钮自动提交问题的相关文章

form表单取消按钮自动提交

默认写在form表单里的按钮可以自动提交表单,现在要实现的效果是点击button按钮调用js函数,再有ajax提交 <button type="button" class="btn btn-sub" onclick="return formSubmit();">提交</button> function formSubmit() { // 如果是修改渠道号,原来就有渠道参数,需要将原有的渠道参数初始化进去 $("#

form表单中的button自动刷新页面问题

form表单中如果存在button的话,有可能会出现一个问题:点击button,触发了页面的自动刷新事件. 原因是因为<button>标签默认的类型是submit,即默认的button点击就会触发表单的提交事件. <button></button> <!-- 两者是相当的 --> <button type="sumbit"></button> 解决的办法有三个. 1.在<button>标签中添加属性ty

angularjs解决方案之 Form表单中按钮提交

在form表单中如果有子表时,子表中的按钮默认的提交方式是submit,如果不这是btn的类型为button的话,点击子表按钮操作时,主表单也是会提交的. <button class="'+ n.btnClass +'" type="button" ng-click="operationRow(\''+meta.row+'\')">'  +<i class="'+ n.iClass +'"></i

form表单中多个button按钮必须声明type类型

最近在做一个后台管理系统,发现了一个小bug: 问题描述:form表单中有多个button按钮(以下图为例),如果第一个button不写type属性,那么点击第一个button按钮会触发submit事件: 解决办法:给第一个按钮加上type属性. 原文地址:https://www.cnblogs.com/crf-Aaron/p/8336934.html

Form表单中的action提交路径问题

Form表单中的action提交路径问题 Form表单action属性和method属性的一些问题: 我遇到的是Form表单提交到servelet处理时遇到的问题:(1)<form name="form1" action="①?" method=“②?”>      //表单的内容     </form> (2)对应的处理用户请求的servlet类为HelloServlet.java: (3)配置web.xml文件:<servlet&g

表单按回车自动提交(转)

http://www.cnblogs.com/luoyanli/archive/2012/07/09/2582650.html 1.当form表单中只有一个<input type="text" name='name' />时按回车键将会自动将表单提交. <form id='form1' action='a1.jsp' method='post'> <input type='text' name='name' /> </form> 再添加一

form表单中method的get和post区别

一.问题的提出   <form action="getPostServlet/getPost.do?param4=param4" method="get">     <input type="hidden" name="param1" value="param1">     <input type="hidden" name="param2&quo

dwz的form表单中url的变量替换

form表单中action的地址格式 “__URL__/edit/{xxx}”,大括号内的 “xxx” 就是变量名,主要功能是结合table组件一起使用. 下图中的删除.编辑.修改密码都是用了url变量替换: 删除.编辑.修改密码使用了变量{sid_user},特别需要注意的是变量命名的格式,必须以"sid_"开头,这样后台可以直接以变量"sid"接收. <tbody>中<tr target="sid_user" rel=&qu

如何在一个form表单中实现多个submit

As we all know,通过设置input type=“submit”,我们可以把form表单中的值通过post方式传递给action所指向的页面.下图中,我们可以把userName,userAge,userSex这三个值传递到xxx.jsp <form action="xxx.jsp" method="post">            <input type="text" name="userName&quo