頻繁に使うフォーム入力で、毎回お客様に手間かけさせるの何とかしたい
以前、JavaScriptでタイマを作成したお客様から別の依頼をいただきました。
注文フォームにお客様の情報を入力するのですが、一度入力内容を記憶させておき、次回以降は記憶内容を読み出して予めテキストボックスに出力させてほしいとのこと。
フォームの自動入力と言えばオートコンプリートがありますが、選択する手間すらかけさせないその心意気…！
作成したのはこちら（動作確認用のテスト版）
操作方法
会社名、部署名、名前、電話番号を入れてチェックした後、画面を更新してみてください。
テキストボックスにすでに文字が表示されているはずです。
全項目入れないと動作不良を起こすので、ご注意を。動作確認用なのでそこまで作りこんでないです。
動作
書き込み
動作としては、チェックボックスをチェックした時にonclickでLocalStorageに情報を入れています。
本当は送信ボタンを押した時にonsubmitで関数実行されるんですけど、動作確認用でとりあえずこれです。
読み込み
ページソースコードの読み込み時にscriptで情報を抜き出します。
キーに対して値を入れますが、上記のように会社名、部署名、名前、電話と４つの項目を１つずつキーセットして値を入れるのは拡張性に欠けるので、４つの項目が入った配列を１つの値として入れています。
配列を宣言して、そこにテキストボックスの内容をpushして入れていきます。
配列をそのまま渡すと不具合が出るので、一旦JSON形式の文字列に変換して保存させます。
詳細は外部サイトの「JavaScriptで連想配列をLocalStorageに保存する時の方法」を参照ください。
onsubmit()の注意点
onsubmitに関しては、取り扱いに注意が必要で、送信ボタンを押して実行されるのが普通ですが、テキストボックス内でエンター押したときも送信とみなされて処理されます。
これを回避するにはフォーム自体にonsubmitを入れて対処する必要があります。
詳細は細部サイトの「submitにセットしたonClickの挙動について」を参照くださいませ。
validate()でテキストボックスに値が入っているか簡単に確認する
テキストボックスに値が入っているか簡単に確認するにはvalidate()を使います。
<form onsubmit="validate()">
<input type="text" name="test" required>
</form>こんな感じでformが送信されるときにvalidate関数を動作させ、このときrequiredを入れた項目について確認がされます。
実際はもっと厳密に見る必要がありますが、とりあえず無入力かどうかだけ見るにはこれで十分でしょう。
まとめ
・LocalStorageを用いてフォームに自動入力する機能をつけました
・配列をLocalStorageに入れる際は、JSON形式に変換する必要がある
・送信ボタンはテキストボックス内でエンターを押したときも動作するので、formのonsubmit()で処理する
・テキストボックスに値が入っているかはvalidate()で確認する、requiredを入れた部分が対象