Categories:

Home / Free JavaScripts / Forms / Here

Cut & Paste Rescue Text and TEXTAREA values script

Credit: JavaScript Kit

Description: 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, to the horror of the user. 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 (FF3.5+ only). The script works in IE6+, FF3.5+, Google Chrome and Safari 4+.

Note: This script only works on INPUT type="text" and TEXTAREA elements.

Example (refresh the page and notice how any data entered into the last two fields are preserved):

Name:

Address*:

Feedback*:

Click here to hard reload the page

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

Directions:

Step 1: Add the following code to the <HEAD> section of your page:

Be sure to download rescuefieldvalues.js (right click and select "Save As"), the external file referenced by the above code.

Step 2: Add the below sample form to your <BODY>:

Customizing

To get the script to remember and rescue the value of particular text or textarea fields, first, make sure to give those fields a unique ID in the form's markup, for example:

<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:200px">Your feedback here</textarea></p>
</form>

Then, following your form and preferably at the very end of the document, call the function rescuefieldvalues() with the ids of those fields you wish to rescue their values from the dead in the event of a browser refresh or crash:

<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>

And that's it! Your users can rest a little easier now knowing that the text they entered into the fields "address" and "feedback" will still be there if he/she accidently reloads the page or even after a browser crash (FF3.5+ only).


JavaScript Tools:
Site Info

CopyRight 1998-2014 JavaScript Kit. NO PART may be reproduced without author's permission.