您好我是新手，所以我确信我的代码不是最优的。我正在尝试保存输入到表单中的数据，然后重新加载并使用cookie填写表单。在我的浏览器中查看cookie时，我可以看到数据被保存到cookie但是没有正确加载。我认为问题始于我不认为我正在保存或抓取这些信息，然后我会假设我在其他选择和单选按钮输入上犯了类似的错误。任何人都可以指出我正确的方向。
**** HTML：****
<html>
<head>
<link id="theme" href="webdefault.css" rel="stylesheet" type="text/css"/>
<link rel="shortcut icon" type="image/x-icon" href="pics/snow.ico">
<title>Registration</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="Week 2, conference, web, site" />
<meta name="description" content="Conference Web Site 9 pages" />
<meta name="author" content="Kyle Kawasaki">
<meta name="robots" content="noindex, nofollow">
</head>
<body onload="loadCookies(); loadRegistration()">
<nav id="nav"><b>
<a href="index.html" title="Home">Home</a>
<a href="awards.html" title="Awards">Awards</a>
<a href="activities.html" title="Activities">Activities</a>
<a href="meals.html" title="Meals">Meals</a>
<a href="keynote.html" title="Keynote">Keynote</a>
<a href="workshopschedule.html" title="WorkShopSchedule">Schedule</a>
<a href="registration.html" title="Registration">Registration</a></b>
<button id="black" onclick="changetheme('webdefault.css')">Black Theme</button>
<button id="green" onclick="changetheme('style2.css')">Green Theme</button>
</nav>
<h1 id="h1">Conference Registration</h1><br><br><br><br>
<div class="reg">
<form action="thankyou.html" method="get" name="registrationForm">
<label for="Title">Title</label>
<select id="title">
<optgroup label="Title">
<option value="Mr.">Mr.</option>
<option value="Mr.">Ms.</option>
<option value="Mr.">Mrs.</option>
</optgroup>
</select>
<span>
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" pattern="[a-zA-Z]+" placeholder="John" required></span>
<div class="hover">Who are you</div>
<span>
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" pattern="[a-zA-Z\-]+" placeholder="Doe" required></span>
<div class="hover">I see</div>
<span>
<label for="address1">Address line 1</label>
<input type="text" id="add1" name="address1" pattern="[a-zA-Z0-9\ \#]+" placeholder="123 bla bla" required></span>
<div class="hover">Tell me NOW</div>
<span>
<label for="address2">Address line 2</label>
<input type="text" id="add2" name="address2" pattern="[a-zA-Z0-9\ \#]+" placeholder="bla bla bla"></span>
<div class="hover">Are you done?</div>
<span>
<label for="City">City</label>
<input type="text" id="city" name="city" pattern="[a-zA-Z\ ]+" placeholder="City" required></span>
<div class="hover">Where!!</div>
<label for="State" id = "state">State</label>
<select name="state">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
<span>
<label for="Zip">Zip Code</label>
<input type="text" id="zip" name="zip" pattern="[0-9]{5}\-[0-9]{4}" placeholder="12345-4545" required></span>
<div class="hover">Give me what I want!!!</div>
<span>
<label for="tele">Telephone</label>
<input type="text" id="tele" name="tele" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="303-555-5555" required></span>
<div class="hover">You can do it</div>
<span>
<label for="email">Email</label>
<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></span>
<div class="hover">this better be an email</div>
<span>
<label for="web">Company Website</label>
<input type="text" id="web" name="web" placeholder="company.com"></span>
<div class="hover">Rawr</div>
<span>
<label for="Position">Position</label>
<input type="text" id="position" name="position" pattern="[a-zA-Z0-9\ \#]+" placeholder="position at company" required></span>
<div class="hover">I bet mine is better</div>
<span>
<label for="Company">Company</label>
<input type="text" id="company" name="company" pattern="[a-zA-Z0-9\ \#]+" placeholder="Company name" required></span>
<div class="hover">Sweet name</div>
<label for="Meal" id="meal">Do you want to purchase the meal pack?<br>
Do you want to purchase just the Day 2 Dinner?</label><br>
<input type="radio" name="meal" value="Full meal pack">Full meal Pack<br>
<input type="radio" name="meal" value="Day 2 Dinner">Day 2 Dinner<br>
<input type="radio" name="meal" value="None">None<br><br>
<span>
<label for="bfname">Billing First Name</label>
<input type="text" id="bfname" name="billfirstname" pattern="[a-zA-Z]+" placeholder="John" required></span>
<div class="hover">Do it again</div>
<span>
<label for="blname">Billing Last Name</label>
<input type="text" id="blname" name="billlastname" pattern="[a-zA-Z\-]+" placeholder="Doe" required></span>
<div class="hover">Goon</div>
<label for="card" id="cardtype">Choose Card type:</label><br>
<input type="radio" name="card" value="Visa">Visa<br>
<input type="radio" name="card" value="MasterCard">MasterCard<br>
<input type="radio" name="card" value="AmericanEx">American Express<br><br>
<span>
<label for="cardnum">Card Number</label>
<input type="text" id="cardnum" name="cardnumber" pattern="[0-9]{16}" placeholder="0000000000000000" required></span>
<div class="hover">You are mine now</div>
<span>
<label for="CSV">CSV</label>
<input type="text" id="csv" name="csv" pattern="[0-9]{4}" placeholder="0000" required></span>
<div class="hover">Almost got it</div>
<span>
<label for="expmo">Expiration month</label>
<input type="text" id="expmo" name="expmonth" pattern="[0-9]{2}" placeholder="00" required></span>
<div class="hover">Sucka</div>
<span>
<label for="expyr">Expiration year</label>
<input type="text" id="expyr" name="expyr" pattern="[0-9]{4}" placeholder="0000" required></span>
<div class="hover">Wait I need this 2</div>
<span id="ws1">
<input type="radio" name="wss1" value="y" onClick="toggle(this)" /> Ski<br>
<input type="radio" name="wss1" value="n" onClick="toggle(this)" /> Snowboard<br>
<input type="radio" name="wss1" value="y" onClick="toggle(this)" /> Walk<br>
<br></span>
<span id="ws2">
<input class ="hideme" type="radio" name="wss2" id="continue1" value="y" onclick="toggle2(this)" style="visibility: hidden" />Further<br>
<input class ="hideme" type="radio" name="wss2" id="continue2" value="y" onclick="toggle2(this)" style="visibility: hidden"/>Deeper<br>
<input class ="hideme" type="radio" name="wss2" id="continue3" value="n" onclick="toggle2(this)" style="visibility: hidden"/>Higher<br>
<br></span>
<span id="ws3">
<input type="radio" name="wss3" id="continue4" value="Continue" style="visibility: hidden" />Further<br>
<input type="radio" name="wss3" id="continue5" value="Continue" style="visibility: hidden"/>Deeper<br>
<input type="radio" name="wss3" id="continue6" value="Continue" style="visibility: hidden"/>Higher<br>
<br></span>
<script src="workshopLogic.js" type="text/javascript"></script>
<input type="submit" value="Submit" onclick="saveRegistration()">
<p class="submit">Click to finalize registration</p>
</form>
</div>
<script src="saveRestoreForm.js" type="text/javascript"></script>
<script src="stylesheet.js" type="text/javascript"></script>
</body>
**** ****的Javascript
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<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";
}