ロゴ
menu
HOME > ｊQuery・Javascript > お問い合わせフォームなどの確認画面をページリロード無しで表示する

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

確認画面を既存の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="送信内容の確認 &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>

訂正・送信ボタンはデフォルトで非表示になるよう、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-Validation-Engineの設定
 */
  jQuery("#form").validationEngine( 'attach', {
        ajaxFormValidation: true
      , onBeforeAjaxFormValidation: beforeCall //送信ボタンを押した時に実行される関数
  });

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

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

▲