Forum Moderators: open
<HTML>
<HEAD>
<STYLE>
.storeuserData {behavior:url(#default#userData);}
</STYLE>
<SCRIPT>
function fnSaveInput(){
var oPersist=oPersistForm.oSuperFly;
oPersist.setAttribute("sPersist",oPersist.value);
oPersist.save("oXMLBranch");
}
function fnLoadInput(){
var oPersist=oPersistForm.oSuperFly;
oPersist.load("oXMLBranch");
oPersist.value=oPersist.getAttribute("sPersist");
}
</SCRIPT>
</HEAD>
<BODY>
<FORM ID="oPersistForm">
<INPUT CLASS="storeuserData" TYPE="text" ID="oSuperFly">
<INPUT TYPE="button" VALUE="Load" onclick="fnLoadInput()">
<INPUT TYPE="button" VALUE="Save" onclick="fnSaveInput()">
</FORM>
</BODY>
</HTML>
// the function fnSaveInput
// saves value from "*formName"."fieldName" in var "0Persist"
// when called at onclick="fnSaveInput()"
//the function fnLoadInput
// loads stored value in var "0Persist" to "*formName"."fieldName"
// when called at onclick="fnLoadInput()"
You can use JavaScript to read and write the cookie by modifying the document.cookie property. Writing a cookie is fairly easy, but reading it is a little more difficult. I recommend reading up on cookies and string handling in the JavaScript reference of your choice.
I would suggest, if you want to record the results of more than one form, using one cookie for each. A cookie looks like this:
name=value
Simple, huh? So, if you have a form called myForm, you would have a cookie that looks like this:
myForm=all_the_data_from_the_form
When you read the document.cookie property, you get a list of all the cookies that apply to that document separated by semicolons. That means that your cookie values must not contain = or ; otherwise you will have problems. I might use a format like this:
myForm=fieldOne:valueOne+fieldTwo:valueTwo
This in turn means parsing text input fields and encoding all occurences of =, :, + and ; before assigning them to the cookie (see why things get complicated?).
The other part of the question involves how to store values of multiple form fields. There are four types:
Checkboxes and multiple select fields;
Radio buttons and single select fields (drop-down lists).
With checkboxes and multiple selects, more than one value can be selected. With radio buttons and drop-down lists, only one item can be selected.
Drop-down lists are easy: you just need the selectedIndex property.
Radio buttons are trickier because you have to check each element for the checked property. This function, for example, accepts an array of radio buttons, and returns either the index of the selected button, or -1 if none is selected:
function getRadioSelectedIndex(radioElement){
var selectedIndex=-1;
for(var i=0; i<radioElement.length; i++){
if(radioElement[i].checked){
selectedIndex=i;
break;
}
}
return selectedIndex;
}
Checkboxes and multiple select fields can have more than one element selected. The following function returns a string containing the indexes of all of the checked elements separated by commas:
function getMultipleSelectIndexes(element){
var retVal='';
for(var i=0; i<element.length; i++){
if(element.type=='checkbox'){
if(element[i].checked) retVal+=i+',';
}
else if(element[i].selected) retVal+=i+',';
}
return retVal;
}
You'll need to loop through each element in the form, testing its type property and taking the appropriate action to extract the values you want, constructing a string which you then assign as a cookie.
If that sounds complex, it is. It would probably be easier to do this server side with ASP or PHP.
