2018-11-11 · 2815 次阅读

form 表单中 button 按钮点击自动提交的问题

已解决 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: '添加成功!'
            });
        }
    });
});

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

如果觉得这对你有用，请随意赞赏，给与作者支持

本站文章除注明转载外，均为本站原创或编译。转载请征得作者同意，并务必注明出处。

转载请注明：文章转载自代码饭社区 [https://www.daimafans.com]

回答 (1)

1 个回答

已采纳

百度原因如下:

在 ie 中，html button 默认的 type 是 button，而其他浏览器和 W3C 标准中 button 默认的属性都是 submit。

所以在 form 表单中不指定 button 按钮的 type 属性的话，除了 IE 浏览器，默认都是 submit，所以点击的时候会有一个默认的表单提交行为。

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

问题解决。

还有一种方法，没有试过：

给 button 指定 onClick 事件的时候添加 return false;。

<input id="btnSubmit" class="btn btn-primary" onClick="submitAction();return false;" value="确认"/>

这样它就不会执行默认表单提交了。如果不喜欢这样处理，也可以在 js 按钮触动代码末尾中添加 return false; 同样可以达到相同效果。

2018-11-11
回复

最熟悉的陌生人 83 积分