Question

I have a page that has a form

once the user submits the form I want the button to disappear and a div with a spinner gif and a validating now message to appear

so I have:

function submit_application(input){



    $('#create_account_button').hide();
    $('#create_account_validating').show();


    var form = $(input).parents('form:first');
    var form_id = ($(form).attr('id'));
    var valid = validate_form(form_id);

    if(valid){
        $('#'+form_id).submit();
    }


}

and on my form submit button I have :

onclick="submit_application(this);return false"

validate_form loops through each of the inputs and validates syntax etc.

It takes a couple of seconds to do because there are ajax calls to the server made to validate certain fields, hence the need for the ‘validating now’ div with the spinner gif

It all works fine in Firefox, but in Internet explorer and chrome the button never seems to disappear

Ive done some trouble shooting and realised that whats happening is those browsers validate the form BEFORE hiding and showing the relevant divs..

strange behaviour, any ideas?

Answer 1

Try wrapping the validate in a delay function, like this…

function submit_application(input){
    $('#create_account_button').hide();
    $('#create_account_validating').show();

    setTimeout(function() {
        var form = $(input).parents('form:first');
        var form_id = ($(form).attr('id'));
        var valid = validate_form(form_id);

        if(valid){
            $('#'+form_id).submit();
        }
    }, 250);
}

I don’t know why your code is doing what you describe, but that should solve the problem.