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

问题描述：

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.

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

  function getStorage（key_prefix）{
 if（window.localStorage）{
 return {
 set：function（id，data）{
 localStorage.setItem（key_prefix + id，data）; \  n}，
 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，函数（整数，键，值）{
解析[key] = unescape（value）; \  n}）; 
返回已解析的[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'）？' 选中'：'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'）; 
}）; 
 
}）; 
  code>  pre>  
 
 所以我只想在提交时保存到cookie。 p> 
  div>

答

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

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

相关推荐