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

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

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

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

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

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

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

サンプル

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

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

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

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

CSS

[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;
}
[/css]

HTML

[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>
[/html]

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

フォームにclassを定義する

[html]
<input name="str" type="text" id="str" size="35" maxlength="30" class="def fm">
[/html]

class=”def fm”

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

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

[html]
<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="送信内容の確認 &gt;&gt;" class="def">
<input type="button" id="back" value="&lt;&lt; 訂正" class="hide">
<input type="button" id="send" value="送信 &gt;&gt;" class="hide">
</div>
</form>
[/html]

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

jQueryの処理

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

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

[js]
/*
* 表示・非表示を制御する
*/
var change = function(type){
if(type === true){
$(".def").hide();
$(".hide").show();
}else{
$(".def").show();
$(".hide").hide();
$(".del").remove(); //確認画面で表示したテキストを削除
}
};
[/js]

確認ボタンが押されたら

[js]
/*
* 確認ボタンが押されたら
*/
$(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);
});
[/js]

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

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

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

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

[js]
/*
* リセットボタンが押されたら
*/
$(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);
};

[/js]

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

訂正ボタンが押されたら

[js]
/*
* 訂正ボタンが押されたら
*/
$(document).on(‘click’,’#back’,function(){
change();
});
[/js]

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

送信ボタンが押されたら

[js]
/*
* 送信ボタンが押されたら
*/
$(document).on(‘click’,’#send’,function(){
var data = $("#form").serialize();

$.ajax({
type: "POST",
url: "form.php",
data: data,
success: function(callback){

}
});

$("#form").html(‘送信しました’);
reset();
});
[/js]

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

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

jQuery部分のまとめ

[js]
$(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();
}
};
});
[/js]

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

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

jQuery-Validation-Engine

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

サンプル

[js]
/*
* jQuery-Validation-Engineの設定
*/
jQuery("#form").validationEngine( ‘attach’, {
ajaxFormValidation: true
, onBeforeAjaxFormValidation: beforeCall //送信ボタンを押した時に実行される関数
});

/*
* 確認ボタンが押されたら
*/
function beforeCall(){
//確認ボタンが押されたらの処理
}
[/js]

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

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

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

PAGE TOP