Question

我正在使用Django，JQuery和JQuery Form插件（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'
            });
        });
    })

所以，当我按下保存时，我看到输入被禁用，我在'提交'警报框之前，但是当我按下OK时，所有输入都会启用，即使我关闭响应服务器。

我怎样才能让它发挥作用？

Answer 1

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

Answer 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");
                },
.
.
.

Answer 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() {
    ....
  }
});

Answer 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");
            },

。。

JQuery在ajax提交期间禁用输入

4 个答案: