Cut & Paste Remember Text INPUT field values

Home / Free JavaScripts / Forms / Here

Cut & Paste Remember Text field values

Credit: JavaScript Kit

Description: Certain form fields always contain the same values, such as your user's name, email address fields etc. This script will remember the values entered into these fields, and automatically fill out these fields the next time the user returns. It uses cookies to persist the values for 60 days (changeable). For "Contact Us" or "Tell a Friend" forms that are filled out repeatedly by a user, this can save them a lot of time!

This script can only remember the values of text fields (INPUT TYPE="text"), and not TEXTAREA, for example, since a cookie cannot store vast amounts of info.

Example: The first two fields' values will be remembered when you submit the form (try reloading the page afterwards).

Directions:

Step 1: Cut and paste the below script into the <head> section of your page:

<script type="text/javascript"> /*********************************************** * Remember Text INPUT field values- by JavaScriptKit.com * This notice MUST stay intact for use * Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and more ***********************************************/ var remembervalues_days=60 //Remember text input values for how many days? var dyncookiename=encodeURI(window.location.pathname) //Name of cookie. Changes depending on the page. var recallinput=function(){ var cookienamevalue=rememberinput.getCookie(dyncookiename).split("##") for (var i=0; i<cookienamevalue.length; i++){ var cookiename=cookienamevalue[i].split("#")[0] var cookievalue=cookienamevalue[i].split("#")[1] if (document.getElementById(cookiename)!=null && document.getElementById(cookiename).type=="text") //if this text field has a stored value document.getElementById(cookiename).value=decodeURI(cookievalue) } } var rememberinput=function(){ var rememberit="" for (var i=0; i<arguments.length; i++){ if (document.getElementById(arguments[i]).type=="text" && document.getElementById(arguments[i]).value!="") //if this is a form text INPUT and not empty rememberit+=arguments[i]+"#"+encodeURI(document.getElementById(arguments[i]).value)+"##" } rememberinput.setCookie(dyncookiename, rememberit, remembervalues_days) } rememberinput.getCookie=function(Name){ //get cookie value var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair if (document.cookie.match(re)) //if cookie found return document.cookie.match(re)[0].split("=")[1] //return its value return "" } rememberinput.setCookie=function(name, value, days){ //set cookie value var expireDate = new Date() //set "expstring" to either future or past date, to set or delete cookie, respectively var expstring=expireDate.setDate(expireDate.getDate()+parseInt(days)) document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()+";"; } if (window.addEventListener) window.addEventListener("load", recallinput, false) else if (window.attachEvent) window.attachEvent("onload", recallinput) else if (document.getElementById) window.onload=recallinput </script>

Step 2: With the script installed, simply modify your form with the parts in red:

<form onSubmit="rememberinput('yourname', 'youremail')">

Name:*<br /><input type="text" id="yourname" size="25" /><br />

Email Address:*<br /><input type="text" id="youremail" size="25" /><br />

Feedback:<br />
<textarea cols="25" rows="6"></textarea>

<br />
<input type="submit" value="Submit" />

</form>

where "yourname", "youremail" etc are the IDs of the form input fields that you wish to remember. Enter as many fields as you wish (separated by a comma), though as mentioned, only text fields are allowed.

CSS Library | JavaScript & DHTML Menus

JavaScript Tools:

Site Info

CopyRight (c) 2018 JavaScript Kit. NO PART may be reproduced without author's permission. Contact Info