saving and reloading a form with cookies using javascript
<p>Hello I am very new to this so I am sure my code is not optimal in any way. I am trying to save data that was inputted into a form then reload and fill out the form with the use of a cookie. When viewing the cookies in my browser I can see that the data is being saved to the cookie but it is not loading properly. I think the issue begins with the  I do not think I am properly saving or grabbing this information and I would then assume I made similar mistakes on the other select and radio button inputs. Could anyone please point me in the right direction.</p>

<p>****HTML:**** </p>

<pre><code>&lt;html&gt;
&lt;head&gt;
    &lt;link id="theme" href="webdefault.css" rel="stylesheet" type="text/css"/&gt;
    &lt;link rel="shortcut icon" type="image/x-icon" href="pics/snow.ico"&gt;
    &lt;title&gt;Registration&lt;/title&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta name="keywords" content="Week 2, conference, web, site" /&gt;
    &lt;meta name="description" content="Conference Web Site 9 pages" /&gt;
    &lt;meta name="author" content="Kyle Kawasaki"&gt;        
    &lt;meta name="robots" content="noindex, nofollow"&gt;
&lt;/head&gt;
&lt;body onload="loadCookies(); loadRegistration()"&gt;

        &lt;nav id="nav"&gt;&lt;b&gt;
            &lt;a href="index.html" title="Home"&gt;Home&lt;/a&gt;
            &lt;a href="awards.html" title="Awards"&gt;Awards&lt;/a&gt;
            &lt;a href="activities.html" title="Activities"&gt;Activities&lt;/a&gt; 
            &lt;a href="meals.html" title="Meals"&gt;Meals&lt;/a&gt;
            &lt;a href="keynote.html" title="Keynote"&gt;Keynote&lt;/a&gt;
            &lt;a href="workshopschedule.html" title="WorkShopSchedule"&gt;Schedule&lt;/a&gt;
            &lt;a href="registration.html" title="Registration"&gt;Registration&lt;/a&gt;&lt;/b&gt;
            &lt;button id="black" onclick="changetheme('webdefault.css')"&gt;Black Theme&lt;/button&gt;
            &lt;button id="green" onclick="changetheme('style2.css')"&gt;Green Theme&lt;/button&gt;
        &lt;/nav&gt;

        &lt;h1 id="h1"&gt;Conference Registration&lt;/h1&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;

    &lt;div class="reg"&gt;
        &lt;form action="thankyou.html" method="get" name="registrationForm"&gt;
            &lt;label for="Title"&gt;Title&lt;/label&gt;
            &lt;select id="title"&gt;
                &lt;optgroup label="Title"&gt;
                    &lt;option value="Mr."&gt;Mr.&lt;/option&gt;   
                    &lt;option value="Mr."&gt;Ms.&lt;/option&gt; 
                    &lt;option value="Mr."&gt;Mrs.&lt;/option&gt;  
                &lt;/optgroup&gt;
            &lt;/select&gt;

            &lt;span&gt;
            &lt;label for="fname"&gt;First Name&lt;/label&gt;
            &lt;input type="text" id="fname" name="firstname" pattern="[a-zA-Z]+" placeholder="John" required&gt;&lt;/span&gt;
            &lt;div class="hover"&gt;Who are you&lt;/div&gt;

            &lt;span&gt;
            &lt;label for="lname"&gt;Last Name&lt;/label&gt;
            &lt;input type="text" id="lname" name="lastname" pattern="[a-zA-Z\-]+" placeholder="Doe" required&gt;&lt;/span&gt;
            &lt;div class="hover"&gt;I see&lt;/div&gt;

            &lt;span&gt;
            &lt;label for="address1"&gt;Address line 1&lt;/label&gt;
            &lt;input type="text" id="add1" name="address1" pattern="[a-zA-Z0-9\ \#]+" placeholder="123 bla bla" required&gt;&lt;/span&gt;
            &lt;div class="hover"&gt;Tell me NOW&lt;/div&gt;

            &lt;span&gt;
            &lt;label for="address2"&gt;Address line 2&lt;/label&gt;
            &lt;input type="text" id="add2" name="address2" pattern="[a-zA-Z0-9\ \#]+" placeholder="bla bla bla"&gt;&lt;/span&gt;
            &lt;div class="hover"&gt;Are you done?&lt;/div&gt;

            &lt;span&gt;
            &lt;label for="City"&gt;City&lt;/label&gt;
            &lt;input type="text" id="city" name="city" pattern="[a-zA-Z\ ]+" placeholder="City" required&gt;&lt;/span&gt;
            &lt;div class="hover"&gt;Where!!&lt;/div&gt;

            &lt;label for="State" id = "state"&gt;State&lt;/label&gt;
            &lt;select name="state"&gt;
                &lt;option value="AL"&gt;Alabama&lt;/option&gt;
                &lt;option value="AK"&gt;Alaska&lt;/option&gt;
                &lt;option value="AZ"&gt;Arizona&lt;/option&gt;
                &lt;option value="AR"&gt;Arkansas&lt;/option&gt;
                &lt;option value="CA"&gt;California&lt;/option&gt;
                &lt;option value="CO"&gt;Colorado&lt;/option&gt;
                &lt;option value="CT"&gt;Connecticut&lt;/option&gt;
                &lt;option value="DE"&gt;Delaware&lt;/option&gt;
                &lt;option value="DC"&gt;District Of Columbia&lt;/option&gt;
                &lt;option value="FL"&gt;Florida&lt;/option&gt;
                &lt;option value="GA"&gt;Georgia&lt;/option&gt;
                &lt;option value="HI"&gt;Hawaii&lt;/option&gt;
                &lt;option value="ID"&gt;Idaho&lt;/option&gt;
                &lt;option value="IL"&gt;Illinois&lt;/option&gt;
                &lt;option value="IN"&gt;Indiana&lt;/option&gt;
                &lt;option value="IA"&gt;Iowa&lt;/option&gt;
                &lt;option value="KS"&gt;Kansas&lt;/option&gt;
                &lt;option value="KY"&gt;Kentucky&lt;/option&gt;
                &lt;option value="LA"&gt;Louisiana&lt;/option&gt;
                &lt;option value="ME"&gt;Maine&lt;/option&gt;
                &lt;option value="MD"&gt;Maryland&lt;/option&gt;
                &lt;option value="MA"&gt;Massachusetts&lt;/option&gt;
                &lt;option value="MI"&gt;Michigan&lt;/option&gt;
                &lt;option value="MN"&gt;Minnesota&lt;/option&gt;
                &lt;option value="MS"&gt;Mississippi&lt;/option&gt;
                &lt;option value="MO"&gt;Missouri&lt;/option&gt;
                &lt;option value="MT"&gt;Montana&lt;/option&gt;
                &lt;option value="NE"&gt;Nebraska&lt;/option&gt;
                &lt;option value="NV"&gt;Nevada&lt;/option&gt;
                &lt;option value="NH"&gt;New Hampshire&lt;/option&gt;
                &lt;option value="NJ"&gt;New Jersey&lt;/option&gt;
                &lt;option value="NM"&gt;New Mexico&lt;/option&gt;
                &lt;option value="NY"&gt;New York&lt;/option&gt;
                &lt;option value="NC"&gt;North Carolina&lt;/option&gt;
                &lt;option value="ND"&gt;North Dakota&lt;/option&gt;
                &lt;option value="OH"&gt;Ohio&lt;/option&gt;
                &lt;option value="OK"&gt;Oklahoma&lt;/option&gt;
                &lt;option value="OR"&gt;Oregon&lt;/option&gt;
                &lt;option value="PA"&gt;Pennsylvania&lt;/option&gt;
                &lt;option value="RI"&gt;Rhode Island&lt;/option&gt;
                &lt;option value="SC"&gt;South Carolina&lt;/option&gt;
                &lt;option value="SD"&gt;South Dakota&lt;/option&gt;
                &lt;option value="TN"&gt;Tennessee&lt;/option&gt;
                &lt;option value="TX"&gt;Texas&lt;/option&gt;
                &lt;option value="UT"&gt;Utah&lt;/option&gt;
                &lt;option value="VT"&gt;Vermont&lt;/option&gt;
                &lt;option value="VA"&gt;Virginia&lt;/option&gt;
                &lt;option value="WA"&gt;Washington&lt;/option&gt;
                &lt;option value="WV"&gt;West Virginia&lt;/option&gt;
                &lt;option value="WI"&gt;Wisconsin&lt;/option&gt;
                &lt;option value="WY"&gt;Wyoming&lt;/option&gt;
            &lt;/select&gt;

            &lt;span&gt;
            &lt;label for="Zip"&gt;Zip Code&lt;/label&gt;
            &lt;input type="text" id="zip" name="zip" pattern="[0-9]{5}\-[0-9]{4}" placeholder="12345-4545" required&gt;&lt;/span&gt;
            &lt;div class="hover"&gt;Give me what I want!!!&lt;/div&gt;

            &lt;span&gt;
            &lt;label for="tele"&gt;Telephone&lt;/label&gt;
            &lt;input type="text" id="tele" name="tele" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="303-555-5555" required&gt;&lt;/span&gt;
            &lt;div class="hover"&gt;You can do it&lt;/div&gt;

            &lt;span&gt;
            &lt;label for="email"&gt;Email&lt;/label&gt;
            &lt;input type="text" id="email" name="email" placeholder="jon@doe.com" pattern="([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})" required&gt;&lt;/span&gt;
            &lt;div class="hover"&gt;this better be an email&lt;/div&gt;

            &lt;span&gt;
            &lt;label for="web"&gt;Company Website&lt;/label&gt;
            &lt;input type="text" id="web" name="web" placeholder="company.com"&gt;&lt;/span&gt;
            &lt;div class="hover"&gt;Rawr&lt;/div&gt;

            &lt;span&gt;
            &lt;label for="Position"&gt;Position&lt;/label&gt;
            &lt;input type="text" id="position" name="position" pattern="[a-zA-Z0-9\ \#]+" placeholder="position at company" required&gt;&lt;/span&gt;
            &lt;div class="hover"&gt;I bet mine is better&lt;/div&gt;

            &lt;span&gt;
            &lt;label for="Company"&gt;Company&lt;/label&gt;
            &lt;input type="text" id="company" name="company" pattern="[a-zA-Z0-9\ \#]+" placeholder="Company name" required&gt;&lt;/span&gt;
            &lt;div class="hover"&gt;Sweet name&lt;/div&gt;

            &lt;label for="Meal" id="meal"&gt;Do you want to purchase the meal pack?&lt;br&gt;
                Do you want to purchase just the Day 2 Dinner?&lt;/label&gt;&lt;br&gt;
            &lt;input type="radio" name="meal" value="Full meal pack"&gt;Full meal Pack&lt;br&gt;
            &lt;input type="radio" name="meal" value="Day 2 Dinner"&gt;Day 2 Dinner&lt;br&gt;
            &lt;input type="radio" name="meal" value="None"&gt;None&lt;br&gt;&lt;br&gt;

            &lt;span&gt;
            &lt;label for="bfname"&gt;Billing First Name&lt;/label&gt;
            &lt;input type="text" id="bfname" name="billfirstname" pattern="[a-zA-Z]+" placeholder="John" required&gt;&lt;/span&gt;
            &lt;div class="hover"&gt;Do it again&lt;/div&gt;

            &lt;span&gt;
            &lt;label for="blname"&gt;Billing Last Name&lt;/label&gt;
            &lt;input type="text" id="blname" name="billlastname" pattern="[a-zA-Z\-]+" placeholder="Doe" required&gt;&lt;/span&gt;
            &lt;div class="hover"&gt;Goon&lt;/div&gt;

            &lt;label for="card" id="cardtype"&gt;Choose Card type:&lt;/label&gt;&lt;br&gt;
            &lt;input type="radio" name="card" value="Visa"&gt;Visa&lt;br&gt;
            &lt;input type="radio" name="card" value="MasterCard"&gt;MasterCard&lt;br&gt;
            &lt;input type="radio" name="card" value="AmericanEx"&gt;American Express&lt;br&gt;&lt;br&gt;

            &lt;span&gt;
            &lt;label for="cardnum"&gt;Card Number&lt;/label&gt;
            &lt;input type="text" id="cardnum" name="cardnumber" pattern="[0-9]{16}" placeholder="0000000000000000" required&gt;&lt;/span&gt;
            &lt;div class="hover"&gt;You are mine now&lt;/div&gt;

            &lt;span&gt;
            &lt;label for="CSV"&gt;CSV&lt;/label&gt;
            &lt;input type="text" id="csv" name="csv" pattern="[0-9]{4}" placeholder="0000" required&gt;&lt;/span&gt;
            &lt;div class="hover"&gt;Almost got it&lt;/div&gt;

            &lt;span&gt;
            &lt;label for="expmo"&gt;Expiration month&lt;/label&gt;
            &lt;input type="text" id="expmo" name="expmonth" pattern="[0-9]{2}" placeholder="00" required&gt;&lt;/span&gt;
            &lt;div class="hover"&gt;Sucka&lt;/div&gt;

            &lt;span&gt;
            &lt;label for="expyr"&gt;Expiration year&lt;/label&gt;
            &lt;input type="text" id="expyr" name="expyr" pattern="[0-9]{4}" placeholder="0000" required&gt;&lt;/span&gt;
            &lt;div class="hover"&gt;Wait I need this 2&lt;/div&gt;

            &lt;span id="ws1"&gt;
            &lt;input type="radio" name="wss1" value="y" onClick="toggle(this)" /&gt; Ski&lt;br&gt;
            &lt;input type="radio" name="wss1" value="n" onClick="toggle(this)" /&gt; Snowboard&lt;br&gt;
            &lt;input type="radio" name="wss1" value="y" onClick="toggle(this)" /&gt; Walk&lt;br&gt;
            &lt;br&gt;&lt;/span&gt;

            &lt;span id="ws2"&gt;
            &lt;input class ="hideme" type="radio" name="wss2" id="continue1" value="y" onclick="toggle2(this)" style="visibility: hidden" /&gt;Further&lt;br&gt;
            &lt;input class ="hideme" type="radio" name="wss2" id="continue2" value="y" onclick="toggle2(this)" style="visibility: hidden"/&gt;Deeper&lt;br&gt;
            &lt;input class ="hideme" type="radio" name="wss2" id="continue3" value="n" onclick="toggle2(this)" style="visibility: hidden"/&gt;Higher&lt;br&gt;
            &lt;br&gt;&lt;/span&gt;

            &lt;span id="ws3"&gt;
            &lt;input type="radio" name="wss3" id="continue4" value="Continue" style="visibility: hidden" /&gt;Further&lt;br&gt;
            &lt;input type="radio" name="wss3" id="continue5" value="Continue" style="visibility: hidden"/&gt;Deeper&lt;br&gt;
            &lt;input type="radio" name="wss3" id="continue6" value="Continue" style="visibility: hidden"/&gt;Higher&lt;br&gt;
            &lt;br&gt;&lt;/span&gt;

            &lt;script src="workshopLogic.js" type="text/javascript"&gt;&lt;/script&gt;

            &lt;input type="submit" value="Submit" onclick="saveRegistration()"&gt;
                &lt;p class="submit"&gt;Click to finalize registration&lt;/p&gt;
        &lt;/form&gt;

    &lt;/div&gt;
        &lt;script src="saveRestoreForm.js" type="text/javascript"&gt;&lt;/script&gt;
        &lt;script src="stylesheet.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;/body&gt;
</code></pre>

<p></p>

<p>****Javascript****</p>

<pre><code>        var conferenceId = 12345;
        var title;
        var firstName;
        var lastName;
        var address1;
        var address2;
        var City;
        var State;
        var zipCode;
        var phoneNum;
        var Email;
        var cWeb;
        var cPosition;
        var youCompany;
        var mealPlan;
        var billFirstName;
        var billLastName;
        var creditType;
        var cNum;
        var cCSV;
        var cEXPMo;
        var cEXPYr;
        var work1;
        var work2;
        var work3;

    function saveRegistration(){
        title = document.forms["registrationForm"]["firstname"].value;
        firstName = document.forms["registrationForm"]["firstname"].value;
        lastName = document.forms["registrationForm"]["lastname"].value;
        address1 = document.forms["registrationForm"]["address1"].value;
        address2 = document.forms["registrationForm"]["address2"].value;
        City = document.forms["registrationForm"]["city"].value;
        State = document.forms["registrationForm"]["state"].value;
        zipCode = document.forms["registrationForm"]["zip"].value;
        phoneNum = document.forms["registrationForm"]["tele"].value;
        Email = document.forms["registrationForm"]["email"].value;
        cWeb = document.forms["registrationForm"]["web"].value;
        cPosition = document.forms["registrationForm"]["position"].value;
        youCompany = document.forms["registrationForm"]["company"].value;
        mealPlan = document.forms["registrationForm"]["meal"].value;
        billFirstName = document.forms["registrationForm"]["billfirstname"].value;
        billLastName = document.forms["registrationForm"]["billlastname"].value;
        creditType = document.forms["registrationForm"]["card"].value;
        cNum = document.forms["registrationForm"]["cardnumber"].value;
        cCSV = document.forms["registrationForm"]["csv"].value;
        cEXPMo = document.forms["registrationForm"]["expmonth"].value;
        cEXPYr = document.forms["registrationForm"]["expyr"].value;
        work1 = document.forms["registrationForm"]["wss1"].value;
        work2 = document.forms["registrationForm"]["wss2"].value;
        work3 = document.forms["registrationForm"]["wss3"].value;

        var registrationString = title + "~" +  firstName + "~"  + lastName + "~"  + address1
                + "~"  + address2 + "~"  + City + "~"  + State + "~" + zipCode + "~"  +
                phoneNum + "~"  + Email + "~"  + cWeb + "~"  + cPosition + "~"  + youCompany
                + "~"  + mealPlan + "~"  + billFirstName + "~"  + billLastName + "~"  + 
                creditType + "~"  + cNum + "~"  + cCSV + "~"  + cEXPMo + "~"  + cEXPYr +
                "~"  + work1 + "~"  + work2 + "~"  + work3 + "~";

        setCookie(conferenceId, registrationString, 1);
    }

    function loadRegistration(){
        x = getCookie(conferenceId);

        if(x === 'error'){
            return;
        }
        else{        
            x.split("~");
            title = x[0];
            firstName = x[1];
            lastName = x[2];
            address1 = x[3];
            address2 = x[4];
            City = x[5];
            State = x[6];
            zipCode = x[7];
            phoneNum = x[8];
            Email = x[9];
            cWeb = x[10];
            cPosition = x[11];
            youCompany = x[12];
            mealPlan = x[13];
            billFirstName = x[14];
            billLastName = x[15];
            creditType = x[16];
            cNum = x[17];
            cCSV = x[18];
            cEXPMo = x[19];
            cEXPYr = x[20];
            work1 = x[21];
            work2 = x[22];
            work3 = x[23];    

            document.getElementById('title').value = title;
            document.getElementById('fname').value = firstName;
            document.getElementById('lname').value = lastName;
            document.getElementById('add1').value = address1;
            document.getElementById('add2').value = address2;
            document.getElementById('city').value = City;
            document.getElementById('state').value =State;
            document.getElementById('zip').value = zipCode;
            document.getElementById('tele').value = phoneNum;
            document.getElementById('email').value = Email;
            document.getElementById('web').value = cWeb;
            document.getElementById('position').value = cPosition;
            document.getElementById('company').value = youCompany;
            document.getElementById('meal').value = mealPlan;
            document.getElementById('bfname').value = billFirstName;
            document.getElementById('blname').value = billLastName;
            document.getElementById('cardtype').value = creditType;
            document.getElementById('cardnum').value = cNum;
            document.getElementById('csv').value = cCSV;
            document.getElementById('expmo').value = cEXPMo;
            document.getElementById('expyr').value = cEXPYr;
            document.getElementById('ws1').value = work1;
            document.getElementById('ws2').value = work2;
            document.getElementById('ws3').value = work3;
        }
    }

    function setCookie(cname,cvalue,exdays) {
        var d = new Date();
        d.setTime(d.getTime() + (exdays*24*60*60*1000));
        var expires = "expires=" + d.toGMTString();
        document.cookie = cname + "=" + cvalue + "; " + expires + "; path=/";
    }

    function getCookie(cname) {
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for(var i=0; i&lt;ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0)===' ') {
                c = c.substring(1);
            }
            if (c.indexOf(name) === 0) {
                return c.substring(name.length, c.length);
            }
        }
        return "error";
    }
</code></pre>