【覚え書き】
お問い合わせページとかでフォームを使ったデータ送信をするとき、入力確認画面や必須項目エラーなどを表示するページを使うことがよくあると思いますが、訂正のために history.back() を使って入力フォームに戻ってみるとすべてのフィールドが見事に空っぽになってしまったってことありませんか？
中途半端にセッションを使ったページなどでは特に起きやすいですよね。
ってことで、javascript ではありますがクッキーを使って入力データしたデータを再読み込みさせるスクリプトを用意してみました。
※HTML内のinputタグやselectタグ、textareaタグには重複しないidをつけておく必要があります。
（idでデータを再読み込みしているため）
フォームデータを再読み込みさせるスクリプト[Download]【form_reload.js】
// COOKIEに使用するKey（適当な文字列）
var key = 'SetFormData';
// COOKIEへ書き込み
function SetCookie() {
var p = new Array();
var d1 = document.getElementsByTagName('input');
for (var i = 0; i < d1.length; i++) {
if (d1[i].checked) p.push(d1[i].id + '&Chkd');
if (d1[i].type == 'text') p.push(d1[i].id + '&' + escape(d1[i].value));
}
var d2 = document.getElementsByTagName('select');
for (var i = 0; i < d2.length; i++) {
var s = new Array();
for ( var n = 0; n < d2[i].options.length; n++) {
p.push(d2[i].id + '&' + d2[i].options[n].selected + '&' + n);
}
}
var d3 = document.getElementsByTagName('textarea');
for (var i = 0; i < d3.length; i++) {
p.push(d3[i].id + '&' + escape(d3[i].value));
}
var ssl = (document.location.protocol == 'https:') ? ';secure' : '';
document.cookie = key + '=' + p.join('|') + '|_EOD;' + ExpDate(60) + ssl;
}
// COOKIEの有効期限を取得
function ExpDate(t) {
exp = new Date();
exp.setTime(exp.getTime() + 1000 * t);
return 'expires=' + exp.toGMTString();
}
// COOKIEのデータを元に戻す
function SetParam() {
if (document.cookie) {
var k = key + '=';
var p = new Array();
var c = document.cookie;
var st = c.indexOf(k, 0);
var ed = c.indexOf('|_EOD', 0);
var d = c.substring(st + k.length, ed);
p = d.split('|');
for (var i = 0; i < p.length; i++) {
v = p[i].split('&');
if (v[1] == 'Chkd') document.getElementById(v[0]).checked = true;
else if (v[1] == 'true') document.getElementById(v[0]).options[v[2]].selected = true;
else if (v[1] == 'false') document.getElementById(v[0]).options[v[2]].selected = false;
else if (v[1]) document.getElementById(v[0]).value = unescape(v[1]);
}
DelCookie();
}
}
// COOKIE消去
function DelCookie() {
document.cookie = key + '=;' + ExpDate(-1);
}
// ページ読み込みと送信時の処理
window.onload = SetParam;
window.onsubmit = SetCookie;
| 
| 
| 
| 
