仅在提交时使用javascript保存表单状态

Question

So. I have a Form with a lot of checkboxes. Along with that I have a piece of javascript code that is supposed to save the state of every checkbox when the user presses submit. My short and irritating problem is two things. Question: I want to save Checkbox state to cookie ONLY when I submit the form, right now it saves if I mark a checkbox and reload the page, without submitting. Im working with Javascript and Cookies, two things that Im quite new to. So Im very greatful for all help. Here is my code that I got from here:

function getStorage(key_prefix) {
    if (window.localStorage) {
        return {
            set: function(id, data) {
                localStorage.setItem(key_prefix+id, data);
            },
            get: function(id) {
                return localStorage.getItem(key_prefix+id);
            }
        };
    } else {
        return {
            set: function(id, data) {
                document.cookie = key_prefix+id+'='+encodeURIComponent(data);
            },
            get: function(id, data) {
                var cookies = document.cookie, parsed = {};
                cookies.replace(/([^=]+)=([^;]*);?\s*/g, function(whole, key, value) {
                    parsed[key] = unescape(value);
                });
                return parsed[key_prefix+id];
            }
        };
    }
}

jQuery(function($) {
    var storedData = getStorage('com_mysite_checkboxes_'); 

    $('div.check input:checkbox').bind('change',function(){
        storedData.set(this.id, $(this).is(':checked')?'checked':'not');
    }).each(function() {
        var val = storedData.get(this.id);
        if (val == 'checked') $(this).attr('checked', 'checked');
        if (val == 'not') $(this).removeAttr('checked');
        if (val == 'checked') $(this).attr('disabled','true');
        if (val) $(this).trigger('change');
    });

});

So I want to save to cookie only on submit basically.

Answer 1

Bind to the submit event of the form instead of the change event of all the checkboxes.

Try this in place of your second function:

jQuery(function($) {
    // bind to the submit event of the form
    $('#id-of-your-form').submit(function() {
        // get storage
        var storedData = getStorage('com_mysite_checkboxes_');

        // save checkbox states to cookie
        $('div.check input:checkbox').each(function() {
            // for each checkbox, save the state in storage with this.id as the key
            storedData.set(this.id, $(this).is(':checked')?'checked':'not');
        });
    });

});

jQuery(document).ready(function() {
    // on load, restore the checked checkboxes
    $('div.check input:checkbox').each(function() {
        // get storage
        var storedData = getStorage('com_mysite_checkboxes_');

        // for each checkbox, load the state and check it if state is "checked"
        var state = storedData.get(this.id);

        if (state == 'checked') {
            $(this).attr('checked', 'checked');
        }
    });
});