如何在使用jquery向数据库发送数据时取消激活的按钮

How to void that a button being active while send data to a database using jquery?

本文关键字:数据 取消 激活 按钮 数据库 jquery      更新时间:2023-09-26

我有一个将数据发送到数据库的表单,我希望用户在将数据保存到数据库时再次按下发送按钮。

我的代码可以工作,但没有这个功能:

    $(function(){
        var $loading = $('.spinner').hide();
        $(document)
            .ajaxStart(function () {$loading.show();})
            .ajaxStop(function () {$loading.hide();});
        $('form.publn-nr-srch').submit(function(){
            $.ajax({
                url: '/publicationSearch/pubSearchScr.php',
                type: 'POST',
                data: $('form.publn-nr-srch').serialize(),
                success: function(response) {
                    $('div.result').html(response);
                }
            });
            return false;
        });
    });

然后我在其他人中尝试了这个:

    $(function(){
        var $loading = $('.spinner').hide();
        var $button = $('.send-data').enable();
        $(document)
            .ajaxStart(function () {
                $button.disable();
                $loading.show();
            })
            .ajaxStop(function () {
                $button.disable();
                $loading.hide();
            });
        $('form.publn-nr-srch').submit(function(){
            $.ajax({
                url: '/publicationSearch/pubSearchScr.php',
                type: 'POST',
                data: $('form.publn-nr-srch').serialize(),
                success: function(response) {
                    $('div.result').html(response);
                }
            });
            return false;
        });
    });

但我所做的一切都没有奏效。如果你能帮我,我将不胜感激。

编辑

以下是基于@ahmed.hoban:答案的代码

        $('form.publn-nr-srch').submit(function(){
            $.ajax({
                beforeSend: function(){
                    $button.prop("disabled",true);
                },
                complete: function() {
                    $button.prop("disabled",false);
                },
                url: '/publicationSearch/pubSearchScr.php',
                type: 'POST',
                data: $('form.publn-nr-srch').serialize(),
                success: function(response) {
                    $('div.result').html(response);
                }
            });
            return false;
        });

对吗?

使用beforeSend尝试并将"prop"设置为禁用(jquery方式)

$.ajax({
  beforeSend: function(){
    $button.prop("disabled",true);
  },
  complete: function() {
    $button.prop("disabled",false);
  }
  ...

希望这项工作!

$('form.publn-nr-srch').submit(function(){
       $('button').prop("disabled",true);
            $.ajax({
                url: '/publicationSearch/pubSearchScr.php',
                type: 'POST',
                data: $('form.publn-nr-srch').serialize(),
                success: function(response) {
                    $('button').prop("disabled",false);
                    $('div.result').html(response);
                }
            });
            return false;
        });