Question

因此。我有一个带有很多复选框的表单。除此之外，我还有一段javascript代码，用于在用户按下提交时保存每个复选框的状态。我的短暂和恼人的问题是两件事。问题：我只想在提交表单时将Checkbox状态保存到cookie，现在如果我标记一个复选框并重新加载页面，则会保存，而不提交。我正在使用Javascript和Cookies，这是我很新的两件事。所以我非常感谢所有的帮助。这是我从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');
    });

});

所以我只想在提交时保存到cookie。

Answer 1

绑定到表单的submit事件，而不是所有复选框的change事件。

尝试使用此代替您的第二个功能：

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');
        }
    });
});

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

1 个答案: