How To Rescue The Data In Text and Textarea Using HTML JavaScript

Submitted by: 
Language: 
Visitors have accessed this post 180 times.

Have you ever had troubles signing up in a browser? Let me state an example . You were signing up or trying to log in to a particular browser for a long period of time already then , the browser start refreshing again , as a result, all your sign up information were lost which leads you to do the first step yet again . This kind of problem can be solve through this tutorial.

In this tutorial we are going to learn How To Rescue Text and Textarea Values in a Script.
So, what is it all about?

One of the worst things that can happen when a user is entering the information/data into an <input type="text" /> or <textarea></textarea> element is when you are signing up the form and an accidental reload of the browser happens which causes all the data to be lost.

Note: This script only works on <input type="text" /> and <textarea></textarea> elements. The script works in IE6+, FF3.5+, Google Chrome and Safari 4+.

Directions:

First: Kindly add this code below to the HEAD section of your page.

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

Note: Be sure to DOWNLOAD the source code, for the external file it refer in the code above.

Second: Just add the simple form to the BODY section of your page.

  1. <p>
  2. Name &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  3. <input type="text" placeholder="Name....." style="width:230px;" />
  4. </p>
  5.  
  6. <p>
  7. Address *&nbsp;
  8. <input type="text" id="address" placeholder="Address....." style="width:230px;" />
  9. </p>
  10.  
  11. <p>
  12. Message *
  13. <br />
  14. <textarea id="message" placeholder="Message....." style="width:300px;height:150px"></textarea>
  15. <br />
  16. <input type="submit" />
  17. </p>
  18.  
  19. <p>
  20. <a href="javascript:location.reload(true)">
  21. Click here to reload the page
  22. </a>
  23. </p>
  24. </form>
  1. <script type="text/javascript">
  2. //put in the END of your page
  3. //rescuefieldvalues(['id1', 'id2', 'etc'])
  4.  
  5. rescuefieldvalues(['address', 'message']) //rescue data entered for form fields
  6. "address" and "message"
  7. </script>

For Customizing

To get the script to rescue the information/data in the particular text and textarea fields, first you have to make sure those fields that has individual unique ID in the form.

Example:

  1. <p>
  2. Address *&nbsp;
  3. <input type="text" id="address" placeholder="Address....." style="width:230px;" />
  4. </p>
  5. <p>
  6. Message *
  7. <br />
  8. <textarea id="message" placeholder="Message....." style="width:300px;height:150px"></textarea>
  9. </form>

Lastly, after your form and it will be placed at the very end of the document,call the function rescuefieldvalues() with your ID's of those fields you desire to rescue their information/data in the event of a browser refresh or in crash.

Note: You can create as many as you can, has a unique ID in the field of <input type="text"> and <textarea><.textarea>.

  1. <script type="text/javascript">
  2. //put in the END of your page
  3. //rescuefieldvalues(['id1', 'id2', 'etc'])
  4.  
  5. rescuefieldvalues(['address', 'message']) //rescue data entered for form fields
  6. "address" and "message"
  7. </script>

And that's all!!! The User can rest a little time now knowing that the information/data into the fields of ADDRESS and MESSAGE will still be there if he/she accidentally reload the page or the browser was crash.

I hope this simple work, may help you in your project.
Practice, and enjoy coding!!!


Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.