AJAX form submit

Submit via AJAX; don't refresh page

by Jeromy French

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<form action="/echo/html/" id="form_edit_sensitivity" method="post" onsubmit="trimTextFields(this); return checkForm(this);" class="form-horizontal">
    <div class="control-group">
        <label for="p_sensitivity_type_id" class="control-label">Group</label>
        <div class="controls">
            <select name="p_sensitivity_type_id" size="1" title="Sensitivity Type" id="p_sensitivity_type_id">
                <option value=""></option>
                <option value="1">Politician</option>
                <option value="2" selected="selected">Celebrity</option>
            </select>
        </div>
    </div>
    <div class="control-group">
        <label for="p_expiration_dte" class="control-label">Expiration Date</label>
        <div class="controls">
            <input type="date" name="p_expiration_dte" id="p_expiration_dte" value="" data-datepicker-value="" min="1789-07-29" />
        </div>
    </div>
    <div class="control-group">
        <div class="controls">
            <label for="p_super_sensitive" class="checkbox">
                <input type="checkbox" id="p_super_sensitive" value="Y" name="p_super_sensitive">Feel like checking this box?</label>
        </div>
    </div>
    <div class="form-actions">
        <input type="hidden" name="some_value" value="1">
        <input type="hidden" name="html" value="<p>Text echoed back to request</p>">
        <input type="submit" value="Submit" class="btn btn-primary">
        <input type="reset" value="Reset" class="btn">
    </div>
</form>
<hr />
<form action="/echo/html/" id="form2" method="post" class="form-horizontal">
    <div class="control-group">
        <label for="name" class="control-label">Name</label>
        <div class="controls">
            <input type="text" name="name"...

CSS

#result {
    border: 2px solid green;
}

JavaScript

var trimTextFields = function () {    },
    checkForm = function (incoming_form) {
        console.log('trimmed fields, custom validated');
        return true;
    };

$(function(){
    
    /* attach a submit handler to each form */
    $('form').submit(function (event) {
    
        /* stop form from submitting normally */
        event.preventDefault();
    
        /* get some values from elements on the page: */
        var $form = $(this),
            form_data = $form.serialize(),
            url = $form.attr('action');
    
        /* Send the data using post */
        var posting = $.post(url, form_data);
        console.log('finished ajax post');
    
        /* Put the results in a div */
        posting.done(function (data) {
            console.log('now load response');
            $('#result').empty().append( $(data) );
        });
    });
});