javascript - Serializing and deserializing a form with its current state - Stack Overflow

admin管理员组

文章数量:1415467

I have this form

<form id=my_form>
    <input id=mt type=text><input id=mc type=checkbox><textarea id=mta /> 
</form>

I want to have a button somewhere else, that can serialize the form WITH its state, that is, if the textarea has a content, or the text has a content or the checkbox is pressed, I want that information to be stored somehow in the string. Later, I would like to restore the information in the form using that string.

I tried with .innerHTML and it didn't work, I always got the original HTML.

I also looked at the serialize method of jQuery, but I was not able to deserialize it "inside" the form.

Thank you in advance!

Kurt

I have this form

<form id=my_form>
    <input id=mt type=text><input id=mc type=checkbox><textarea id=mta /> 
</form>

I want to have a button somewhere else, that can serialize the form WITH its state, that is, if the textarea has a content, or the text has a content or the checkbox is pressed, I want that information to be stored somehow in the string. Later, I would like to restore the information in the form using that string.

I tried with .innerHTML and it didn't work, I always got the original HTML.

I also looked at the serialize method of jQuery, but I was not able to deserialize it "inside" the form.

Thank you in advance!

Kurt

• javascript
• jquery
• dom
• serialization
• webforms

Share Improve this question Follow asked Oct 1, 2013 at 6:59 Hans FledermausHans Fledermaus 26111 gold badge33 silver badges99 bronze badges 1

• 6 name attribute missing in the form elements. – Tushar Gupta - curioustushar Commented Oct 1, 2013 at 7:01

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

I've made examples for you. Tested - working fine.
You need jQuery library
First here goes the form:

<form id="my_form">
    <input id="formText" type="text" name="formText" />
    <br />
    <label><input id="formCheck" type="checkbox" name="formCheck" /> check 1</label>
    <br />
    <label><input id="formCheck2" type="checkbox" name="formCheck2" /> check 2</label>
    <br />
    <textarea name="formTextarea" id="formTextarea" cols="20" rows="3"></textarea> 
    <br />

    <label><strong>Time unit</strong>:</label>
    <p>
        <label><input type="radio" name="dataView" value="week" checked="checked" /> Week</label>
        <label><input type="radio" name="dataView" value="month" /> Month</label>
        <label><input type="radio" name="dataView" value="year" /> Year</label>
    </p>


    <input type="button" value="Serialize" onclick="serializeForm()" />
    <input type="button" value="Unserialize" onclick="restoreForm()" />

</form>

After clicking buttons, corresponding function are called in js
And here is the js:
Serialized data is stored in formData variable, and if needed you can store it in cookie, in database etc... And later load it, regarding your requirements

<script type="text/javascript">

    var formData;            

    function  serializeForm() {
        formData = $('#my_form').serialize();
    }           

    function restoreForm() {
        var obj = unserializeFormData(formData);

        // Restore items one by one
        if(obj.hasOwnProperty('formTextarea')) {
            $('#formTextarea').val(obj.formTextarea);
        }

        if(obj.hasOwnProperty('formText')) {
            $('#formText').val(obj.formText);
        }

        // Radio buttons
        if(obj.hasOwnProperty('dataView'))
            $('input[value="'+obj.dataView+'"]').attr('checked', true);


        // Restore all checkbox. You can also iterate all text fields and textareas together, because the have same principle for getting and setting values by jQuery 
        $('#my_form input[type="checkbox"]').each(function(){
            var checkName = $(this).attr('name');
            var isChecked = false;
            if(obj.hasOwnProperty(checkName))
                isChecked = true;
            $(this).attr('checked',isChecked); 
        });

    }            


    function unserializeFormData(data) {
        var objs = [], temp;
        var temps = data.split('&');

        for(var i = 0; i < temps.length; i++){
            temp = temps[i].split('=');
            objs.push(temp[0]);
            objs[temp[0]] = temp[1]; 
        }
        return objs; 
    }

</script>

本文标签： javascriptSerializing and deserializing a form with its current stateStack Overflow