Simple Ajax form submit w/ jquery

by davehol

HTML

<div id="form-container">
    <form id="the-form" action="https://www.goole.com">
        <ul>
            <li><label>first name:</label> <input name="firstname" type="text" value="pico" /></li>
            <li><label>last name:</label> <input name="lastname" type="text" value="the cat" /></li>
            <li><label>date:</label> <input name="date" type="text" value="03-25-2011"/></li>
        </ul>    
        <button id="submit">submit</button>
    </form>
    <div id="loading-image">
        <img src="http://kimatwork.com/pabc/images/loader.gif">
    </div>
    
</div>

CSS

#form-container {
    width: 370px;   
    position: relative;
}
#form-container input { 
    padding: 6px;
    font-size: 16px;
    width: 250px;
    margin: 10px 0px;
    
}
#form-container label {
    width: 80px;
    float:left;
    margin: 10px 0px;
    padding: 6px;
}
#form-container button {
    float: right;
    margin-right: 10px;
    padding: 5px 10px;
    text-transform: uppercase;
}
#loading-image {
    display: none;
    position: absolute;
    top: 50px;
    left: 190px;
}

JavaScript

$('#loading-image').ajaxStart(function() {
    $("#submit").hide();
    $(this).show();
}).ajaxStop(function() {
    $(this).hide();
});

$("#submit").live('click', function() {

    var date = $("input[name=date]").val();
    var submitString = $('#the-form').serialize();

    // the above is all setup, this is the only important part
    post_form(submitString, date);
    return false;

});


function post_form(data, date) {

    $.ajax({
        type: "POST",
        url: "https://www.google.com",
        data: data,
        success: function() {     
            $("#form-container").html(data + " submitted via post and was successful, call vidyas function getRides(date,0) with argument " + date + "(date)");
            //getRides(date,0);
        }
    });

}