お問い合わせフォームなどの確認画面をページリロード無しで表示する
確認画面を既存のHTMLを使って表示する
お問い合わせフォームなど、POSTした後に確認画面を表示し、入力内容を確認して貰ってから送信するという形式のフォームを見た事があると思います。そのまま送信されてしまうフォームも有りますが、入力内容を確認出来ないのはちょっと不親切です。
また、確認画面は出るのだけど、Javascriptのアラートだったり、表組とかページデザインなど無視して真っ白なページに確認画面を出すようなフリーCGIなど、これもあまりスマートでは有りません。
今回ご紹介する方法は、jQueryを使い、フォーム部分のコーディングを活かしつつ入力確認画面を出す方法です。
必須マーク付けてますが、バリデーションは行ってません。入力チェックに関しては最後に参考例を掲載します。
formのHTMLコーディングに関して
先ず最初にテキストフォームなどを並べるHTMLですが、tableだとスマートフォンに対応させる場合に幅が手狭になるので使えません。項目とテキストエリアを改行(※しかし縦長になる)して配置するか、floatなどを使ってテーブルっぽく表現する事になります。
display:tableが最適なのですが、旧IEが対応出来ないので、floatでテーブルっぽく並べます。
CSS
.fm_table{ width: 700px; margin-left: auto; margin-right: auto; } .fm_tr{ overflow: hidden; border-bottom: 4px dotted #DDDDDD; } .fm_th{ float: left; width: 150px; padding: 10px; text-align: right; font-weight: bold; } .fm_td{ float: left; width: 510px; padding: 10px; }
HTML
<div class="fm_table"> <dl class="fm_tr"> <dt class="fm_th"><span class="fred">※</span>テキスト</dt> <dd class="fm_td"> <input name="str" type="text" id="str" size="35" maxlength="30"> </dd> </dl> </div>
tableっぽく横並びになるよう、floatで配置しています。
フォームにclassを定義する
<input name="str" type="text" id="str" size="35" maxlength="30" class="def fm">
class=”def fm”
defは確認画面で非表示にする為の指定、fmはフォームの部品である印です。
これを踏まえ、フォームをコーディングします。
<form id="form"> <div class="fm_table"> <dl class="fm_tr"> <dt class="fm_th"><span class="fred def">※</span>テキスト</dt> <dd class="fm_td"> <input name="str" type="text" id="str" size="35" maxlength="30" class="def fm"> </dd> </dl> <dl class="fm_tr"> <dt class="fm_th">パスワード</dt> <dd class="fm_td"> <input name="pass" type="password" id="pass" size="35" maxlength="30" class="def fm"> </dd> </dl> <dl class="fm_tr"> <dt class="fm_th">セレクト</dt> <dd class="fm_td"> <select name="sel" id="sel" class="def fm"> <option value=""></option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </dd> </dl> <dl class="fm_tr"> <dt class="fm_th">ラジオ</dt> <dd class="fm_td"> <input type="radio" name="radio" id="radio1" value="赤" class="def fm"><label for="radio1" class="def"> 赤</label> <input type="radio" name="radio" id="radio2" value="青" class="def fm"><label for="radio2" class="def"> 青</label> </dd> </dl> <dl class="fm_tr"> <dt class="fm_th">チェックボックス</dt> <dd class="fm_td"> <input type="checkbox" name="checkbox1" id="checkbox1" value="桃" class="def fm"><label for="checkbox1" class="def"> 桃 </label> <input type="checkbox" name="checkbox2" id="checkbox2" value="緑" class="def fm"><label for="checkbox2" class="def"> 緑 </label> </dd> </dl> <dl class="fm_tr"> <dt class="fm_th">テキストエリア</dt> <dd class="fm_td"> <textarea name="text" id="text" class="def fm"></textarea> </dd> </dl> </div> <div class="fm_button"> <input type="button" id="reset" value="リセット" class="def"> <input type="button" id="check" value="送信内容の確認 >>" class="def"> <input type="button" id="back" value="<< 訂正" class="hide"> <input type="button" id="send" value="送信 >>" class="hide"> </div> </form>
訂正・送信ボタンはデフォルトで非表示になるよう、hideクラスへdisplay:none;を定義して有ります。また、必須マーク(※)にもdefを指定し、確認画面では非表示にするようにします。
jQueryの処理
以下の3つの処理を行います。
1)確認ボタンが押されたら 入力フォームを非表示にして入力内容をテキストで表示する
2)訂正ボタンが押されたら デフォルトの画面に戻す
3)送信ボタンが押されたら 送信完了画面を表示する
入力フォームの表示・非表示を制御
/* * 表示・非表示を制御する */ var change = function(type){ if(type === true){ $(".def").hide(); $(".hide").show(); }else{ $(".def").show(); $(".hide").hide(); $(".del").remove(); //確認画面で表示したテキストを削除 } };
確認ボタンが押されたら
/* * 確認ボタンが押されたら */ $(document).on('click','#check',function(){ $(".fm").each( function() { var id = $(this).attr("id"); var fm = $("#"+id); //フォームのタイプによって処理を分岐 switch( fm.prop("type") ){ case 'text': case 'password': case 'select-one': $(fm).after('<span class="hide del">'+fm.val()+'</span>'); break; case 'radio': var val = $("#"+id+":checked"); if( $(val).prop('checked') ) { $(fm).after('<span class="hide del">'+val.val()+'</span>'); } break; case 'checkbox': var val = $("#"+id+":checked"); if( $(val).prop('checked') ) { $(fm).after('<span class="hide del">'+val.val()+'</span>'); } break; case 'textarea': var val = fm.val(); val = val.replace(/\n/g, "<br />"); $(fm).after('<span class="hide del">'+val+'</span>'); break; } }); change(true); });
確認ボタンが押されたら、class=”fm”の要素を取得し、ループしながらフォームタイプに応じて処理します。チェックボックスとラジオボタンはチェックされていれば処理、テキストエリアは改行の処理を行います。
走査した要素の下に入力した値を追加し、テキストエリアなどを非表示にします。
ここでは汎用的にフォームタイプで処理していますが、複雑な処理が必要ならば、idごとに処理しても良いと思います。
リセットボタンが押されたら
/* * リセットボタンが押されたら */ $(document).on('click','#reset',function(){ reset(); }); /* * フォームを初期化する */ var reset = function(type){ $('input,textarea').not('input[type=\"radio\"],input[type=\"checkbox\"],:hidden, :button, :submit,:reset').val(''); $('input[type=\"radio\"], input[type=\"checkbox\"],select').removeAttr('checked').removeAttr('selected'); $("option").attr('selected',false); };
resetという関数で、フォーム入力内容を一括でクリアする処理を定義してますので、これを呼び出して初期化します。
訂正ボタンが押されたら
/* * 訂正ボタンが押されたら */ $(document).on('click','#back',function(){ change(); });
change関数で、非表示にしたフォーム部品を表示にし、確認画面で表示したテキストを削除します。
送信ボタンが押されたら
/* * 送信ボタンが押されたら */ $(document).on('click','#send',function(){ var data = $("#form").serialize(); $.ajax({ type: "POST", url: "form.php", data: data, success: function(callback){ } }); $("#form").html('送信しました'); reset(); });
フォームの中身をメッセージで置き換えます。
PHPなどに値を渡して処理したいのであれば、非同期通信で処理します。そのPHPでセンドメール処理を行えば、メールフォームになるって事ですね。
jQuery部分のまとめ
$(document).ready(function(){ /* * 確認ボタンが押されたら */ $(document).on('click','#check',function(){ $(".fm").each( function() { var id = $(this).attr("id"); var fm = $("#"+id); //フォームのタイプによって処理を分岐 switch( fm.prop("type") ){ case 'text': case 'password': case 'select-one': $(fm).after('<span class="hide del">'+fm.val()+'</span>'); break; case 'radio': var val = $("#"+id+":checked"); if( $(val).prop('checked') ) { $(fm).after('<span class="hide del">'+val.val()+'</span>'); } break; case 'checkbox': var val = $("#"+id+":checked"); if( $(val).prop('checked') ) { $(fm).after('<span class="hide del">'+val.val()+'</span>'); } break; case 'textarea': var val = fm.val(); val = val.replace(/\n/g, "<br />"); $(fm).after('<span class="hide del">'+val+'</span>'); break; } }); change(true); }); /* * リセットボタンが押されたら */ $(document).on('click','#reset',function(){ reset(); }); /* * 訂正ボタンが押されたら */ $(document).on('click','#back',function(){ change(); }); /* * 送信ボタンが押されたら */ $(document).on('click','#send',function(){ var data = $("#form").serialize(); console.log(data); $.ajax({ type: "POST", url: "form.php", data: data, success: function(callback){ } }); $("#form").html('送信しました'); reset(); }); /* * フォームを初期化する */ var reset = function(type){ $('input,textarea').not('input[type=\"radio\"],input[type=\"checkbox\"],:hidden, :button, :submit,:reset').val(''); $('input[type=\"radio\"], input[type=\"checkbox\"],select').removeAttr('checked').removeAttr('selected'); $("option").attr('selected',false); }; /* * 表示・非表示を制御する */ var change = function(type){ if(type === true){ $(".def").hide(); $(".hide").show(); }else{ $(".def").show(); $(".hide").hide(); $(".del").remove(); } }; });
バリデーションライブラリを組み込む
入力チェックを自分で書くのは大変なので、jQueryのライブラリを使う方が楽です。
私はこれをお薦め致します。実装も簡単です。設定などは割愛致します。
/* * jQuery-Validation-Engineの設定 */ jQuery("#form").validationEngine( 'attach', { ajaxFormValidation: true , onBeforeAjaxFormValidation: beforeCall //送信ボタンを押した時に実行される関数 }); /* * 確認ボタンが押されたら */ function beforeCall(){ //確認ボタンが押されたらの処理 }
jQuery-Validation-Engineは、入力に問題が無かった際に関数を呼び出せますので、そこへ確認ボタンが押されたらの処理を入れます。