Serialize, Clear, and Deserialize Form with jQuery

Serialize a form with jQuery and then do the reverse/opposite of it to repopulate the form with the serialized string.

by gangadharjannu

HTML

<form id="testForm" action="" method="post">
    A<input name="A" type="text" value="Hi!" />
    <br />
    B<input name="B" type="checkbox" value="b-is-checked" /> ("b-is-checked")
    <br />
    C<input name="C" type="checkbox" /> (no value)
    <br />
    D<select name="D">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    <br />
    E<input name="E" type="text" value="" />
    <br />
    F<input name="F" type="text" />
    <!-- ^ no value -->
    <br />
    G<input name="G" type="radio" value="1" />1
    <input name="G" type="radio" value="2" />2
    <input name="G" type="radio" value="3" />3
    <br />
    H<input name="H" type="radio" /> (no value)
    <br />
    I<input name="I" type="radio" value="off" />off
    <input name="I" type="radio" value="on" />on
    <br />
    J<textarea name="J">Bye!</textarea>
</form>

<div id="serializedString"></div>
 <button type="button" id="populate">Populate Form</button>
<button type="button" id="serialize">Serialize Form</button>
<button type="button" id="clear">Clear Form</button>
<button type="button" id="clear2">Clear Form 2</button>
<button type="button" id="reset">Reset Form</button>
<button type="button" id="deserialize">Populate (Deserialize) Form</button>
<div id="populateFeedback"></div>

CSS

body { font-family: Tahoma, Arial; }
#testForm {
    background-color: #ccddee;
    padding: 1em;
}
#serializedString
,#populateFeedback {
    display: none;
    border: dashed 2px orange;
    background-color: rgba(255,100,0,0.25);
    padding: 1em;
    margin: 1em;
    word-wrap: break-word;
    font-size: 90%;
}
#populateFeedback {
    border: solid 1px green;
    background-color: rgba(50,255,50,0.25);
}
.formButtons {
    float: right;
}

JavaScript

console.clear();
var $form = $('#testForm');
var $populateFeedback = $('#populateFeedback');
window.$form = $form;
var serializedString = "";

function populateForm ($form) {
    $form.find('[name="A"]').val("Hello World");   
    $form.find('[name="B"]').prop("checked", true);
    $form.find('[name="C"]').prop("checked", true);
    $form.find('[name="D"]').val(2);
    $form.find('[name="E"]').val("10,20,30");
    $form.find('[name="F"]').val("1 + 1 = 2");
    $form.find('[name="G"]').first().prop("checked", true);
    $form.find('[name="H"]').first().prop("checked", true);
    $form.find('[name="I"]').first().prop("checked", true);    
    $form.find('[name="J"]').val("In theory, theory and practice are the same. In practice, they’re not.");
}

$.fn.deserialize = function (serializedString) 
{
    var $form = $(this);
    $form[0].reset();
    serializedString = serializedString.replace(/\+/g, '%20');
    var formFieldArray = serializedString.split("&");
    $populateFeedback.slideDown().html('');
    $.each(formFieldArray, function(i, pair){
        var nameValue = pair.split("=");
        var name = decodeURIComponent(nameValue[0]);
        var value = decodeURIComponent(nameValue[1]);
        // Find one or more fields
        var $field = $form.find('[name=' + name + ']');
        console.log(name, value);
        $populateFeedback.append('<li>' + name + ' = ' + value + '</li>');      
        
        if ($field[0].type == "radio" 
            || $field[0].type == "checkbox") 
        {
            var $fieldWithValue = $field.filter('[value="' + value + '"]');            
            var isFound = ($fieldWithValue.length > 0);
            if (!isFound && value == "on") {
                $field.first().prop("checked", true);
            } else {
                $fieldWithValue.prop("checked", isFound);
            } 
        } else {
            $field.val(value);
        }
    });
}

// jQuery plugin for clearing form fields
//...