jQuery:从参数字符串设置表单状态
jQuery: setting a form state from a params string
我需要将表单的状态保存在cookie中,以便可以记住给定用户的设置。 我正在使用jQuery,我的计划是:
Saving:
//generate a param string from the form settings
var paramString = $.param($("#my-form").serializeArray());
//save it to a cookie
$.cookie("my-form-cookie", paramString);
Loading:
//get the cookie value
var savedParams = $.cookie("my-form-cookie")
//turn it into an object with field names as keys and field values as values
var formObject = JSON.parse('{"' + decodeURI(savedParams).replace(/"/g, '''"').replace(/&/g, '","').replace(/=/g,'":"') + '"}')
//go through this, modifying the form
...
这是目前拼图中缺失的部分。
我打算做的是这样的事情(伪代码而不是js)
for every key/value pair (key,value)
find element(s) with name = key
if there's more than one, it's probably radio buttons/checkboxes:
- check the one with value = value and uncheck the rest
if there's exactly one
- set the value = value
在我开始编写一个函数来执行此操作之前,它采用表单 id 和一个参数样式的字符串,我认为其他人要么 a) 以比我更彻底的方式完成此操作,要么 b) 尝试并决定这是一个坏主意,或者注定要失败。
有人有任何意见,关于a)或b)?
谢谢! .max
这是我最终做的事情。 它有明确的清理范围,但它似乎工作正常。 它处理嵌套参数和数组样式参数。 当用于恢复状态时,您可以添加一类dont-cookie
来形成您不希望从 cookie 中设置的元素。
//convert the form's state to a params string and save it to a cookie with the
//name form-<form_id>. Note that all form values are saved to
//the cookie, even the ones with .dont-save (these are ignored on load though)
function saveFormStateToCookie(form, cookie){
//jqueryfy the form if it's not already
if(typeof(form) != "object")
form = $(form);
if(typeof(cookie) == "undefined")
cookie = formCookieName(form);
//console.log("using cookie name '"+cookie+"'");
var paramString = $.param(form.serializeArray());
//console.log("saving: (unescaped)'n"+unescape(paramString));
$.cookie(cookie, paramString, {path: "/"});
}
function loadFormStateFromCookie(form, cookie){
//jqueryfy form if it's not already
if(typeof(form) != "object")
form = $(form);
if(typeof(cookie) == "undefined")
cookie = formCookieName(form);
//console.log("using cookie name '"+cookie+"'");
//get the cookie value
var paramString = $.cookie(cookie);
//console.log("loaded:(unescaped)'n"+unescape(paramString));
//what if it's blank, or the cookie doesn't exist?
if(paramString){
//turn it into an object with field names as keys and field values as values
var formObject = QueryStringToHash(paramString);
var elements, checkableElements, matchedElement;
var changedElements = [];
//set all checkboxes and radio buttons in the form to be blank
form.find("[type='radio'], [type='checkbox']").not(".dont-cookie").removeAttr('checked');
//go through this, modifying the form
$.each(formObject, function(name,values){
//note: value can be an array of values or a string. Let's make it always an array, to be consistent
if(typeof(values) === "string"){
values = [values];
}
//find all elements matching the name.
elements = form.find("[name='"+name+"']").not(".dont-cookie");
if(elements.size() > 0){
//iterate over values
$.each(values, function(i,value){
//is there a checkbox/radio with this value, which ISN'T in changedElements?
var checkboxes = elements.filter("[type='radio'], [type='checkbox']").filter("[value='"+value+"'], [value='"+value.replace(/'+/g, " ")+"']").filter(function(i){ return changedElements.indexOf($(this)) === -1});
//yes there is - check it and add it to changedElements
if(checkboxes.size() > 0){
$.each(checkboxes, function(j,checkbox){
checkbox = $(checkbox);
checkbox.attr("checked", "checked");
changedElements.push(checkbox);
});
} else {
//THIS IS WIPING OVER ALL THE CHECKBOXES: WE NEED TO JUST DO IT TO NON-CHECKBOXES
//no there isn't: set their val to value, then add them to changedElements
$.each(elements.not("[type='radio'], [type='checkbox']"), function(i, element){
element = $(element);
element.val(value);
changedElements.push(element);
});
}
});
}
});
} else {
//console.log("Couldn't find a cookie matching "+cookie);
}
}
相关文章:
- 通过JavaScript设置表单目标
- 在提交时设置表单隐藏值
- 无法使用bindingResult设置表单元素
- 设置表单上文本框的边框颜色
- 如何从服务器获取和设置表单的默认值
- JQuery val()在设置表单值时引发运行时错误
- 如何使用Javascript设置表单元素的值
- Flask wtf.quick_form运行一些 JavaScript 并设置表单变量
- JavaScript - 在“for”循环中设置表单输入属性
- jQuery:从参数字符串设置表单状态
- 无法通过 javascript 设置表单操作(错误:对象不支持此属性或方法)
- 使用 javascript 设置表单值
- 如何使用来自 iframe 父级的 javascript 设置表单的元素值
- 如何设置表单中文本字段的初始值?此值是从 JavaScript 函数生成的.如何在没有 botton 的情况下定义事件
- 复选框列出数据绑定并设置表单提交的复选框
- 在 asp.net 中设置表单元素默认值
- 设置表单验证功能时遇到问题
- 通过选定的选项属性设置表单输入属性
- 如何使用 CSS 设置表单样式
- 根据用户填写的字段动态设置表单操作