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

[cgc90288]

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. <form
   
   >
   
2. <p
   
   >
   
3. Name &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
   
4. <input
   
   type
   
   =
   
   "text"
   
   placeholder=
   
   "Name....."
   
   style
   
   =
   
   "width:230px;"
   
   /
   
   >
   
5. </
   
   p
   
   >
   
6. 
   
7. <p
   
   >
   
8. Address *&nbsp;
   
9. <input
   
   type
   
   =
   
   "text"
   
   id
   
   =
   
   "address"
   
   placeholder=
   
   "Address....."
   
   style
   
   =
   
   "width:230px;"
   
   /
   
   >
   
10. </
    
    p
    
    >
    
11. 
    
12. <p
    
    >
    
13. Message *
    
14. <br
    
    /
    
    >
    
15. <textarea
    
    id
    
    =
    
    "message"
    
    placeholder=
    
    "Message....."
    
    style
    
    =
    
    "width:300px;height:150px"
    
    ></
    
    textarea
    
    >
    
16. <br
    
    /
    
    >
    
17. <input
    
    type
    
    =
    
    "submit"
    
    /
    
    >
    
18. </
    
    p
    
    >
    
19. 
    
20. <p
    
    >
    
21. <a
    
    href
    
    =
    
    "javascript:location.reload(true)"
    
    >
    
22. Click here to reload the page
    
23. </
    
    a
    
    >
    
24. </
    
    p
    
    >
    
25. </
    
    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. <form
   
   >
   
2. <p
   
   >
   
3. Address *&nbsp;
   
4. <input
   
   type
   
   =
   
   "text"
   
   id
   
   =
   
   "address"
   
   placeholder=
   
   "Address....."
   
   style
   
   =
   
   "width:230px;"
   
   /
   
   >
   
5. </
   
   p
   
   >
   
6. <p
   
   >
   
7. Message *
   
8. <br
   
   /
   
   >
   
9. <textarea
   
   id
   
   =
   
   "message"
   
   placeholder=
   
   "Message....."
   
   style
   
   =
   
   "width:300px;height:150px"
   
   ></
   
   textarea
   
   >
   
10. </
    
    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!!!

Download