, ,

JavaScript – Stateful HTML Forms – Save and Recover HTML Form Data


<script language="javascript" type="text/javascript"><br />
/* <![CDATA[ */
var FS_INCLUDE_NAMES = 0, FS_EXCLUDE_NAMES = 1, FS_INCLUDE_IDS = 2, FS_EXCLUDE_IDS = 3, FS_INCLUDE_CLASSES = 4, FS_EXCLUDE_CLASSES = 5;
function retrieveCookie( cookieName ) {
/* retrieved in the format
cookieName4=value; cookieName3=value; cookieName2=value; cookieName1=value
only cookies for this domain and path will be retrieved */
var cookieJar = document.cookie.split( "; " );
for( var x = 0; x < cookieJar.length; x++ ) {
var oneCookie = cookieJar[x].split( "=" );<br />
if( oneCookie[0] == escape( cookieName ) ) { return unescape( oneCookie[1] ); }<br />
}<br />
return null;<br />
}<br />
function setCookie( cookieName, cookieValue, lifeTime, path, domain, isSecure ) {<br />
if( !cookieName ) { return false; }<br />
if( lifeTime == "delete" ) { lifeTime = -10; } //this is in the past. Expires immediately.<br />
/* This next line sets the cookie but does not overwrite other cookies.<br />
syntax: cookieName=cookieValue[;expires=dataAsString[;path=pathAsString[;domain=domainAsString[;secure]]]]<br />
Because of the way that document.cookie behaves, writing this here is equivalent to writing<br />
document.cookie = whatIAmWritingNow + "; " + document.cookie; */<br />
document.cookie = escape( cookieName ) + "=" + escape( cookieValue ) +<br />
( lifeTime ? ";expires=" + ( new Date( ( new Date() ).getTime() + ( 1000 * lifeTime ) ) ).toGMTString() : "" ) +<br />
( path ? ";path=" + path : "") + ( domain ? ";domain=" + domain : "") +<br />
( isSecure ? ";secure" : "");<br />
//check if the cookie has been set/deleted as required<br />
if( lifeTime < 0 ) { if( typeof( retrieveCookie( cookieName ) ) == "string" ) { return false; } return true; }
if( typeof( retrieveCookie( cookieName ) ) == "string" ) { return true; } return false;
}
function getFormString( formRef, oAndPass, oTypes, oNames ) {
if( oNames ) {
oNames = new RegExp((( oTypes > 3 )?'\\b(':'^(')+oNames.replace(/([\\\/\[\]\(\)\.\+\*\{\}\?\^\$\|])/g,'\\$1').replace(/,/g,'|')+(( oTypes > 3 )?')\\b':')$'),'');<br />
var oExclude = oTypes % 2;<br />
}<br />
for( var x = 0, oStr = '', y = false; formRef.elements[x]; x++ ) {<br />
if( formRef.elements[x].type ) {<br />
if( oNames ) {<br />
var theAttr = ( oTypes > 3 ) ? formRef.elements[x].className : ( ( oTypes > 1 ) ? formRef.elements[x].id : formRef.elements[x].name );<br />
if( ( oExclude && theAttr && theAttr.match(oNames) ) || ( !oExclude && !( theAttr && theAttr.match(oNames) ) ) ) { continue; }<br />
}<br />
var oE = formRef.elements[x]; var oT = oE.type.toLowerCase();<br />
if( oT == 'text' || oT == 'textarea' || ( oT == 'password' && oAndPass ) ) {<br />
oStr += ( y ? ',' : '' ) + oE.value.replace(/%/g,'%p').replace(/,/g,'%c');<br />
y = true;<br />
} else if( oT == 'radio' || oT == 'checkbox' ) {<br />
oStr += ( y ? ',' : '' ) + ( oE.checked ? '1' : '' );<br />
y = true;<br />
} else if( oT == 'select-one' ) {<br />
oStr += ( y ? ',' : '' ) + oE.selectedIndex;<br />
y = true;<br />
} else if( oT == 'select-multiple' ) {<br />
for( var oO = oE.options, i = 0; oO[i]; i++ ) {<br />
oStr += ( y ? ',' : '' ) + ( oO[i].selected ? '1' : '' );<br />
y = true;<br />
}<br />
}<br />
}<br />
}<br />
return oStr;<br />
}<br />
function recoverInputs( formRef, oStr, oAndPass, oTypes, oNames ) {<br />
if( oStr ) {<br />
oStr = oStr.split( ',' );<br />
if( oNames ) {<br />
oNames = new RegExp((( oTypes > 3 )?'\\b(':'^(')+oNames.replace(/([\\\/\[\]\(\)\.\+\*\{\}\?\^\$\|])/g,'\\$1').replace(/,/g,'|')+(( oTypes > 3 )?')\\b':')$'),'');<br />
var oExclude = oTypes % 2;<br />
}<br />
for( var x = 0, y = 0; formRef.elements[x]; x++ ) {<br />
if( formRef.elements[x].type ) {<br />
if( oNames ) {<br />
var theAttr = ( oTypes > 3 ) ? formRef.elements[x].className : ( ( oTypes > 1 ) ? formRef.elements[x].id : formRef.elements[x].name );<br />
if( ( oExclude \&\& theAttr && theAttr.match(oNames) ) || ( !oExclude && ( !theAttr || !theAttr.match(oNames) ) ) ) { continue; }<br />
}<br />
var oE = formRef.elements[x]; var oT = oE.type.toLowerCase();<br />
if( oT == 'text' || oT == 'textarea' || ( oT == 'password' && oAndPass ) ) {<br />
oE.value = oStr[y].replace(/%c/g,',').replace(/%p/g,'%');<br />
y++;<br />
} else if( oT == 'radio' || oT == 'checkbox' ) {<br />
oE.checked = oStr[y] ? true : false;<br />
y++;<br />
} else if( oT == 'select-one' ) {<br />
oE.selectedIndex = parseInt( oStr[y] );<br />
y++;<br />
} else if( oT == 'select-multiple' ) {<br />
for( var oO = oE.options, i = 0; oO[i]; i++ ) {<br />
oO[i].selected = oStr[y] ? true : false;<br />
y++;<br />
}<br />
}<br />
}<br />
}<br />
}<br />
}<br />
/* ]]> */<br />
</script>

Save form values script

Try it with this form; change some values, click ‘Save’, click ‘Reset’ or
change some more values, then click ‘Recover’.

Text:

Textarea:
Password:

Radio:
Checkbox:
Excluded: (credit card)
Excluded: (sort code)
Standard select:
Select size=4:
Multiple select:




Comments

Leave a Reply

Your email address will not be published. Required fields are marked *