Remember form information (javascript)

This site is best viewed in a modern browser with JavaScript enabled.

sherryr

Is there a javascript function/code that will allow me to identify certain fields on my form to be remember so that when I customer comes back to my order form their name, address etc will be plugged in (cookie code or some kind?) obviously I don't want their item orders to be remembered and I am trying to avoid a register and login process.
Thanks

kromol

I don't think cookies are good choice, because they are sent with every HTTP request. Maybe it would be better to use Local Storage.
Anyway all data stored on client side will be cleared after clearing cache/cookies etc and may be not available in another browser.

IMHO: using server side code for authenticated users would be better for this.

sherryr

Hi, thanks for the message back. I am not familiar with local storage.. how does this integrate with an html form? Please provide more details.. I have a wordpress site with a form that uses javascript and php functions. Is there a way to incorporate a remember function?

kromol

What do you mean by integrating LocalStorage with HTML forms?
Local Storage allows you save any string data in key/value format. You can save only data you need, for example some form values.

localStorage.setItem(key, data);
localStorage.getItem(key);

sherryr

Sorry I guess I am asking does this code go in the javascript file and if so,
Is key the field name? I need to understand what I need to put in html form so that the form talks to the local storage and the local storage talks to the form..

Sup3rkirby

There is one thing I feel I should note about using localStorage, which would be that it does not work in IE7 (and earlier). It may not be an issue for you at all, but it's something I always have to consider for work related coding so I thought I'd mention it.

Now to explain, localStorage is set and controlled by javascript. You can use it to store each field name that you wish to remember, and when loading the page later, you can simply have a bit of javascript that checks to see if any of those fields were saved in localStorage, and if so populate them appropriately.

function _SaveFields($a) {
  if(localStorage !== null && localStorage !== undefined) {
    localStorage.setItem("name", $a["name"].value);
    localStorage.setItem("address", $a["address"].value);
    // And so on...
  }
}

If you wanted to use this function you would make one small adjustment to your form, which would be to set the 'onsubmit' event so that it loads this function, passing itself (the form) into the function.

<form name="myForm" action="some_file.php" method="POST" onsubmit="_SaveFields(this)">

sherryr

Thank you for pointing out the IE compatibility and for explaining this in greater detail.

I created a js file titled remember (remember.js) and uploaded on my server
In my form I pointed to the remember.js file (like my other js files)
I left the code you posted above the same as I have an address field

Next I added the _SaveFields (this) reference to my submit code

I filled in info and submitted the form. I then went back and refreshed the form in hopes that the address would show up (remember) but the field was empty.. what am I doing wrong?

Sup3rkirby

You aren't doing anything wrong (that I'm aware of). But in order to have the data load back into the fields you must next use localStorage.getItem(), which I hadn't included only because it would be specific to each field you save.

More than likely you would just have a function added to your page and you can trigger this function with the window.onload event. In this function you would just set the value of each field to it's corresponding .getItem() (using the same name from when you used .setItem()).

When I get home from work I can try to whip up some code for you to use if you need me to.

sherryr

that would be great, when you get time thanks!

Sup3rkirby

Since I don't know all of the fields (and field names) you originally used when implementing the .setItem() method, I'll have to base this off of my original code. I assume you'll be able to modify it to add any additional fields you want (or change field names if they are incorrect). Anyone, to load these fields back onto the form, you'd add something like this:

window.onload = function() {
  if(localStorage !== null && localStorage !== undefined) {
    document.forms[0]["name"].value = (localStorage.getItem("name") !== null && localStorage.getItem("name") !== undefined) ? localStorage.getItem("name") : "";
    document.forms[0]["address"].value = (localStorage.getItem("address") !== null && localStorage.getItem("address") !== undefined) ? localStorage.getItem("address") : "";
    // And so on...
  }
}

Now, also because I don't know that your form has a 'name' or 'id' set, I can't directly identify your form, so I used a more relative method (document.forms index). This code may not work as-is, depending on if there are other forms on the page (and the order of the forms, if there are multiple). Also, make sure to match up the field names appropriately. Other than that, this code will automatically check to see if a value has been stored and if so, place it in the field.

Depending on the number of fields you are trying to save/load, this could be optimized by having an array of all the field names you wish to store, and looping through them (rather than doing it 1 per line).

rtrethewey

Keep in mind that there is no specification for the persistence of Local Storage. While it does allow you to save more complex data than cookies, it isn't any more reliable. I understand that you want to make it easier for users, but there's a 'spookiness' factor to consider, too. Some users are liable to be a bit uncomfortable when your site knows their name and other personal information when they haven't identified themselves by logging in.

On the whole, I'd recommend going with a conventional log-in process. You'd largely be duplicating the auto-complete capability already in most browsers that remembers how certain form fields have been filled in before, anyway.

sherryr

I thought I sent a post yesterday but must not have hit reply

So on my form (which I am still formatting and working on)
http://www.webcrawldesigns.com/dct/order-form/

I have the code plugged in like you specified but for some reason it is only "storing" the address field entry.

in my remember.js file

function _SaveFields($a) {
if(localStorage !== null && localStorage !== undefined) {
localStorage.setItem("company", $a["company"].value);
localStorage.setItem("company", $a["contact"].value);
localStorage.setItem("address", $a["address"].value);
localStorage.setItem("city", $a["city"].value);
// And so on...
}
}

window.onload = function() {
if(localStorage !== null && localStorage !== undefined) {
document.forms[1]["company"].value = (localStorage.getItem("company") !== null && localStorage.getItem("company") !== undefined) ? localStorage.getItem("company") : "";
document.forms[1]["contact"].value = (localStorage.getItem("contact") !== null && localStorage.getItem("contact") !== undefined) ? localStorage.getItem("contact") : "";
document.forms[1]["address"].value = (localStorage.getItem("address") !== null && localStorage.getItem("address") !== undefined) ? localStorage.getItem("address") : "";
document.forms[1]["city"].value = (localStorage.getItem("city") !== null && localStorage.getItem("city") !== undefined) ? localStorage.getItem("city") : "";
// And so on...
}
}

Sup3rkirby

Well, I'll first bring to your attention the small issue with the save function (highlighted issue with red):

function _SaveFields($a) {
	if(localStorage !== null && localStorage !== undefined) {
		localStorage.setItem("company", $a["company"].value);
		[B][COLOR="#FF0000"]localStorage.setItem("company", $a["contact"].value);[/COLOR][/B]
		localStorage.setItem("address", $a["address"].value);
		localStorage.setItem("city", $a["city"].value);
		// And so on...
	}
}

But to be fair, that's only one field that would seem to be missing.

Anyway, I'd have to ask if you are completely certain it's only saving the address field? While I didn't actually run a full submit of the form (as to not push fake data through your system), I did run the _SaveFields() function (and inserted your form as an argument). So there should be no difference in the function executing. But the thing is, aside from the contact field, the other information I entered was loaded into the correct fields when I refreshed the page. Perhaps this could be a caching issue for you and so I'd first suggesting hitting Ctrl + F5 on the page to do a 'hard refresh' and see if that resolves the issue for you.