JQuery在ajax提交期间禁用输入答案

【问题标题】：JQuery disable inputs during ajax submittingJQuery在ajax提交期间禁用输入
【发布时间】：2012-02-25 01:44:47
【问题描述】：

我正在使用 Django、JQuery 和 JQuery 表单插件 (http://jquery.malsup.com/form/) 创建一个表单，我想在等待服务器响应时禁用表单的字段。我的代码是：

$(document).ready(function () {
        $('#load').hide();
        $('#error').hide();
        $('#success').hide();
        var myForm = $(this).find('input'); //finding all inputs
        $('#save').live('click', function () {
            $('#save_form').ajaxSubmit({
                success:function (data, statusText, xhr, $form) {
                    alert('success');
                    $form.find('.error').remove();
                    if (data['result'] == 'success') {
                        $('#success').show("slow");
                    }
                    else if (data['result'] == 'error') {
                        $('#error').show("fast");
                        //calling procedure to show errors
                    }
                    $('#load').hide("fast");
                },
                beforeSubmit: function(arr, $form, options) {
                    $('#error').hide();
                    $('#success').hide();
                    $('#load').show("fast");
                    $(myForm).attr('disabled', true);
                    alert('before submit');
                    return true;
                },
                error: function() {
                    alert("Failed to submit!");
                    $('#load').hide("fast");
                },
                timeout: 3000,
                dataType:'json'
            });
        });
    })

所以当我按下保存时，我看到输入被禁用并且我得到“提交前”警报框，但是当我按下确定时，即使我关闭响应服务器，所有输入都会启用。

我怎样才能让它工作？

【问题讨论】：

标签： jquery ajax django forms

【解决方案1】：

$(function(){
      $(".load")
           .ajaxStart(function () {
              $("input").attr("disabled", "disabled");
          })
         .ajaxComplete(function(){
            $("input").removeAttr("disabled");
         });
});

【讨论】：

【解决方案2】：

也许你可以在点击功能中禁用你的表单，然后成功启用

$('#save').live('click', function () {

            $(myForm).attr('disabled', true);
            alert('before submit');

            $('#save_form').ajaxSubmit({
                success:function (data, statusText, xhr, $form) {
                    $(myForm).attr('disabled', false);
                    alert('success');
                    $form.find('.error').remove();
                    if (data['result'] == 'success') {
                        $('#success').show("slow");
                    }
                    else if (data['result'] == 'error') {
                        $('#error').show("fast");
                        //calling procedure to show errors
                    }
                    $('#load').hide("fast");
                },
.
.
.

【讨论】：

如果我在 .ajaxSubmit 禁用工作之前禁用它但 ajax 提交停止工作 0_o。

【解决方案3】：

var myForm = $('YOUR_FORM').find('input'); // finding `input`s should like this

$('#save_form').ajaxSubmit({
  beforeSubmit: function() {
    $(myForm).prop('disabled', true);
    ...
  },
  success: function() {
    $(myForm).prop('disabled', false);
    .....
  },
  error: function() {
    ....
  }
});

【讨论】：

【解决方案4】：

我确实认为在提交之前禁用表单会停止表单提交，但是您可以禁用表单中的输入元素，这应该会给您想要的功能。例如。为表单中的每个输入或页面上的任何其他输入元素添加一个类似 frmdis 的类。

$('#save').live('click', function () {

        $('.frmdis').prop('disabled', true);
        alert('before submit');

        $('#save_form').ajaxSubmit({
            success:function (data, statusText, xhr, $form) {
                $('.frmdis').prop('disabled', false);
                alert('success');
                $form.find('.error').remove();
                if (data['result'] == 'success') {
                    $('#success').show("slow");
                }
                else if (data['result'] == 'error') {
                    $('#error').show("fast");
                    //calling procedure to show errors
                }
                $('#load').hide("fast");
            },

。 . .

【讨论】：