2017-11-20 2 views
0

質問があります。私はID名に基づいてクッキーに値を格納するこの登録フォームを持っています。同じ登録フォームに戻って、Cookieに既に保存されているID名を入力すると、Cookieからデータがプルされ、フォームが事前入力されます。javadocを使用してHTML文書のラジオボタンをクッキーのデータで設定しようとしています

私は以下のコードを持っており、フォームフィールドでは動作しますが、ラジオボタンでは動作しません。それは私にナットを駆動しているもののラジオボタンで起こっている

//This function fills in the form based on entered conference ID 
 
function fillForm(name) { 
 
    var cookie = getCookie(name).toString(); 
 
    var newCookie = decodeURIComponent(cookie); 
 
    var newArray = newCookie.split(";"); 
 

 
    //For testing values to make sure they're there 
 
    alert(newArray); 
 

 
    document.getElementById("title").value = newArray[0]; 
 
    document.getElementById("firstname").value = newArray[1]; 
 
    document.getElementById("lastname").value = newArray[2]; 
 
    document.getElementById("addressone").value = newArray[3]; 
 
    document.getElementById("addresstwo").value = newArray[4]; 
 
    document.getElementById("city").value = newArray[5]; 
 
    document.getElementById("state").value = newArray[6]; 
 
    document.getElementById("zipcode").value = newArray[7]; 
 
    document.getElementById("tel").value = newArray[8]; 
 
    document.getElementById("email").value = newArray[9]; 
 
    document.getElementById("website").value = newArray[10]; 
 
    document.getElementById("position").value = newArray[11]; 
 
    document.getElementById("companyname").value = newArray[12]; 
 

 
    if(newArray[13]) { 
 
     document.getElementById("mealone").checked = true; 
 
    } 
 
    else { 
 
     document.getElementById("mealtwo").checked = true; 
 
    } 
 

 
    if(newArray[15]) { 
 
     document.getElementById("sesonea").checked = true; 
 
    } 
 
    else if(newArray[16]) { 
 
     document.getElementById("sesoneb").checked = true; 
 
    } 
 
    else { 
 
     document.getElementById("sesonec").checked = true; 
 
    } 
 

 
    if(newArray[18]) { 
 
     document.getElementById("sestwoa").checked = true; 
 
    } 
 
    else if(newArray[19]) { 
 
     document.getElementById("sestwob").checked = true; 
 
    } 
 
    else { 
 
     document.getElementById("sestwoc").checked = true; 
 
    } 
 

 
    if(newArray[21]) { 
 
     document.getElementById("sesthreea").checked = true; 
 
    } 
 
    else if(newArray[22]) { 
 
     document.getElementById("sesthreeb").checked = true; 
 
    } 
 
    else { 
 
     document.getElementById("sesthreec").checked = true; 
 
    } 
 

 
    document.getElementById("billfirstname").value = newArray[24]; 
 
    document.getElementById("billlastname").value = newArray[25]; 
 

 
    if(newArray[26]) { 
 
     document.getElementById("carda").checked = true; 
 
    } 
 
    else if(newArray[27]) { 
 
     document.getElementById("cardb").checked = true; 
 
    } 
 
    else { 
 
     document.getElementById("cardc").checked = true; 
 
    } 
 

 
    document.getElementById("cardnumber").value = newArray[29]; 
 
    document.getElementById("csv").value = newArray[30]; 
 
    document.getElementById("cardexpmonth").value = newArray[31]; 
 
    document.getElementById("cardexpyear").value = newArray[32]; 
 
}

わかりません。私は、配列内のすべてのデータを正しく見ることができるように警告を設定しましたが、正しいラジオボタンを選択していません。

編集:HTMLフォーム:

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <script type="text/javascript" src="js/jsdefault.js"></script> 
 
    <link rel="stylesheet" href="css/webdefault.css"> 
 
    <meta charset="UTF-8"> 
 
    <meta name="description" content="Conference Website"> 
 
    <meta name="keywords" content="Conference, website"> 
 
    <meta name="author" content="Rafal Dudek"> 
 
    <meta name="robots" content="all"> 
 
    <title>Conference Registration</title> 
 
</head> 
 
<body> 
 
<div id="header"> 
 
    <nav> 
 
     <ul> 
 
      <li><a href="index.html">Index</a></li> 
 
      <li><a href="awards.html">Awards</a></li> 
 
      <li><a href="activities.html">Activities</a></li> 
 
      <li><a href="meals.html">Meals</a></li> 
 
      <li><a href="keynote.html">Keynote</a></li> 
 
      <li><a href="workshopschedule.html">Workshop Schedule</a></li> 
 
      <li><a href="registration.html">Registration</a></li> 
 
     </ul> 
 
    </nav> 
 
</div> 
 

 
<div id="main"> 
 
    <form action="thankyou.html" id="registration" onsubmit="return check()" method="get"> 
 
     <fieldset> 
 
      <legend>Conference ID</legend> 
 
      <label>Conference ID: <input type="text" oninput="fillForm(this.value)" id="confID" name="confID" size="6" maxlength="6" required="required" pattern="[0-9]{6}" placeholder="123456" title="Enter a 6 digit conference ID number"></label><br /> 
 
     </fieldset> 
 
     <fieldset> 
 
      <legend>Personal Information</legend> 
 
      <label for="title">Title:</label> 
 
      <select id="title"> 
 
       <option value="Mr.">Mr.</option> 
 
       <option value="Ms.">Ms.</option> 
 
       <option value="Mrs.">Mrs.</option> 
 
      </select><br /> 
 
      <label>First Name: <input type="text" id="firstname" name="firstname" size="30" maxlength="100" required="required" pattern="[a-zA-Z]+" placeholder="First Name" title="Enter your first name"></label><br /> 
 
      <label>Last Name: <input type="text" id="lastname" name="lastname" size="30" maxlength="100" required="required" pattern="[a-zA-Z\-]+" placeholder="Last Name" title="Enter your last name"></label><br /> 
 
      <label>Address 1: <input type="text" id="addressone" name="addressone" size="30" maxlength="100" required="required" pattern="[a-zA-Z0-9\ \#]+" placeholder="Address" title="Enter your address"></label><br /> 
 
      <label>Address 2: <input type="text" id="addresstwo" name="addresstwo" size="30" maxlength="100" pattern="[a-zA-Z0-9\ \#]+" title="Optional: Enter part 2 of your address"></label><br /> 
 
      <label>City: <input type="text" id="city" name="city" size="30" maxlength="100" required="required" pattern="[a-zA-Z\ ]+" placeholder="City" title="Enter your city"></label><br /> 
 
      <label title="state">State:</label> 
 
      <select title="state" id="state"> 
 
       <option value="AL">AL</option> 
 
       <option value="AK">AK</option> 
 
       <option value="AR">AR</option> 
 
       <option value="AZ">AZ</option> 
 
       <option value="CA">CA</option> 
 
       <option value="CO">CO</option> 
 
       <option value="CT">CT</option> 
 
       <option value="DC">DC</option> 
 
       <option value="DE">DE</option> 
 
       <option value="FL">FL</option> 
 
       <option value="GA">GA</option> 
 
       <option value="HI">HI</option> 
 
       <option value="IA">IA</option> 
 
       <option value="ID">ID</option> 
 
       <option value="IL">IL</option> 
 
       <option value="IN">IN</option> 
 
       <option value="KS">KS</option> 
 
       <option value="KY">KY</option> 
 
       <option value="LA">LA</option> 
 
       <option value="MA">MA</option> 
 
       <option value="MD">MD</option> 
 
       <option value="ME">ME</option> 
 
       <option value="MI">MI</option> 
 
       <option value="MN">MN</option> 
 
       <option value="MO">MO</option> 
 
       <option value="MS">MS</option> 
 
       <option value="MT">MT</option> 
 
       <option value="NC">NC</option> 
 
       <option value="NE">NE</option> 
 
       <option value="NH">NH</option> 
 
       <option value="NJ">NJ</option> 
 
       <option value="NM">NM</option> 
 
       <option value="NV">NV</option> 
 
       <option value="NY">NY</option> 
 
       <option value="ND">ND</option> 
 
       <option value="OH">OH</option> 
 
       <option value="OK">OK</option> 
 
       <option value="OR">OR</option> 
 
       <option value="PA">PA</option> 
 
       <option value="RI">RI</option> 
 
       <option value="SC">SC</option> 
 
       <option value="SD">SD</option> 
 
       <option value="TN">TN</option> 
 
       <option value="TX">TX</option> 
 
       <option value="UT">UT</option> 
 
       <option value="VT">VT</option> 
 
       <option value="VA">VA</option> 
 
       <option value="WA">WA</option> 
 
       <option value="WI">WI</option> 
 
       <option value="WV">WV</option> 
 
       <option value="WY">WY</option> 
 
      </select><br /> 
 
      <label>Zip Code: <input type="text" id="zipcode" name="zipcode" size="10" maxlength="10" required="required" pattern="[0-9]{5}\-[0-9]{4}" placeholder="Zip Code" title="Enter zip code"></label><br /> 
 
      <label>Telephone: <input type="text" id="tel" name="tel" size="30" maxlength="100" required="required" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="Telephone" title="Enter telephone number"></label><br /> 
 
      <label>Email: <input type="email" id="email" name="email" size="30" maxlength="100" required="required" pattern="([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Zaz]{2,4})" placeholder="[email protected]" title="Enter email address"></label><br /> 
 
     </fieldset> 
 
     <fieldset> 
 
      <legend>Company Information</legend> 
 
      <label>Company Website: <input type="url" id="website" name="website" size="30" maxlength="100" placeholder="www.example.com" title="Enter website URL"></label><br /> 
 
      <label>Position: <input type="text" id="position" name="position" size="30" maxlength="100" required="required" pattern="[a-zA-Z0-9\ \#]+" placeholder="Position" title="Enter your position"></label><br /> 
 
      <label>Company Name: <input type="text" id="companyname" name="companyname" size="30" maxlength="100" required="required" pattern="[a-zA-Z0-9\ \#]+" placeholder="Company Name" title="Enter company name"></label><br /> 
 

 
     </fieldset> 
 
     <fieldset> 
 
      <legend>Dining Information</legend> 
 
      <p> 
 
       Would you like a full meal or just day 2 dinner?<br /> 
 
       <label><input type="radio" id="mealone" name="meal" value="full" required/> Full Meal ($250)</label> 
 
       <label><input type="radio" id="mealtwo" name="meal" value="part"/> Day 2 dinner only ($75)</label> 
 
      </p> 
 

 
     </fieldset> 
 
     <fieldset> 
 
      <legend>Workshop Information</legend> 
 
      <p> 
 
       Which workshops would you like to join?<br /> 
 
       Outdoors Theme: 
 
       <label><input type="radio" id="sesonea" name="session_1" value="workshop_1" required /> Lawn Maintenance</label> 
 
       <label><input type="radio" id="sesoneb" name="session_1" value="workshop_2"/> Landscaping Ideas</label> 
 
       <label><input type="radio" id="sesonec" name="session_1" value="workshop_3" /> Pest Control</label><br /> 
 
       Home Improvement Theme: 
 
       <label><input type="radio" id="sestwoa" name="session_2" value="workshop_4" /> Kitchen Remodeling</label> 
 
       <label><input type="radio" id="sestwob" name="session_2" value="workshop_5"/> Bathroom Remodeling</label> 
 
       <label><input type="radio" id="sestwoc" name="session_2" value="workshop_6" /> Home Improvement Ideas</label><br /> 
 
       Repair Basics Theme: 
 
       <label><input type="radio" id="sesthreea" name="session_3" value="workshop_7" required/> General Appliance Troubleshooting</label> 
 
       <label><input type="radio" id="sesthreeb" name="session_3" value="workshop_8"/> Heat and A/C Unit Maintenance</label> 
 
       <label><input type="radio" id="sesthreec" name="session_3" value="workshop_9" /> Plumbing Basics</label><br /> 
 
      </p> 
 

 
     </fieldset> 
 
     <fieldset> 
 
      <legend>Billing Information:</legend> 
 
      <label>Billing First Name: <input type="text" id="billfirstname" name="billfirstname" size="30" maxlength="100" required="required" pattern="[a-zA-Z]+" placeholder="First Name" title="Enter first name"></label><br /> 
 
      <label>Billing Last Name: <input type="text" id="billlastname" name="billlastname" size="30" maxlength="100" required="required" pattern="[a-zA-Z\-]+" placeholder="Last Name" title="Enter last name"></label><br /> 
 
      <p> 
 
       Card Type:<br /> 
 
       <label><input type="radio" id="carda" name="card" value="visa" /> Visa</label> 
 
       <label><input type="radio" id="cardb" name="card" value="mastercard" required/> MasterCard</label> 
 
       <label><input type="radio" id="cardc" name="card" value="americanexpress"/> American Express</label> 
 
      </p> 
 
      <label>Card Number: <input type="text" id="cardnumber" name="cardnumber" size="16" maxlength="16" required="required" pattern="[0-9]{16}" placeholder="0000000000000000" title="Enter credit card number"></label><br /> 
 
      <label>Card Security Value: <input type="text" id="csv" name="csv" size=4 maxlength="4" required="required" pattern="[0-9]{4}" placeholder="000" title="Enter CSV number"></label><br /> 
 
      <label>Exp. Month (two digits): <input type="text" id="cardexpmonth" name="cardexpmonth" size="2" maxlength="2" required="required" pattern="(0[1-9]|1[0-2])" placeholder="MM" title="Enter two digit month"></label><br /> 
 
      <label>Exp. Year (four digits): <input type="text" id="cardexpyear" name="cardexpyear" size="4" maxlength="4" required="required" pattern="[2][0]([1-2][6-9])" placeholder="YYYY" title="Enter four digit year"></label><br /> 
 
      <input type="submit" value="Submit" /> 
 

 
     </fieldset> 
 

 
    </form> 
 

 
</div> 
 

 
<div id="footer"> 
 
    <address> 
 
     <small> 
 
      Contact Information:<br> 
 
      Peter John<br> 
 
      12345 Grape St.<br> 
 
      Thornton, CO 80233<br> 
 
      Telephone: 303-555-6666<br> 
 
      E-mail: <a href="mailto:[email protected]">[email protected]</a> 
 
     </small> 
 
    </address> 
 
</div> 
 
</body> 
 
</html>

取得の追加と念のためにあまりにもクッキーの機能を設定します。

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

 
//This function gets cookie value based on conference ID 
 
function getCookie(name) { 
 
    var nameEQ = name + "="; 
 
    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,c.length); 
 
     if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); 
 
    } 
 
    return null; 
 
}

+0

申し訳ありませんが、これがどのように機能するのかわかりません.HTMLはありません。私たちを明確にし、あなたを運転しているように私たちを運転しないで、[mcve]を提供してください! :) – Soolie

+0

申し訳ありませんが、HTMLフォームも追加しました – RDudek

答えて

1

クッキーされていますあなたがif(newArray[1])を行う際に、引数が空の文字列の場合は文字列として格納されますので、(その長さがゼロ)if("false")またはJavaScriptで

結果が偽であるif("true")を言っています。あなたの「偽」のいずれかが、あなたがやるべきこと、この問題を解決するためにtrue

として扱われhttps://stackoverflow.com/a/8693015/1309377

http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf

とソースを与えた答え:そうでない場合は、結果は

ソース真でありますnewArray[1] == "true"

//This function fills in the form based on entered conference ID 
 

 
var newArray = ["true", "false", "true"] //newCookie.split(";"); 
 

 
if (newArray[0] == "true") { 
 
    document.getElementById("mealone").checked = true; 
 
} else { 
 
    document.getElementById("mealtwo").checked = true; 
 
} 
 

 
if (newArray[1] == "true") { 
 
    document.getElementById("sesonea").checked = true; 
 
} else if (newArray[2] == "true") { 
 
    document.getElementById("sesoneb").checked = true; 
 
} else { 
 
    document.getElementById("sesonec").checked = true; 
 
}
<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <script type="text/javascript" src="js/jsdefault.js"></script> 
 
    <link rel="stylesheet" href="css/webdefault.css"> 
 
    <meta charset="UTF-8"> 
 
    <meta name="description" content="Conference Website"> 
 
    <meta name="keywords" content="Conference, website"> 
 
    <meta name="author" content="Rafal Dudek"> 
 
    <meta name="robots" content="all"> 
 
    <title>Conference Registration</title> 
 
</head> 
 

 
<body> 
 

 
    <div id="main"> 
 
    <form action="thankyou.html" id="registration" onsubmit="return check()" method="get"> 
 
     <fieldset> 
 
     <legend>Dining Information</legend> 
 
     <p> 
 
      Would you like a full meal or just day 2 dinner?<br /> 
 
      <label><input type="radio" id="mealone" name="meal" value="full" required/> Full Meal ($250)</label> 
 
      <label><input type="radio" id="mealtwo" name="meal" value="part"/> Day 2 dinner only ($75)</label> 
 
     </p> 
 

 
     </fieldset> 
 
     <fieldset> 
 
     <legend>Workshop Information</legend> 
 
     <p> 
 
      Which workshops would you like to join?<br /> Outdoors Theme: 
 
      <label><input type="radio" id="sesonea" name="session_1" value="workshop_1" required /> Lawn Maintenance</label> 
 
      <label><input type="radio" id="sesoneb" name="session_1" value="workshop_2"/> Landscaping Ideas</label> 
 
      <label><input type="radio" id="sesonec" name="session_1" value="workshop_3" /> Pest Control</label> 
 
     </p> 
 
     </fieldset> 
 
</body> 
 

 
</html>

+0

ありがとうございました!文字列を帳簿の値に一致させるのを忘れてしまった。それは今意味がある:) – RDudek

関連する問題