CODEWITHSUNDEEP
javascriptcookies
justin henricks
justin henricks

Reputation: 467

Store cookies as a user progresses through a form

I am trying to figure out the best way to go about this. I have a form with a bunch of input fields eg. first name, last name, address, etc. My question is what is the best method to go about storing cookies as the user is entering data and progressing through the form.

My first thoughts were to use the onchange event and call a create cookie function, but my worry is that if the user were to change a field twice would two cookies be made even though they were passed in the same name? Or would the first one with the same name be overridden?

Thank you

Upvotes: 0

Views: 298

Answers (5)

justin henricks
justin henricks

Reputation: 467

Through a little experimentation, creating a cookie with simply document.cookie and a name= value pair and then updating the cookie using the same name and a different value does not create two cookies, it does indeed just update the first one. So my onchange idea is seemingly working fine. Through the experience I have also found that local document.cookies do not seem to work on google chrome, but function just fine in mozilla firefox.

Upvotes: 0

Isaac Chansky
Isaac Chansky

Reputation: 65

Depending on your browser-compatibility requirements, you might look into something like local storage instead of setting and resetting cookies

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage

Or, as others have suggested, serialize the full form in a single cookie.

Upvotes: 0

Ryan J
Ryan J

Reputation: 8323

Cookies are stored on the user's local machine as key-value pairs, with an optional expiration period (the amount of time before the cookie is no longer "valid").

Depending on your key naming choice, it will persist as long as it hasn't had its value changed or has been explicitly cleared.

You could do this with an onchange event, and just use the form field ID as the key and the entered text as the value.

Though it might be a better idea to store the entire form as a cookie using jQuery.

Upvotes: 0

James McDonnell
James McDonnell

Reputation: 3710

Depending on the usage you're looking for a cookie may not be what you're looking for. Let us know what you want to do and we'll help you get your solution. In any case:

You can create and destroy cookies with javascript: http://www.w3schools.com/js/js_cookies.asp

To update a cookie you would delete the cookie and recreate it.

However I would posit that you probably don't need cookies. You could store all your data in hidden fields and send them on form submission. Or send them to the server with ajax and have the server store them in the session.

Upvotes: 0

gontrollez
gontrollez

Reputation: 6548

Do you really need to create a separate cookie for every form field? You could have a method that serializes the whole form, and stores all the data in a cookie.

With jQuery, you can use the .serialize() method:

http://api.jquery.com/serialize/

And you can also use the jquery-cookie for storing the data in the cookie:

https://github.com/carhartl/jquery-cookie

Upvotes: 1

Related Questions