クッキーを使って入力フォームのデータを再読み込み

【覚え書き】

お問い合わせページとかでフォームを使ったデータ送信をするとき、入力確認画面や必須項目エラーなどを表示するページを使うことがよくあると思いますが、訂正のために 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;

この記事へのコメント


この記事へのトラックバック