Question

I’m creating a form using Django, JQuery and JQuery Form plugin (http://jquery.malsup.com/form/) and I want to disable my form’s fields while waiting for server response. My code is:

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

So when I press Save I see that inputs are disabled and I’m getting ‘before submit’ alertbox, but when I press OK all inputs become enabled even If i switch off responding server.

How can I make it work?

Answer 1

maybe u can disable your form in click func, and then enable in success

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