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

DEMO

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

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

AD

HTML

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

Javascript

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

AD

Share

Commentsコメント

メールアドレスは公開されません。コメントは必ずご入力ください。

HTMLタグは使用できません。ソースコードを書き込みたい場合はCodetterGistCodePenなどのご利用が便利です。

熊ポン剛弘 さんより
お世話になります。
javascriptは触り始めたばかりです。javascript歴、現在の
ところ20時間くらいでしょうか。
当方現在運営中のアパレルネットショップに商品選択フォームを
付けようとしています。
まだ何のスキルも身についていないのに、必要に迫られ、拾い物で
何とか急いで形にしようとして、ほうぼうで醜態をさらしております。
で、こちらのページのコードを少々アレンジして自サイトにアップしてみました。
まずはありがとうございます。
で、自サイトにアップしたやつを数時間、いろいろ動作テスト。
だけど何かおかしい……やっぱ、にわかプログラマーには無理か?
 失望感いっぱいでもう一度こちらのサイトへ戻ってきて、
デモページをじっくり見せてもらったところです。
それで気づいたのですが、ラジオボタンの保存・読み込みが
出来ていないのですね。
最後の選択肢(こちらのデモページではラジオボタン3)にcheckedの
場合だけ正常に保存が効いて、その他の場合は「全てチェックなし」
に化けてしまっています。
当方さっそくいまから別の逃げ道を探しはじめますが、管理者様、
どうかご覧になっていたら、お暇なときに修正版をアップしてくださいまし。
熊ポン剛弘 さんより
自力で手直しさせてもらいました。
以下のJSコードで正常動作すると思います。
お騒がせいたしました。そして有難うございました。
うちのネットショップで有効活用させてもらいます。
ここにはHTMLタグは書けないのですが、これでどうでしょうか?
<!--
//
//(function($) {
// $(function(){
//
////対象とするフォームの指定
//var input = $('form#form1');
////保存されるフォームの要素(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).prop('data-keys','saveform'+key);
//
// console.log($(this)[0].tagName);
//
// //保存する内容を振り分け
// var type = $(this).prop('type');
// if(type == 'radio' || type == 'checkbox'){ //ラジオかチェックボックスの時
// var setval = $(this).prop('checked'); //true,false,undefinedいずれかが返る
// }
// else {    //ラジオかチェックボックス以外ならそのまま保存
// 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).prop('data-keys','saveform'+key);
//
// //フォームのtypeによって振り分け
// var type = $(this).prop('type');
//
// //ラジオかチェックの時はクッキーの値がcheckedであればchecked属性を追加、そうでなければ属性ごと削除
// if(type == 'radio' || type == 'checkbox'){
// //保存値がtrue(チェックあり)またはundefined(属性なし)の場合はtrue(チェックあり)に統一
// if($.cookie($(this).prop('data-keys')) != 'false'){ //false(チェックなし)の場合
// $(this).prop("checked",true);
// }
// }
// //それ以外はクッキーに保存された値をそのままvalueに突っ込む
// else {
// $(this).val($.cookie($(this).prop('data-keys')));
// }
// });
//});
//
//
//
// });
//})(jQuery);
-->
熊ポン剛弘 さんより
たびたびの書き込みで申し訳ありません。
さきほどのコードだとFirefox/ChromeだけはOKですが
肝心のIE9では撃沈です。
もう少し頑張ってみます。
管理人 さんより
>熊ポン剛弘 様
コメントありがとうございます。
ご迷惑をおかけして申し訳ございません。

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

$(this).prop('checked',false);

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

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

にアップロードしましたので一度お試しいただけますでしょうか。
よろしくお願いいたします。
熊ポン剛弘 さんより
動きました!
index2.html の方は3大ブラウザいずれも正常動作しました。
にわかプログラマの私には、一人じゃ何にもできず
woodroots様の助けを借りなければあと数十時間は必要でした。
さっそく自サイトでも実用化できています。
感謝です。