JQuery отключить ввод во время отправки ajax

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'
            });
        });
    })

Поэтому, когда я нажимаю «Сохранить», я вижу, что входы отключены, и я получаю предупреждение «до отправки», но когда я нажимаю ОК, все входы становятся активными, даже если я отключаю отвечающий сервер.

Как я могу заставить это работать?

Answer 1

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

Answer 2

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 3

может быть, вы можете отключить вашу форму в Click Func, а затем включить в случае успеха

$('#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 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");
            },

. , .