Jquery cookie not being read, or recognized correctly

Question

I have two cookies in this form, one is Text, one is a radio button selection. The text cookie works fine, but the radio button does not.

How its supposed to work: Input text, make a selection, press button. Sends you to next page where the text is displayed, and the associated number of the radio button is displayed.

What is actually happening: Input text, make a selection, press buton. Sends you to next page where the text is displayed, but there is nothing from the radio button selection.

Thank you ahead of time.

JSfiddle - http://jsfiddle.net/q7nja8j9/

HTML -

<form action="javascript:void(0)">
    <input type="text" name="cookie" id="cookie" value="">
   <div id="pics">



   </div>
   <div id="radio">
   <input type="radio" name="char" id="char1" value="1">
   <input type="radio" name="char" id="char2" value="2">
   <input type="radio" name="char" id="char3" value="3">
   </div>
 <input type="button" name="Fight" id="saveCookie" value="Fight" onclick="window.location.href='Battle.html'">
 </form>

JS-

$(function(){
    // attach event listener to save cookie button
    $('#saveCookie').click(function(){
        // set cookie expiration to 1 year from today
        var expDate = new Date();
        expDate.setFullYear(expDate.getFullYear() + 1);
        // create cookie string
        var cookieStr = $('#cookie').val() + ";expires=" + expDate.toGMTString();
        // create cookie
        var cookieChar = $('input[name="char"]:checked').val() + ";expires=" + expDate.toGMTString();
        document.cookie = cookieStr;
        document.choice = cookieChar;
    });

});

Answer 1

I think this question is related: How do I create and read a value from cookie?

First of all you have document.choice = cookieChar; instead of document.cookie = cookieChar;

But from what I have tested it shouldn't work anyway as at the point you have document.cookie = cookieStr; the value of cookieStr is something like abc;expires=Tue, 15 Dec 2015 02:20:13 GMT, but you need to set a cookie name as well. So it should be:

document.cookie = 'cookieName=' + cookieStr;
document.cookie = 'char=' + cookieChar;

Is there any reason you're using cookies like this instead of POSTing the form to a server side script (eg. php)? This may help: http://books.msspace.net/mirrorbooks/php5/067232511X/ch04lev1sec2.html

Javascript cookies

You need to read this (at a minimum): http://www.w3schools.com/js/js_cookies.asp

document.cookies is not a simple string variable, if you try console.log(document.cookies) you'll see something like this:

"cookieName=abc; char=2; __utma=45159731; __utmc=45159731;"

Which is a concatention of all the cookies set for the page, the part before the = is the cookie name, the part after the = is the cookie value, and the semi-colons separate the cookies. If you set a cookie with no cookie name (as you are doing) the string will look like this:

"2; cookieName=abc; char=2; __utma=45159731; __utmc=45159731;"

Note the extra "2" at the start. This is why the second cookie is overwriting the first one - because you haven't specified a name for the cookie so it has just re-set the first cookie with the new value.