jQuery AJAX (source: http://jsfiddle.net/QZ3ff/3460/)

fiddle.css

body{
    font-family: 'Open Sans', 'Helvetica Neue', 'Arial', sans-serif;
    font-size: 13px;       
}

form span{  
    display: block;
    margin: 10px;
}

label{
    display: inline-block;
    width: 100px;     
}

input[type="text"]{
    border: 1px soild #ccc;
    width: 200px;
    padding: 5px;
}

input[type="submit"]{
     padding: 5px 15px;       
}

span#result{
    padding: 5px;
    background: #ff9;        
}

img#loadingimg{
    display: none;                   
}

fiddle.html

<form method="post" action="/echo/html/" ajax="true">
    
    <span id="result"><a href="http://wp.me/p2O9K2-b">jQuery + AJAX form submit script.</a></span>
   
    <span>        
        <label>Message: </label>
        <input type="text" name="html" placeholder="Howdy..." />
    </span>
    
    <span>
        <label><img id="loadingimg" src="http://dev.cloudcell.co.uk/bin/loading.gif"/>   </label>
        <input type="submit" value="Submit" />      
    </span>
    
</form>

fiddle.js

$(document).ready(function(e) {
    
    $("form[ajax=true]").submit(function(e) {
        
        e.preventDefault();
        
        var form_data = $(this).serialize();
        var form_url = $(this).attr("action");
        var form_method = $(this).attr("method").toUpperCase();
        
        console.log(form_data);
        console.log(form_url);
        console.log(form_method);
        
        $("#loadingimg").show();
        
        $.ajax({
            url: form_url, 
            type: form_method,      
            data: form_data,     
            cache: false,
            success: function(returnhtml){                          								console.log(returnhtml);
                $("#result").html(returnhtml); 
                $("#loadingimg").hide();                    
            }           
        });    
        
    });
    
});