防止表单重复提交

奈洛先森

于 2018-05-28 14:51:15 发布

阅读量729

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/CopyCow/article/details/80482146

javascript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何通过JavaScript实现防止表单重复提交的方法，包括移除并定时恢复按钮的点击事件，以及使用AJAX回调来禁用和启用按钮。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

多次点击时会导致表单重复提交，我们可以设置定时，用户点击一次后便移除onclick事件，一秒后再自动恢复

function click_btn(num) {
                    if (num == 1) {
                        //防止重复提交
                        $("#btn").removeAttr("onclick");
                        setTimeout("$('#btn').attr('onclick','click_btn(1)')", 1000);
                    } 
                }

在页面卡顿时多次点击保存也会导致数据重复提交，这时我们可以点击后执行方法设置不能再次点击，当ajax返回data时设置恢复可以点击

//将button的设置为不能点击，防止重复提交
                $("#btn").attr('disabled', 'disabled');

function callBack(data) {
                    $('#btnSubmit').removeAttr('disabled');
                    console.log("点击事件恢复");
         
                }