Question

I have a form setup where a user can register, and on submittal, a PHP script runs which validates the user, and once that is done, it echoes a messagebox which jQuery quickly hides and then fades in over the course of 1 second. What I now want to do is to be able to hide that form on submittal, and I thought this might do it:

$(document).ready(function() {
    $('div.mainsuccess,div.mainerror').hide(0).fadeIn(1000);
    $('form.register').submit(function() {
        $(this).hide(1000);
    });
});

Where div.mainsuccess is the success message, and form.register is the form (with a class of register). Now the first line works, which tells me the script is being called, but the form is not being hidden at all. I’m doing something stupid here, but I cannot figure out what?

I’ve tried to look through the jQuery API documentation for submit(), but I cannot understand what is being said. Thanks.

Answer 1

I think the reason it may not work is because the form is submitting it’s data and waiting for page to refresh… which means, it will stop all of it’s javascript stuff coz it’s pointless … I could be wrong but hey, your hide would take 1 second to hide but your page could reload quicker.

$(document).ready(function() {
    $('div.mainsuccess,div.mainerror').hide(0).fadeIn(1000);
    $('form.register').submit(function(e) {
        e.preventDefault();// will stop the form being submited...
        $(this).hide(1000);
        // do ajax here...
        return false;
    });
});

Updated

here is a list of tutorials

http://viralpatel.net/blogs/2009/04/jquery-ajax-tutorial-example-ajax-jquery-development.html

http://www.devirtuoso.com/2009/07/beginners-guide-to-using-ajax-with-jquery/

http://www.sitepoint.com/ajax-jquery/

Videos ….
http://www.youtube.com/watch?v=0CMTQtnZ0G0