Jquery防止多次提交

h43kikqp  于 2023-02-03  发布在  jQuery
关注(0)|答案(9)|浏览(129)

我想防止多次提交,如果有人点击提交按钮多次之一。
unbindundelgate在这种情况下如何调用我的自定义函数do_some_stuff,它只发生一次,因为我尝试了一些jquery方法,但我认为我做错了什么。谢谢

$(function() {
    $('div.ajax').delegate('form button', 'click', function(e) {
        $(this).do_some_stuff();
        e.preventDefault();
    });
});
yvfmudvl

yvfmudvl1#

JQuery中不建议使用绑定和取消绑定。
从jQuery 1.7开始,.on()方法是将事件处理程序附加到文档的首选方法。
http://api.jquery.com/on/
为了回答您关于多次提交的问题,JQuery 1.7中的另一个新功能是.one()处理程序,它将事件处理程序附加到对象,但只允许它被触发一次,这将允许您防止多次提交。
例如:

$("form#form1").one("submit", submitFormFunction);

function submitFormFunction(event) {
    event.preventDefault(); 
    $("form#form1").submit();
}

注意我绑定的是表单提交事件,而不是按钮单击事件。

qncylg1j

qncylg1j2#

正如cHao所指出的,有两种方法可以做到这一点。

$('form button').prop('disabled', true);

$('form button').attr('disabled', 'disabled');
wwtsj6pe

wwtsj6pe3#

当你点击这个按钮在这个功能中添加属性(禁用)这将使这个按钮不活动.

$("form Button").attr("disabled","1");

应防止多次提交

yuvru6vn

yuvru6vn4#

如果你的用户坚持要一直有一个活动的提交按钮,你可以使用一个变量来跟踪进度。

saving_record = 0; //set variable to show if form is in submission
$(document).ready(function () {
    $('#form').on('submit', function (e) {
        if (saving_record === 0) { //If not submitted yet, submit form
            saving_record = 1; //Set variable to show form is in submission
            $.ajax({
                success: function (data) {
                    saving_record = 0; //Reset variable to allow record update
                },
                error: function (data) {
                    saving_record = 0; //Reset variable to allow record update in case of error
                }
            })
        }
    });
});
fxnxkyjh

fxnxkyjh5#

如果您使用ASP .NETMVCDataAnnotations进行客户端验证,您必须首先验证表单-

// To prevent multiple post
function buttonsubmit() {
    $('form').submit(function () {
        if ($('form').valid()) {
            $(this).find("input[type='submit']").prop('disabled', true);
        }
    });
}
dgiusagp

dgiusagp6#

$(document).ready(function(){
  $('div.ajax form').submit(function(){
     $(this).do_some_stuff();
     return false;
   });          
});
d7v8vwbk

d7v8vwbk7#

这在提交时起作用

$("form").submit(function() {
    // submit more than once return false
    $(this).submit(function() {
        return false;
    });
    // submit once return true
    return true;
});
ubof19bj

ubof19bj8#

在我的例子中,one()事件没有阻止多个提交。
使用了以下代码:

<script>
    $(document).ready(function (ev) {
        $("#SaveAndQuit").on('click', function (ev) {             
            var $form = $(this).closest('form');

            if ($form.valid()) {
                
                $(this).prop('disabled', true);

                // (optional: if multiple submit button, specify which one has been cliqued to the MVC controler)
                $form.append('<input type="hidden" name="SaveButton" value="SaveAndQuit" /> ');

                $form.submit();
            }
        });

    });

</script>

(Visual Studio 2017,MVC项目,Jquery 3.1.1)

nfeuvbwi

nfeuvbwi9#

这对我有用。

$(".button").on("click", (el) => {
    if (el.detail !== 1) { return; }

    // rest of your code here
});

el.detail包含点击计数。任何大于1的值都将被忽略。

相关问题