フォーム内容を上から順番にJavaScriptでCookieに入れて、また戻す方法

質問

フォームにかかれている内容を上から順番にCookieに入れて
次にそのページに来たときに読みこれるようにしたいのですが、わからなくなってしまいました。

まず下記でJavaScriptに値を渡します。
onClick="saveCookie(this.form.elements[0].value,this.form.elements[1].value,this.form.elements[2].value)

次にJavaScriptで処理します。

-----------------------------------------------
xDay = new Date;
xDay.setYear(xDay.getYear() + 1);
xDay = xDay.toGMTString();
cook = new Array();

function saveCookie(value01,value02,value03){
cook[0] = value01;
cook[1] = value02;
cook[2] = value03;

cooks = escape(cook[0]);
i = 1;
while (cook[i]){
cooks += "%00" + escape(cook[i]);
i++;
}
document.cookie = "fat_cookie=" + cooks + "; expires=" + xDay;
}

function loadCookie(){
cooklng = document.cookie.length;
cook = document.cookie.split("; ");
cooks = "";
i = 0;
while (cook[i]){
if (cook[i].substr(0,11) == "fat_cookie="){
cooks = cook[i].substr(11,cook[i].length);
break;
}
i++;
}

cook = cooks.split("%00");
？？？ = unescape(cook[0]);　←ここがわかりません。
}

window.onload=loadCookie;
-----------------------------------------------

Cookieに保存して、またバラバラにするところまでは出来たのですが
最後にフォームに戻すところでわからなくなってしまいました。
色々試したのですがうまくいきません。

どなたかわかる方いらっしゃいましたら、
よろしくお願いします。

回答No.1

flowermaze · ベストアンサー

<form name="Form">などとフォームに名前をつけておき、

document.Form.elements[0].value = unescape(cook[0]);
とやれば戻せるのでは？

ラジオボタンやチェックボックス、リストなどの場合でしたら、ひとつひとつの値をcookieと比較して、一致する場合にcheckedやselectedにするって感じですかね。

私は要素名を使ってこんな感じで書いています。
テキストボックス、ラジオボタン、セレクトボックスのそれぞれの処理例です。

// Cookie出力
function getCookie(){
中略（クッキーを配列cookに取得）
document.Form.V1.value = unescape(cook[0]);
h = document.Form.V2.length;
for (i=0; i < j; i++) {
if (document.Form.V2[i].value == cook[1]) {
document.Form.V2[i].checked = true;
}
}
j = document.Form.V2.length;
for (k=0; k < j; k++) {
if (document.Form.V2[k].value == cook[2]) {
document.Form.V2[j].selected = true;
}
}
}

フォーム
<form name="Form" onsubmit="saveCookie(V1.value,V2.value,V3.value)">
<input type="text" name="V1">
<input type="radio" name="V2" value="1">
<input type="radio" name="V2" value="2">
<select name="V3">
<option value="1">1
<option value="2">2
<option value="3">3
<input type="submit" value="送信">
</select>
</form>

ご参考になりましたら幸いです。

お礼

ありがとうございます。出来ました！

いいとこまでは行ってたんですが、フォーム名なしで下記のようにしてたのがダメな原因でした。
名前付けたら出来ました。
document.this.form.elements[0].value = unescape(cook[0]);

教えてもらったままだとCookieが無い場合「undefined」と表示されていたので下記のようにしました。
if (cook[0]) document.form.elements[0].value = unescape(cook[0]);

ラジオボタンやチェックボックスの使い方もありがとうございます。参考にさせてもらいます。
また質問することがあるかと思いますが、その時はよろしくお願いします。
では失礼します。

補足

お礼を書いてから気づいたのですが、フォームの名前を付けずに下記でも出来ました。
document.forms[0].elements[0].value = unescape(cook[0]);

でも名前付けた方がわかりやすいですね。