jQuery submit form without page reload

Question

Ok, so I\'m trying to make a new log in form form my site using jquery and classic ASP. As of right now I have a containing div in my document thats set to hidden, then when the

Answer 1

Here is what I use in my pages:

$('#loginbutton').click(function(event) {
    event.preventDefault(); /*  Stops default form submit on click */       
        $('#loginbutton').hide();                                                               //Hide Login Button
        $('#loginprogress').html(' Processing'); // Show Progress Spinner

        var username = $("#username").val();
        var password = $("#password").val();

        $.ajax({                                                                                        // Run getUnlockedCall() and return values to form
            url: "ajaxDispatcher.php?action=login",
            data: 'username=' + username + '&password=' + password,
            type: "POST",
            success: function(data){
                if (data == '') {
                    $('#loginbutton').show();                                               // Show Login button
                    $('.error').show();                                                     // Display login error message
                    $('#loginprogress').html('');                                           // Show Progress Spinner
                } else {
                    location.reload();
                    $('#logout').show();                                                        // Show logout button
                            $('#userinfo').show();
                    $('#loginprogress').hide();                                         // Hide Progress Spinner
                }
            }
            });
        });

In a nutshell, #loginbutton is a jquery button. On click it hides to prevent multiple submissions. The dispatcher runs a function that checks the login, using the passed values from inputs with id "username" and "password". On success, if the login failed it will return false (showing an error warning), else it will return values to manipulate the dom. In this example, it shows the logout button, hides the loginprogress div, and shows a div called "userinfo".