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

Try use jQuerys post method:

$.post("dbProcessing.asp", $("#loginForm").serialize(), function(data)
{
    // TODO: function logic
});

Here you can find the manual for jQuery.post()

Answer 2

Well you're certainly correct about the necessity to use (jQuery's) AJAX for this. Here's an example of what you should put in the form submit click handler.

$.ajax({
  type: "POST",
  url: "dbProcessing.asp",
  data: $('#loginForm').serialize(),
  success: function(){
  // Insert any changes into the DOM that you like
  // msg will be whatever you print out in dbProcessing.asp
  // so set it to 'success' or something if the login was successful
  // and then do an if statement to see what === msg and insert
  // a message into the DOM or redirect based on that
  }
});

Edited for better practice (as per comment)

Edit2: now I'm just getting careless

Answer 3

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('<img src="web/imgs/loader.gif"> 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".

Answer 4

To stop a form from reloading the page, this is what I use, it's been tested to work in all major browsers:

function doStuff(e){
    e.returnValue = e.preventDefault && e.preventDefault() ? false : false;
    // handle AJAX here
}

Of course, you'll need to add an onsubmit to the form to call doStuff(event);.