Question

I have a simple form that I am currently posting back to the server to update a nickname. What jquery code do I add (without changing the form) so that the page will not refresh, but instead jquery will post the form in the background and then pop up an alert message containing the reply back from the server?

<form method="post" action="http://www.myserver.com/update_nickname" name="input">
    Quick form to test update_nickname:<br>
    New nickname:<input type="text" value="BigJoe" name="newNickname"><br>
    <input type="submit" value="Submit">
</form>

<script src="jquery-1.4.2.min.js" type="text/javascript"> </script>

Answer 1

try reading this.

or

$("form").submit(function(e){
    var form = $(this);
    $.ajax({ 
         url   : form.attr('action'),
         type  : form.attr('method'),
         data  : form.serialize(), // data to be submitted
         success: function(response){
            alert(response); // do what you like with the response
         }
    });
    return false;
 });