【Javascript】フォームにひな形保存・呼び出し機能を追加する | Wood-Roots:blog

2012
10/31

フォームにひな形保存・呼び出し機能を追加する

DEMO

大量の似たようなデータをフォームから入力する際にあったら便利だと思い作成しました。
入力内容をボタンをクリックすることでcookieに保存し、再度呼び出すためのボタンをクリックすれば入力内容が反映されます。

同様の機能を持ったjQuery Autosaveというプラグインがありますが、こちらはcheckboxの保存に対応していない（name=”form[]”という配列で渡すタイプ）ので、自前で書いてみました。

ADs

HTML

HTMLは特に難しい点もない普通のフォームです。
headにjquery.cookie.jsを読みこませるのを忘れないようにしてください。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!-- head内は以下のようにjQueryとjquery.cookie.jsが必要です -->
<script src="https://www.google.com/jsapi"></script>
<script>google.load("jquery", "1.7");</script>
 
<!-- jquery.cookie.jsは必須 -->
<script type="text/javascript" src="jquery.cookie.js"></script>
 
<!-- formは特に難しい点はないと思います。 -->
<input type="button" class="save" value="　ひな形を保存　" />　　<input type="button" class="load" value="　ひな形を読み込み　" />
 
<form action="" id="form">
<dl>
<dt>テキスト</dt>
<dd><input type="text" name="form01" /></dd>
<dt>メール</dt>
<dd><input type="email" name="form02" /></dd>
<dt>TEL</dt>
<dd><input type="tel" name="form03" /></dd>
<dt>チェックボックス</dt>
<dd>
<input type="checkbox" name="form04[]" />チェックボックス1<br />
<input type="checkbox" name="form04[]" />チェックボックス2<br />
<input type="checkbox" name="form04[]" />チェックボックス3
</dd>
<dt>ラジオボタン</dt>
<dd>
<input type="radio" name="form05" />ラジオボタン1<br />
<input type="radio" name="form05" />ラジオボタン2<br />
<input type="radio" name="form05" />ラジオボタン3
</dd>
<dt>セレクト</dt>
<dd>
<select name="form06">
<option value="1">セレクト1</option>
<option value="2">セレクト2</option>
<option value="3">セレクト3</option>
</select>
</dd>
</dl>
<input type="submit" value="　送信する　" />
 
</form>
<br />
<br />
 
<input type="button" class="save" value="　ひな形を保存　" />　　<input type="button" class="load" value="　ひな形を読み込み　" />

Javascript

外部JSファイルかhead内に直接書くかで機能するようになります。
もしjQuery autosaveのように自動で保存するような処理を加える場合は、setIntervalでtrigger(‘click’)を呼び出せばいいのではないかと思います。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
(function($) {
$(function(){
 
//対象とするフォームの指定
var input = $('form#form');
//保存されるフォームの要素（submit,button,resetは除外）
var input_elem = $(input).find('input,textarea,select').not('[type="submit"],[type="button"],[type="reset"]');
 
//どのボタンをクリックしたら処理を実行するか
var savebtn = $('input.save'); //保存ボタン
var loadbtn = $('input.load'); //呼び出しボタン
 
 
//保存処理
$(savebtn).on('click',function(){
$.each(input_elem,function(key,value){
//フォーム要素すべてに連番data属性付加
$(this).attr('data-keys','saveform'+key);
 
console.log($(this)[0].tagName);
 
//保存する内容を振り分け
var type = $(this).attr('type');
if(type == 'radio' || type == 'checkbox'){ //ラジオかチェックボックスの時
var setval = $(this).attr('checked'); //チェックされていればcheckedが返るので、そのままクッキーに保持
}
else {  //それ以外（valueをそのまま保持しても問題がない要素を想定している）
var setval = $(this).val();
}
//ラジオ、チェックボックスの場合はcheckedか否か、それ以外はvalueをそのまま保持する
$.cookie('saveform'+key,null); //一旦初期化
$.cookie('saveform'+key,setval);
});
});
 
//呼び出し処理
$(loadbtn).on('click',function(){
$.each(input_elem,function(key,value){
//フォーム要素すべてに連番data属性付加
$(this).attr('data-keys','saveform'+key);
 
//フォームのtypeによって振り分け
var type = $(this).attr('type');
//ラジオかチェックの時はクッキーの値がcheckedであればchecked属性を追加、そうでなければ属性ごと削除
if(type == 'radio' || type == 'checkbox'){
//保存値がcheckedのときはchecked=checkedを代入
if($.cookie($(this).attr('data-keys')) == 'checked'){
$(this).attr('checked','checked');
} else {
$(this).removeAttr('checked');
}
}
//それ以外はクッキーに保存された値をそのままvalueに突っ込む
else {
$(this).val($.cookie($(this).attr('data-keys')));
}
});
});
 
 
 
});
})(jQuery);

ADs

Related Articles関連記事

Post Comments

メールアドレスが公開されることはありません。

Comments

お世話になります。
javascriptは触り始めたばかりです。javascript歴、現在の
ところ20時間くらいでしょうか。
当方現在運営中のアパレルネットショップに商品選択フォームを
付けようとしています。
まだ何のスキルも身についていないのに、必要に迫られ、拾い物で
何とか急いで形にしようとして、ほうぼうで醜態をさらしております。
で、こちらのページのコードを少々アレンジして自サイトにアップしてみました。
まずはありがとうございます。
で、自サイトにアップしたやつを数時間、いろいろ動作テスト。
だけど何かおかしい……やっぱ、にわかプログラマーには無理か？
　失望感いっぱいでもう一度こちらのサイトへ戻ってきて、
デモページをじっくり見せてもらったところです。
それで気づいたのですが、ラジオボタンの保存・読み込みが
出来ていないのですね。
最後の選択肢（こちらのデモページではラジオボタン3）にcheckedの
場合だけ正常に保存が効いて、その他の場合は「全てチェックなし」
に化けてしまっています。
当方さっそくいまから別の逃げ道を探しはじめますが、管理者様、
どうかご覧になっていたら、お暇なときに修正版をアップしてくださいまし。

  • 熊ポン剛弘
  • 2013年11月19日 2:24 AM

自力で手直しさせてもらいました。
以下のJSコードで正常動作すると思います。
お騒がせいたしました。そして有難うございました。
うちのネットショップで有効活用させてもらいます。
ここにはHTMLタグは書けないのですが、これでどうでしょうか？

  • 熊ポン剛弘
  • 2013年11月19日 4:07 AM

たびたびの書き込みで申し訳ありません。
さきほどのコードだとFirefox/ChromeだけはOKですが
肝心のIE9では撃沈です。
もう少し頑張ってみます。

  • 熊ポン剛弘
  • 2013年11月19日 5:17 AM

＞熊ポン剛弘　様
コメントありがとうございます。
ご迷惑をおかけして申し訳ございません。

ラジオボタンとチェックボックスで分岐しているところ、removeAttrでチェックを削除しようとしているところを

$(this).prop(‘checked’,false);

とすれば私の環境ではIEでも動作しました。

https://wood-roots.com/sample/autosave/index2.html

にアップロードしましたので一度お試しいただけますでしょうか。
よろしくお願いいたします。

動きました！
index2.html の方は３大ブラウザいずれも正常動作しました。
にわかプログラマの私には、一人じゃ何にもできず
woodroots様の助けを借りなければあと数十時間は必要でした。
さっそく自サイトでも実用化できています。
感謝です。

  • 熊ポン剛弘
  • 2013年11月19日 6:43 PM

Category

Archive

Search

Social