Question

I have a page which contains two forms, both with an unique ID. I need to make the page fade out when either of the forms is submitted. However, it won’t work.

Here’s the code

$(document).ready(function(){
        $('#container').fadeOut(0);
        $('#container').fadeIn(500);
    });

    $('form').submit(function(){
        alert("Hello.");
        $('#container').fadeOut(500);
    });

As you can see from the code, it should show an alert but it does not, and it doesn’t even fade out the page.
My forms contain a text input, which is set to readonly, and a submit button.

Thanks in advance.

Answer 1

Try this:

$(document).ready(function(){
    $('#container').fadeOut(0);
    $('#container').fadeIn(500);

    $('form').submit(function(e){
        e.preventDefault();
        var form = this;
        $('#container').fadeOut(500, function() { 
            form.submit();
        });       
    });
});

The submit binding was outside of the document ready and it probably couldn’t find the form tag when it was executed.

jsfiddle example – http://jsfiddle.net/KbaG3/