运行Ajax时禁用表单按钮

时间:2018-12-07 16:09:18

标签: ajaxform

我知道之前曾有人问过这个问题,但是没有一个解决方案对我有用,我检查了许多其他地方

我正在使用ajax提交表单

问题是,当PHP操作页面运行时需要花费一些时间,并且单击按钮时似乎什么也没发生,所以我希望在操作页面运行时禁用按钮

这是ajax

$(document).ready(function() {
$("form[name ='signup']").submit(function(event) {
    $('.form-group').removeClass('has-error');
    $('.help-block').remove();
    var formData = {
        'uname'             : $('input[name=uname]').val(),
        'email'             : $('input[name=email]').val(),
        'utype'             : $('select[name=utype]').val(),
        'pwd'               : $('input[name=pwd]').val(),
        'pwd_rp'            : $('input[name=pwd_rp]').val()
    };
    $.ajax({
        type        : 'POST',
        url         : 'includes/signin_action_page.inc.php',
        data        : formData,
        dataType    : 'json',
        encode      : true
    })
        .done(function(data) {
            console.log(data); 
            if ( ! data.success) {
                if (data.errors.uname) {
                    $('#uname-group').addClass('has-error');
                    $('#uname-group').append('<div class="help-block">' +         
                    data.errors.uname + '</div>');
                }


                if (data.errors.email) {
                    $('#email-group').addClass('has-error');
                    $('#email-group').append('<div class="help-block">' + 
                    data.errors.email + '</div>');
                }


                if (data.errors.utype) {
                    $('#utype-group').addClass('has-error');
                    $('#utype-group').append('<div class="help-block">' + 
                    data.errors.utype + '</div>');
                }


                if (data.errors.pwd) {
                    $('#pwd-group').addClass('has-error');
                    $('#pwd-group').append('<div class="help-block">' + 
                    data.errors.pwd + '</div>');
                }


                if (data.errors.pwd_rp) {
                    $('#pwd_rp-group').addClass('has-error');
                    $('#pwd_rp-group').append('<div class="help-block">' + 
                    data.errors.pwd_rp + '</div>');
                }

                if (data.errors.unamechk) {
                    $("form[name ='signup']").append('<div class="alert 
                    alert-info alert-dismissible"><a href="#" class="close" 
                    data-dismiss="alert" 
                    aria-label="close">&times;</a>' + data.errors.unamechk + 
                '</div> ');
                }

                if (data.errors.emailchk) {
                    $("form[name ='signup']").append('<div class="alert 
                    alert-info alert-dismissible"><a href="#" class="close" 
                    data-dismiss="alert" 
                    aria-label="close">&times;</a>' + data.errors.emailchk + 
                   '</div> ');
                } 
                if (data.errors.emailverification) {
                    $("form[name ='signup']").append('<div class="alert 
                    alert-warning alert-dismissible"><a href="#" 
                    class="close" data- 
                    dismiss="alert" aria-label="close">&times;</a>' + 
                    data.errors.emailverification + '</div> ');
                } 

            } else {

                $("form[name ='signup']").append('<div class="alert alert- 
                  success alert-dismissible"><a href="#" class="close" data- 
                  dismiss="alert" 
                  aria-label="close">&times;</a>' + data.message + 
                  '</div>');


            }
        })
        .fail(function(data) {

            console.log(data);
        });
    event.preventDefault();
});

});

ive尝试了这种方法,但似乎不起作用

$('#signup_submit').attr("disabled", true);

按钮名称为“ signup_submit”

0 个答案:

没有答案