Form Cache (with Cookies)

by onury

HTML

<div class="container">
    <form>
        <label>Textbox: </label><input id="f_text" type="text" value="this is a textbox" /><br />
        <label>Password: </label><input id="f_password" type="password" value="1234" /><br />
        <label for="c">Checkbox: </label><input id="f_checkbox" type="checkbox" value="checkValue" checked="checked" /> <br />
        <label>Radios: </label><input id="f_radio1" type="radio" name="rad" value="1st" checked="checked" /> First &nbsp;&nbsp;
        <input id="f_radio2" type="radio" name="rad" value="2nd" /> Second<br />
        <label>TextArea: </label><textarea id="f_textarea">this is textarea</textarea><br />
        <label>Select: </label><select id="f_select">
            <option value="1">Option 1</option>
            <option value="2" selected="selected">Option 2</option>
            <option value="3">Option 3</option>
        </select><br />
        <label>File: </label><input id="f_file" type="file" />
        <input id="f_hidden" type="hidden" value="hidden-field-value" />
        <!-- <input id="f_image" type="image" /> -->
        <br />
        
        <label> </label><input type="reset" value="Reset" /> <input type="submit" value="Submit" />
    </form>
    
    <br /><br />
    <button id="btnCache">Cache Data</button>  
    <button id="btnFetch">Fetch Data</button> <br />
    <button id="btnClearCache">Clear Cache</button> 
    <button id="btnClearForm">Clear Form</button> 
</div>

CSS

.container {
    font-family: Calibri, Arial;
    padding: 25px;
    line-height: 30px;
}

form {
    padding: 10px;
    border: 1px dashed #CCC;
}

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

JavaScript

/* Caches the user-input data from the targeted form, stores it in the cookies 
     * and fetches back to the form when requested or needed. 
     */
    var formCache = (function() {
        var _form = null, 
            _formData = [],
            _strFormElements = "input[type='text']," + 
                        "input[type='checkbox']," + 
                        "input[type='radio']," + 
                        //"input[type='password']," +  //leave password field out 
                        "input[type='hidden']," + 
                        //"input[type='image']," + 
                        "input[type='file']," + 
                        "select," + 
                        "textarea";
        
        function _warn() {
            console.log('formCache is not initialized.');
        }
    
        return {
            /* Initializes the formCache with a target form (id). 
             * You can pass any container id for the formId parameter, formCache will 
             * still look for form elements inside the given container. If no form id 
             * is passed, it will target the first <form> element in the DOM. 
             */
            init: function(formId)
            {
                var f = (typeof(formId) === 'undefined' || formId === null || $.trim(formId) === '') ? 
                    $('form').first() :  $('#' + formId);
                _form = f.length > 0 ? f : null;
                console.log(_form);
            },
            /* Saves form data to cookies.
             */
            save: function()
            {
                if (_form === null) { _warn(); return; }
                
                _form
                .find(_strFormElements)
                .each(function() {
                    _formData.push( $(this).attr('id') + ':' + formCache.getFieldValue($(this)) );
                });
                docCookies.setItem('formData', _formData.join(), 31536e3); //1 year expiration (persistent)
               ...