按钮加载和控件属性在表单提交时未更改

Question

所以我有一个表单，我在提交之前使用 jquery-form-validator 插件进行验证！但是这里的问题是写在 success 上的几行在逐步进行时没有被执行。 但是，如果在 console 中执行或在 debugger 中执行，它们工作正常。真是一个奇怪的行为！有什么解决方法可以解决这个问题吗？

JS

$.validate({
    form:'#contact-form',
    onError: function () {
        toastr.error("Please correct the below errors!", "Error");
        return false;
    },
    onSuccess: function () {
        $("#btnContactUs").button('loading'); //Not getting called
        $('.form-contact form').find('input,textarea').attr('readonly', true).addClass('disabled'); //Not getting called
        var formdata = new FormData($('.form-contact form').get(0));
        $.ajax({
            url: $("#contact-form").attr('action'),
            type: 'POST',
            data: formdata,
            processData: false,
            contentType: false,
            success:function(data)
            {
                if(data.result)
                {
                    toastr.success(data.message, "Success");
                    $('.form-contact form').get(0).reset();//Check this
                }
                else
                {
                    toastr.error(data.message, "Error");
                }
            },
            error:function(data)
            {
                toastr.error(data.message, "Error");
            }
        });
        $("#btnContactUs").button('reset');
        $('.form-contact form').find('input,textarea').attr('readonly', false).removeClass('disabled');
        return false; // Will stop the submission of the form
    }
});

验证成功后，它通过 ajax 调用 Controller 方法，但不执行前两行。

更新： 按钮 #btnContactUs 是一个 bootstrap 按钮，具有 .button 显示加载文本的功能。

Answer 1

这通常发生在您尝试访问的控件不可用或者您在上一个进程完成之前启动一个进程时。为了运行你的 AJAX 无论这些情况如何，尝试在未执行的行上方添加以下 setTimeout 或 SetInterval。

语法：设置超时：http://www.w3schools.com/jsref/met_win_settimeout.asp 设置间隔：http://www.w3schools.com/jsref/met_win_setinterval.asp

希望对您有所帮助！！

Answer 2

你的 onSuccess() 方法的 return false 在你的内部 ajax 成功回调可以运行之前执行。当您放置调试器时，ajax 成功回调事件发生并且您的代码运行没问题。

我们可以使用 $.when 和 jquery 的 .then 功能来解决这个问题，如下所示:

$.when(
            $.ajax({
                url: $("#contact-form").attr('action'),
                type: 'POST',
                data: formdata,
                processData: false,
                contentType: false,
                success:function(data)
                {
                    if(data.result)
                    {
                        toastr.success(data.message, "Success");
                        $('.form-contact form').get(0).reset();//Check this
                    }
                    else
                    {
                        toastr.error(data.message, "Error");
                    }
                },
                error:function(data)
                {
                    toastr.error(data.message, "Error");
                }
            })
        ).then(function(){
            $("#btnContactUs").button('reset');
            $('.form-contact form').find('input,textarea').attr('readonly', false).removeClass('disabled');
        });

按钮加载和控件属性在表单提交时未更改

Button loading and control property not getting changed on form submit

javascript

forms

ajax

jquery

jquery-form-validator

按钮加载和控件 属性 在表单提交时未更改

Button loading and control property not getting changed on form submit

javascript

forms

ajax

jquery

jquery-form-validator

按钮加载和控件属性在表单提交时未更改