Rescue Text and Textarea Fields

Name*:

Address*:

Feedback*:
Fill in all three elements then reload page

[ See Default Settings ] [ Click here to hard reload the page ]

One of the worst things that can happen when a user is entering data into an INPUT type="text" or TEXTAREA element is an accidental browser reload or even crash- all the data is instantly lost. This script uses [ HTML5's sessionStorage ] to store the text entered into these fields as the user types, and recalls them in an event of a page refresh or even browser crash.

We have tested the code in IE 9.0, Firefox16.0.2, Aurora 18.0a2, Google Chrome 23.0.1271.64m, Netscape 9.0.0.6, Flock2.52, and AOL Explorer 1.5. This script worked well in all platforms with no variations observed.

For your Information: Before we begin, we feel obligated to advise you that the above form is for all intensive purposes a "Stand Alone" script. In other words, it really does not do much of anything other than what you see. In order to make it function as designed, you need to incorporate it into a valid working form. If you do not have a good Solid Knowledge of HTML coding, javascripts, forms and reconfigurations, please "Do Not Attempt" this until you are Proficient in the aforementioned areas.

Depending on your knowledge of HTML and javascripts, this is an easy three (3) part copy and paste code that goes in both the <HEAD> and <BODY> sections of your document. It also makes use of an external.js file (verifyAddress.js) script you need to save and upload into your directory.

Step One: You need to save the external.js file (rescuefieldvalues.js) and upload it into your directory.
There are NO reconfigurations to be made on rescuefieldvalues.js.

Step Two: You need to add a sniplet of code into the <HEAD> section of your document to call the external file (rescuefieldvalues.js) you uploaded into your directory.

Snipplet Of Code

<script type="text/javascript" src="rescuefieldvalues.js">
</script>

Note Of Importance: If you are not sure of howto make the external .js file and make use of it within your document, grab the below link and it is fully explained.
[ .js File Howto ]

For your Information: If you are not comfortable or prefer not to use the external.js file, you can use the traditional cut/copy and paste instead of the external .js file. If you need a little refresher on what is required to achieve this, grab the below link and it is fully explained.
[ Traditional Cut/Copy and Paste ]

Depending on which of the above methods you have selected (external.js file or Traditional Copy/Cut & Paste), you will add either the snipplet of code (after you have uploaded the external.js file) into the <HEAD> section or the completed section of code that you added the opening and closing script tags.

Snipplet Of Code
<script type="text/javascript" src="rescuefieldvalues.js">
</script> Traditional Copy/Cut and Paste
<SCRIPT LANGUAGE="JavaScript">

<HEAD> Section of code goes here

// End -->
</script>

External .js file

Traditional Copy/Cut & Paste Code with opening & closing tags that you had to add into the <HEAD> section of code that was originally earmarked to be an external .js file.

Step Three: Once you have completed either of the above steps for the <HEAD> section, all that is left is to incorporate the <BODY> section of code into a fully functional form.

For Your Information: The Default <BODY> section of code has two (2) elements configured to save the input values if something happens to the page. They are the "Address" and "Feedback" sections of the code. The "Name" section is not configured to save the input. In the Reconfigured <BODY> section of code all three (3) elements are configured to save the input values.

You can reconfigure as many elements as you want inside your form. Just follow the pattern.

Default <BODY> Section Two Elements

<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="style="width:300px;height:150px;">Your feedback here</textarea><br/>
<input type="submit" /></p>
</form>

<script type="text/javascript">
//call this function at the END of your page
//SYNTAX: rescuefieldvalues(['fieldid1 ', 'fieldid2', 'etc'])

rescuefieldvalues(['address', 'feedback' ]) //rescue data entered for form fields
"address" and "feedback"

</script>

Reconfigured <BODY> Section -- All Three Elements

<form>
<p>Name *: <input type="text" id="name"/></p>
<p>Address *: <input type="text" id="address" style="width:200px;" /></p>
<p>Feedback *:<br />
<textarea id="feedback" style="width:90%; height:150px;" ></textarea><br />
<input type="submit" /></p>

</form>

<script type="text/javascript">
//call this function at the END of your page
//SYNTAX: rescuefieldvalues(['fieldid1 ', 'fieldid1 ', 'fieldid3 ', 'etc'])

rescuefieldvalues(['name','address', 'feedback']) //rescue data entered for form fields
"name" "address" and "feedback"

</script></p>

Color Coded Character Legend

*: Denotes elements configured - Just something the author used
' Notice where the single quotes are located
" Notice where the double quotes are located
, Notice where the commas are and are not located
: Notice where the colons are located
; Notice where the semi colons are located
% Used the percentage only because the effect is inside a table

DO NOT substitute one for another

The site you will be getting the code has an excellent tutorial on this effect if you might need it.

We hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link and you are there. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ] [ Scripts In Conflict ]