jQuery to database - registration form with validation

I find this tutorial in 9lessons.com : http://www.9lessons.info/2011/01/gravity-registration-form-with-jquery.html

It's about a registration form with validation.

I want to send data to DB.

// Submit button action
$('#submit').click(function()
{
  开发者_开发技巧  var email=$("#email").val();
    var username=$("#username").val();
    var password=$("#password").val();
    if(ck_email.test(email) && ck_username.test(username) && ck_password.test(password) )
        {
            $("#form").show().html("<h1>Thank you!</h1>");
                    /////   if OK
                    /////       Show thanks
                    ////    else
                    ////        Error, try again
        }
    return false;
});

How can I do ?? I searched in internet in jQuery tutorial and I find much codes ...

This tutorial will walk you the entire process: http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/

It implements jQuery.post and calls a PHP script that will allow you to process the data.

You will need to use Ajax to submit the data to a backend script (such as PHP) to do the actual database interaction. I'd recommend using POST:

http://api.jquery.com/jQuery.post/

you can use jquery post method

$.post("test.php", $("#testform").serialize());

or for more detail visit this link jquery form post method

Finally I inserted data form to database... I have a problem.. I forgot to verify if email is available or not !

I added this lines from an other tutorial in email verification to test if email exist in DB or not.

First I send email to check_availability.php

if mail exist an error message appear else, the password fiel must appear ...

Like you see in picture, I verify the existence of an email adress and availibality and unavailability message appear but not correctly ...

$('#email').keyup(function()
{
    var email=$(this).val();
    if (!ck_email.test(email)) 
    {
        $(this).next().show().html("Enter valid email");
    }
    else
    {
        //$(this).next().hide();
        //$("li").next("li.password").slideDown({duration: 'slow',easing: 'easeOutElastic'});
                    $.ajax
                        ({
                            type: "POST",
                            url: "user_availability.php",
                            data: "email="+ email,
                            success: function(msg)
                            {
                                $("#status").ajaxComplete(function(event, request, settings)
                                {
                                    if(msg == 'OK')
                                    {
                                        /*$("#email").removeClass('object_error'); // if necessary
                                        $("#email").addClass("object_ok");
                                        $(this).html(' <img align="absmiddle" src="accepted.png" /> ');*/
                                        //////////////////
                                        $(this).next().hide();
                                        $("li").next("li.password").slideDown({duration: 'slow',easing: 'easeOutElastic'});
                                        //////////////
                                    }
                                    else
                                    {
                                        $("#email").removeClass('object_ok'); // if necessary
                                        $("#email").addClass("object_error");
                                        $(this).html(msg);
                                    }
                                });
                            }
                        });

    }

});

The tow first comment lines are the default ines used to show the next field //$("li").next("li.password").slid ...

Like you see I add them in Ok test section ....