Self Submitting Form Fields

Update only after change, and lost focus, to facilities an "auto-save" like concept.

HTML

<form id="MyFormId">
<fieldset>
    <legend>Some Form</legend>
    <div id="last-action"><em>What's going on:</em><br /><br /></div>
    <!-- NOTE: after 8 attempts the div will overflow, I chose not to handle this :p -->
    <div class="editor-label">
        <label for="Deadline">Deadline</label>
    </div>
    <div class="editor-field">
        <input id="Deadline" name="Deadline" type="text" value="" />
    </div>
    <div class="editor-label">
        <label for="Name">Task Name</label>
    </div>
    <div class="editor-field">
        <input id="Name" name="Name" type="text" value="" />
    </div>
    <div class="editor-label">
        <label for="Description">Description</label>
    </div>
    <div class="editor-field">
        <input id="Description" name="Description" type="text" value="" />
    </div>
</fieldset>
</form>

CSS

div#last-action 
{ 
    float:right; 
    margin-right:50px; 
    height:200px; 
    width:200px; 
    background-color:black; color:white 
}

fieldset 
{
    margin: 1em 0;
    padding: 1em;
    border: 1px solid #CCC;
}

fieldset p 
{
    margin: 2px 12px 10px 10px;
}

.display-label,
.editor-label,
.display-field,
.editor-field
{
    margin: 0.5em 0;
}

.text-box
{
    width: 30em;
}

JavaScript

(function($) {

    $(':input').change(function() {
        var c = $(this);
        $.when(
        c.focusout()).then(function() {
            startCountDownAndSendData(c, 5) //delay by 5 seconds
        });
    });

})(jQuery);

function startCountDownAndSendData(c, waitDuration) {

    function go() {
        if (waitDuration <= 0) {
        	  console.log('<=0');
            $('#last-action').append(c.attr('name') + ' = ' + c.val() + '<br />');
            $('form#MyFormId').trigger('submit');
            return;
        }
        waitDuration--;
        console.log('waitDuration--');
        setTimeout(go, 1000);
    }
    go();
}