jQuery hide form on submit?

问题

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.

回答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

回答2:

Try this:

$("form").submit(function(e){
    e.preventDefault();
    $(this).hide(1000);
});

回答3:

You'd want to incorporate an ajax call (I'm taking post) to call the php instead of reloading the page

$('form.register').submit(function(e) {
    e.preventDefault();
    url = $(this).attr('action');
    $.post(url,$(this).serialize(), function(data) {
        alert('success');
        // data will return source code of the URL so you can grab that data and put it somewhere on the script like so.
        $('#result').html($(data).find('form'));//form can be replaced with anything
        // #result is the id of an element you wish to return the info to 
    });
    $(this).hide(1000);
});

And you'd be done.

More info here