Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。

コメント欄やログインフォームとかで良くある「次回から入力を省略する」を実現する方法。前回と前々回を踏まえ、Javascriptで実装してみます。

ブログのコメントフォームを例にとって実行。動作確認はサンプルファイルにて。HTMLは、こんな感じ。

1. <form method="post" action="" id="commentForm" onsubmit="return savePreset(this);">
2. <dl>
3. <dt>名前</dt>
4. <dd><input type="text" name="name" value="" /></dd>
5. <dt>Webサイト</dt>
6. <dd><input type="text" name="url" value="" /></dd>
7. <dt>コメント</dt>
8. <dd><textarea name="comment"></textarea></dd>
9. </dl>
10. <p>
11. <input type="submit" value="　送信　" />
12. <label for="save"><input type="checkbox" value="yes" name="save" id="save" checked="checked" /> 名前とアドレスを保存する</label>
13. </p>
14. </form>

以下がスクリプト部分です。

1. function savePreset(thisform){
2. if(thisform.save.checked)
3. {
4. var preName = thisform.name.value;
5. var preURL = thisform.url.value;
6. setCookie('name', preName, 14, '', '', '');
7. setCookie('url', preURL, 14, '', '', '');
8. }
9. }

「名前とアドレスを保存する」にチェックが入っている場合のみ、「名前」と「Webサイト」の値を引っ張って関数setCookie()に渡しています。実際にCookieをどうこうしている関数は、「./with Imagination」のTop 10 custom JavaScript functions of all timeから拝借。

そして保存した情報を表示させるのが、以下の関数。

1. window.onload = function(){
2. loadPreset('name', 'url', 'commentForm')
3. };
4.  
5. function loadPreset(name, url, targetForm) {
6. var preName = getCookie(name);
7. var preURL = getCookie(url);
8. if(document.cookie)
9. {
10. document.getElementById(targetForm).name.value = preName;
11. document.getElementById(targetForm).url.value = preURL;
12. }
13. }

Sig.が自作した部分はonload部分と関数savePreset()およびloadPreset()となりますが、この部分は直接HTMLに書いたほうが良いでしょう。もうちょっと巧く書ければ良かったんですが、外部ファイルに記述するには汎用性がないからです。ま～用途からして、そんなに意味もないだろうから妥協してるんですが。

ちなみに、Cookieの有効期限は14日となります。これが長いか短いかは人によるでしょうが、任意で調節してください。

関連ページ

• Archiva, Dateオブジェクト
• Archiva, Cookieメモ
• Archiva, 動作サンプル

参照サイト

• ./with Imagination, Top 10 custom JavaScript functions of all time
• QuirksMode, Cookie
• Core JavaScript 1.5 Guide, Date Object