Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder
    Join Date
    Oct 2010
    Posts
    272
    Thanks
    8
    Thanked 1 Time in 1 Post

    Saving form data to cookies

    I've been trying to solve this problem for about a week now with no luck. I'm trying to save a value from a form field to a cookie onclick="updatePricingFunction() but when I click the updatePricingFunction button attached to the onclick, the value doesn't change to the new number. At the moment I'm trying to get it working only with the first field that says Before Noon Can anyone help me with this?

    Code:
    function updatePricingFunction()
     {
          //To get a value in a text field, you must have your variable equals
          //document.forms["(form name here)"]["(name of the text field here)"].value
          var beforeNoonField = document.forms["myform"]["sampletext"].value;//This gets your value 
          document.cookie = "beforeNoonCookie=" + beforeNoonField; // Create the cookie
     }
    Here is the site in action: JS Bin - Collaborative JavaScript Debugging

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,027
    Thanks
    79
    Thanked 4,436 Times in 4,401 Posts
    Wrong:
    document.cookie = "beforeNoonCookie=" + beforeNoonField;
    Right:
    document.cookie( "beforeNoonCookie=" + beforeNoonField );

    CAUTION: If you don't specify an expires= time, the cookie will expire when the session expires (when the browser is closed, sometimes before that).
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Regular Coder
    Join Date
    Oct 2010
    Posts
    272
    Thanks
    8
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Old Pedant View Post
    Wrong:
    document.cookie = "beforeNoonCookie=" + beforeNoonField;
    Right:
    document.cookie( "beforeNoonCookie=" + beforeNoonField );

    CAUTION: If you don't specify an expires= time, the cookie will expire when the session expires (when the browser is closed, sometimes before that).
    I changed it to this document.cookie( "beforeNoonCookie=" + beforeNoonField, 10000); which I believe says it will expire in 10000 days. Correct me if I'm wrong though. Also It didn't fix my problem because the field beforeNoonField doesn't change to the new value when I click set cookie??

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,027
    Thanks
    79
    Thanked 4,436 Times in 4,401 Posts
    Where did you ever get that idea about the expires time??? No. It has to be a specifically formatted string.
    See here: JavaScript Cookies

    As to why it then doesn't set the cookie: How can we guess without seeing all the code you are using.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Regular Coder
    Join Date
    Oct 2010
    Posts
    272
    Thanks
    8
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Old Pedant View Post
    Where did you ever get that idea about the expires time??? No. It has to be a specifically formatted string.
    See here: JavaScript Cookies

    As to why it then doesn't set the cookie: How can we guess without seeing all the code you are using.
    I set an expired time because you said
    "CAUTION: If you don't specify an expires= time, the cookie will expire when the session expires (when the browser is closed, sometimes before that)."
    and I added a link to here to show all my code: JS Bin - Collaborative JavaScript Debugging

  • #6
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,376
    Thanks
    11
    Thanked 592 Times in 572 Posts
    use localStorage instead of cookies for this type of thing; it's simpler, more reliable, and works on more devices.

    to save:
    document.cookie = "beforeNoonCookie=" + beforeNoonField; // Create the cookie
    would become
    localStorage.beforeNoonCookie= beforeNoonField;

    and to read alert(localStorage.beforeNoonCookie)
    Last edited by rnd me; 07-25-2014 at 03:17 PM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • #7
    Regular Coder
    Join Date
    Oct 2010
    Posts
    272
    Thanks
    8
    Thanked 1 Time in 1 Post
    I got it working thanks for all the help.
    Last edited by andynov123; 07-26-2014 at 09:39 AM.

  • #8
    Regular Coder
    Join Date
    Oct 2010
    Posts
    272
    Thanks
    8
    Thanked 1 Time in 1 Post
    Actually I noticed another issue when adding the pricing to localStorage to other fields. If I set the price for the beforeNoonNPSlot to 2, but I leave the field blank for the matineeNPSlot(it should keep whatever price was assigned to it last) Then after I update the changes. The Before Noon Price is $2.00 like it should be, but the matineeNPSlot is $NaN like image attached

    Code:
    function updatePricingFunction()
     {
    var beforeNoonFieldChange = document.getElementById('beforeNoonNPSlot').value;
    var matineeFieldChange = document.getElementById('matineeNPSlot').value;
    
    localStorage.setItem('text', beforeNoonFieldChange);
    localStorage.setItem('text1', matineeFieldChange);
    
    
     }
     
     function load(){
    	 var storedValue = localStorage.getItem('text');
    	 var storedValue1 = localStorage.getItem('text1');
    
    		beforenoonprice = storedValue;
    		 matineeprice = storedValue1;
    		  beforeNoonCPSlot.innerHTML = "$" + parseFloat(storedValue).toFixed(2);
    		$("#beforeNoonPrice").attr = parseFloat(storedValue).toFixed(2);
    		
    $('#beforeNoonPrice').append("$" + (storedValue * 1).toFixed(2));
    
     matineeCPSlot.innerHTML = "$" + parseFloat(storedValue1).toFixed(2);
    		$("#matineePrice").attr = parseFloat(storedValue1).toFixed(2);
    		
    $('#matineePrice').append("$" + (storedValue1 * 1).toFixed(2));
    
    }
    Attached Thumbnails Attached Thumbnails Saving form data to cookies-untitled.jpg  

  • #9
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,376
    Thanks
    11
    Thanked 592 Times in 572 Posts
    if you always use the stored values, you will want to assign defaults to un-stored values, like are encountered in a first-run, or as you describe.
    most "getSetting()"-type functions in other languages even give you a slot for defaults, but localStorage itself doesn't.
    luckily, it's easy enough to do in js using the "default" operator (||), which used after a localStroage assignment, will be choosen if these is no saved setting, or if the saved one is blank for some reason:

    Code:
    var storedValue = localStorage.getItem('text');
    becomes

    Code:
    var storedValue = localStorage.getItem('text') || 0;
    or even simpler,
    Code:
    var storedValue = localStorage.text || 0;
    of course, you can default to anything besides 0, this is just how it looks in the source...

    bonus thought: you can even use defaults to hit or avoid function calls:
    Code:
    var storedValue = localStorage.text || prompt("Enter Before Noon Value") || 0;
    which asks the user if nothing is saved, and if the user cancels, defaults to 0.
    i wouldn't actually use prompt() on a public page, but it demos that you can do many defaults and default to a function call to do more complex things just-in-time if needed.
    Last edited by rnd me; 07-27-2014 at 07:33 PM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •