2012
10/31

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

DEMO

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

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

ADs

HTML

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

Javascript

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

ADs

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

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