Rescue text and textarea values

Written by @kerixa 25 February 2014

It is a useful script for developers and in the online filling forms. Sometimes during filling a online form, you may loss the entered data in the text box or text area ( due to error or connection lost) and you must fill those again. But by this script, the entered data will be saved and by returning to page, the last entered data will be shown.

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.htmlbestcodes.com coded by: Kerixa Inc. -->
<!-- this script got from www.htmlbestcodes.com-Coded by: Krishna Eydat -->
<html>
<head>
<script type="text/javascript">
function rescuefieldvalues(idarray){
	for (var i=0; i<idarray.length; i++){
		var el=document.getElementById(idarray[i])
		if (!/(text)/.test(el.type)) //skip to next element if it isn't a input type="text" or textarea element
			continue
		if (el.addBehavior && !window.sessionStorage){ //use IE behaviors to store info?
			el.style.behavior='url(#default#userData)'
			el.load("userentereddata")
		}
		var persisteddata=(window.sessionStorage)? sessionStorage[idarray[i]+'data'] : (el.addBehavior)? el.getAttribute('dataattr') : null
		if (persisteddata) //if rescued data found for this element
			el.value=persisteddata
		el.onkeyup=function(){
			if (window.sessionStorage)
				sessionStorage[this.id+'data']=this.value
			else if (this.addBehavior){
				this.setAttribute("dataattr", this.value)
				this.save("userentereddata")
			}
		} //onkeyup
	} //for loop
}
</script>
</head>
<body>
<form>
<p>Name: <input type="text"/></p>
<p>Address*: <input type="text" id="address" style="width:200px;" /></p>
<p>Feedback*:<br />
<textarea id="feedback" style="width:300px;height:150px">Your feedback here</textarea><br 
/>
<input type="submit" /></p>

<p><a href="javascript:location.reload(true)">Click here to hard reload the 
page</a></p>

* Data is preserved in the event of accidental browser refresh or browser crash 
(later is FF3.5 only)
</form>

<script type="text/javascript">
rescuefieldvalues(['address', 'feedback']) //rescue data entered for form fields "address" and "feedback"

</script>
<br/>
<div style="clear:both"></div><div><a target="_blank" href="http://www.htmlbestcodes.com/"><span style="font-size: 8pt; text-decoration: none">HTML Best Codes</span></a></div>
</body>
</html><a target='_blank' href='https://www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>

Example:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300