WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

ajaxを使ってページ遷移とデータ送信を分ける

今回のお問い合わせフォームはphpを使い、

  • 入力画面
  • 確認画面
  • 完了画面

の3つを作成します。

入力画面の作例

https://codepen.io/yachin29/pen/ZEBNENN



万が一、確認画面からアクセスしてしまった際にそのままではpostで値が送られていない為エラーになってしまうので、それを回避するために値が空だったら入力画面にリダイレクトさせる処理を行います。

isset関数

issetを使う事で変数がセットされているか確認する事が出来ます。
あたまに「!」を付ける事で逆の意味になるので、以下の記述で「$_POST['name']」に値がセットされていなかったら、という意味になります。

!(isset($_POST['name']))
//$_POST["name"]の値が空だったらLocationで指定しているファイルに強制移動(リダイレクト)させる
if(!(isset($_POST['name']))){
 header('Location:index.html');
 exit;
}

セキュリティについて

NG
$name = $_POST["onamae"];


OK
$name = htmlspecialchars($_POST["onamae"],ENT_QUOTES);

入力画面に戻るボタン

<button type="button" onclick=history.back()>戻る</button>

自身の完了画面ページに遷移する

サンクスページを作成し、送信ボタンを押した後に自作したサンクスページへajaxでページ遷移させましょう。

$(function(){
$('#g-form').submit(function (event) {
var formData = $('#g-form').serialize();
$.ajax({
  url: "google FormのURL",
  data: formData,
  type: "POST",
  dataType: "xml",
  statusCode: {
    0: function(){
      window.location.href = "thanks.html";
      },
    200: function(){
     //失敗したときの処理
      }
    }
  });
//googleformへのページ遷移をキャンセル
event.preventDefault();
});
});

※formタグに#g-formを付ける

Google Formの値を取得する

Chromeの検証機能を使ってGoogleフォームの「Action」と「name」の値を取得し、HTMLフォームに挿入する。
name属性は階層の深い所にあるので「entry.」で検索し、「name="entry.00001234"」のようなname属性の値を取得しましょう。
複数項目の場合「name="entry.00001234_sentinel"」のようになっているので「entry.00001234」の部分だけ取ってきます。また複数項目は順番が後回しになっているので「entry.」の順番にも気をつけましょう。



複数項目の扱い

複数の項目が選ばれるようにするにはcheckboxを使用しますが、google formでは複数項目の扱い方が複雑なので、こちらで配列の中身を文字列に変換しておきます。

$aaa = implode("、", $_POST["配列名"]);