jQuery・Javascript jQueryを使った小技やAjax非同期通信などについて

お問い合わせフォームなどの確認画面をページリロード無しで表示する

2014年8月28日
この記事は掲載から909日経過しています。
情報が古い可能性が有りますのでご了承下さい

確認画面を既存のHTMLを使って表示する

お問い合わせフォームなど、POSTした後に確認画面を表示し、入力内容を確認して貰ってから送信するという形式のフォームを見た事があると思います。そのまま送信されてしまうフォームも有りますが、入力内容を確認出来ないのはちょっと不親切です。

また、確認画面は出るのだけど、Javascriptのアラートだったり、表組とかページデザインなど無視して真っ白なページに確認画面を出すようなフリーCGIなど、これもあまりスマートでは有りません。

今回ご紹介する方法は、jQueryを使い、フォーム部分のコーディングを活かしつつ入力確認画面を出す方法です。

サンプル

必須マーク付けてますが、バリデーションは行ってません。入力チェックに関しては最後に参考例を掲載します。

formのHTMLコーディングに関して

先ず最初にテキストフォームなどを並べるHTMLですが、tableだとスマートフォンに対応させる場合に幅が手狭になるので使えません。項目とテキストエリアを改行(※しかし縦長になる)して配置するか、floatなどを使ってテーブルっぽく表現する事になります。

display:tableが最適なのですが、旧IEが対応出来ないので、floatでテーブルっぽく並べます。

CSS

HTML

tableっぽく横並びになるよう、floatで配置しています。

フォームにclassを定義する

class=”def fm”

defは確認画面で非表示にする為の指定、fmはフォームの部品である印です。

これを踏まえ、フォームをコーディングします。

訂正・送信ボタンはデフォルトで非表示になるよう、hideクラスへdisplay:none;を定義して有ります。また、必須マーク(※)にもdefを指定し、確認画面では非表示にするようにします。

jQueryの処理

以下の3つの処理を行います。
1)確認ボタンが押されたら 入力フォームを非表示にして入力内容をテキストで表示する
2)訂正ボタンが押されたら
デフォルトの画面に戻す
3)送信ボタンが押されたら
送信完了画面を表示する

入力フォームの表示・非表示を制御

確認ボタンが押されたら

確認ボタンが押されたら、class=”fm”の要素を取得し、ループしながらフォームタイプに応じて処理します。チェックボックスとラジオボタンはチェックされていれば処理、テキストエリアは改行の処理を行います。

走査した要素の下に入力した値を追加し、テキストエリアなどを非表示にします。

ここでは汎用的にフォームタイプで処理していますが、複雑な処理が必要ならば、idごとに処理しても良いと思います。

リセットボタンが押されたら

resetという関数で、フォーム入力内容を一括でクリアする処理を定義してますので、これを呼び出して初期化します。

訂正ボタンが押されたら

change関数で、非表示にしたフォーム部品を表示にし、確認画面で表示したテキストを削除します。

送信ボタンが押されたら

フォームの中身をメッセージで置き換えます。

PHPなどに値を渡して処理したいのであれば、非同期通信で処理します。そのPHPでセンドメール処理を行えば、メールフォームになるって事ですね。

jQuery部分のまとめ

バリデーションライブラリを組み込む

入力チェックを自分で書くのは大変なので、jQueryのライブラリを使う方が楽です。

jQuery-Validation-Engine

私はこれをお薦め致します。実装も簡単です。設定などは割愛致します。

サンプル

jQuery-Validation-Engineは、入力に問題が無かった際に関数を呼び出せますので、そこへ確認ボタンが押されたらの処理を入れます。

  • このエントリーをはてなブックマークに追加
  • LINEで送る

このカテゴリーのその他の記事

PAGE TOP