PHPとJavaScriptでお問い合わせフォームを作る～その2～

1. 確認ボタンを押したら、フォームに入力されている値のチェックを行う
2. 値のチェックが全てOKであればポップアップで確認画面を表示する
3. 送信ボタンを押したらメールを送信する
4. 送信完了したら送信完了の旨をポップアップ画面に表示し、OKボタンを押したらポップアップ画面を閉じる

前回は上記の1について説明したので、今回は2~4について、説明します。

まず、確認画面の表示の方法です。

• JavaScript

var w_size= 650;
var h_size= 400;
var l_position = Number((window.screen.width-w_size)/2);
var t_position = Number((window.screen.height-h_size)/2);

window.open('confirm.php:blank','confirm','width='+w_size+',height='+h_size+',top='+t_position+',left='+l_position+',menubar=no,toolbar=no,location=no,status=no,resizable=yes,scrollbars=yes');
document.form1.target = 'confirm';
document.form1.method='post';
document.form1.action = 'confirm.php';
document.form1.submit();

ちょい説明

window.openで小窓を作成しています。
document.フォーム名.～でフォームの送信先の指定やフォームの送信を行いっています。

次に確認画面の表示ですが、ここで大事なのがサニタイズ処理を行うことです。
サニタイズ処理はスクリプトを無効にする処理のことで、これを行わないとXSSを行わる可能性があるのでとても危険です。

• サニタイズ処理用の関数(PHP)

function sanitize($a) {
  $_a = array();
  foreach($a as $key=>$value) {
    if (is_array($value)) {
      $_a[$key] = sanitize($value);
    } else {
      $_a[$key] = htmlspecialchars($value);
    }
  }
  return $_a;
}

• 確認フォーム(HTML)

<form action="mail.php" method="post">
  <table class="mailform">
    <tbody>
      <tr>
        <th>法人名</th>
        <td><!--?php echo $_POST['company_name'];?--><input type="hidden" name="company_name" value="<?php echo $_POST['company_name']; ?>" /></td>
      </tr>
      <tr>
        <th>法人名(ふりがな)</th>
        <td><!--?php echo $_POST['company_name_kana'] ?--><input type="hidden" name="company_name_kana" value="<?php echo $_POST['company_name_kana']; ?>" /></td>
      </tr>
      <tr>
        <th>ご担当者名</th>
        <td><!--?php echo $_POST['name'] ?--><input class="validate required" type="hidden" name="name" value="<?php echo $_POST['name']; ?>" /></td>
      </tr>
      <tr>
        <th>ご担当者名(ふりがな)</th>
        <td><!--?php echo $_POST['name_kana'] ?--><input type="hidden" name="name_kana" value="<?php echo $_POST['name_kana']; ?>" /></td>
      </tr>
      <tr>
        <th>メールアドレス</th>
        <td><!--?php echo $_POST['mail'] ?--><input type="hidden" name="mail" value="<?php echo $_POST['mail']; ?>" /></td>
      </tr>
      <tr>
        <th>ご依頼内容</th>
        <td><!--?php echo $_POST['body'] ?--><input type="hidden" name="body" value="<?php echo $_POST['body']; ?>" /></td>
      </tr>
    </tbody>
  </table>
  <div style="text-align: center; margin-top: 15px;"><input type="submit" name="submit" value="送信" />
  <input onclick="window.close();" type="button" name="return" value="戻る" /></div>
</form>

ちょい説明

フォームに関してはformで受け取った値を表示しているだけです。
戻るボタンを押したときにwindow.closeでポップアップウィンドウを閉じるようにしました。

送信完了ページにも同じようにOKボタンにonClick=window.close()をつけて配置すればポップアップウィンドウを閉じることができます。