Cookies created with Jquery via radio buttons not transferring

Question

Pretty simple. I have 3 radio buttons, I want people to choose one radio button, click the button to save the selection, and then go to the next page and use the cookie.

Currently have a text input box, and 3 radio buttons. The text input is working, the radio is not.

The idea i had going forward was whichever radio you choose, they're all the same name, they just have a different value set to them. Therefor the value assigned to them is saved as the cookie, and retrieved on the next page. Not working.

Sorry forgot JSfiddle - http://jsfiddle.net/3kfz7jdf/3/

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 = $('#choice').val() + ";expires=" + expDate.toGMTString();
        document.cookie = cookieStr;
        document.choice = cookieChar;
    });

});

I dont know if you need the retrieval page, but ill post that as well.

js-

$(function(){
        // display cookie 
        $('#cookieDisplay').html(document.cookie);
        $('#cookieDisplay').html(document.choice);
    });

Thanks ahead of time.

Answer 1

In the code JQuery.onclick is scheduled to run after window.location.href='Battle.html'.

To solve it, place relocation of browser at the end of cookie manipulations.

UPDATE:
I'm really sorry, I missed a major problem in the code: document.cookie stands for Cookies manipulations while document.choice is just a defined variable. While Browser uses Cookies as inter-domain variables, other variables are available in each document page.
I hope it helps.

$(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 = $('#choice').val() + ";expires=" + expDate.toGMTString();

        document.cookie = "cookieStr=" + cookieStr;
        document.cookie = "cookieChar=" + cookieChar;
        // now we relocate:
        window.location.href='Battle.html';
    });
});

to read the cookies for each parameter see (What is the shortest function for reading a cookie by name in JavaScript?)

and remove onclick parameter from input#saveCookie