お問い合わせフォームなどの確認画面をページリロード無しで表示する
2014年08月28日
確認画面を既存の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は、入力に問題が無かった際に関数を呼び出せますので、そこへ確認ボタンが押されたらの処理を入れます。
