フォーム-ラジオボタンが選ばれた状態でページ遷移させる

webサイト制作

今回のフォームは、商品紹介ページに「商品A」「商品B」「商品C」の3つのコンテンツがあり、それぞれの購入ボタンをクリックして申し込みページに遷移した時、それぞれの商品のラジオボタンにチェックがはいっている状態にしたい。
申し込みページ以降は基本的には前回のフォームと一緒ですが、セキュリティやリダイレクトなど細かい機能を付けていきます。

ページ構成

1.商品紹介ページ「item.html」
2.申し込みページ「input.php」
3.確認ページ「confirm.php」
4.完了ページ「thanks.html」

今回の ポイント

  • 「購入ボタン」をクリックしてページ遷移した時にJavaScriptの「location.hash 」を使って、選んだ商品のラジオボタンがcheckedの設定になっているようにする
  • 確認、完了ページにアクセス出来ないように申し込みページに戻るリダイレクトを設定
  • 文字列を入力する項目にはプログラムを入れられないようにセキュリティをかける
商品紹介ページ「item.html」

商品紹介ページにボタンを設置

<p><a href="out.php#item_01">商品Aはこちら</a></p>
<p><a href="out.php#item_02">商品Bはこちら</a></p>
<p><a href="out.php#item_03">商品Cはこちら</a></p>
2.申し込みページ「input.php」
<p><input name="itemname" value="商品A" id="item_01" type="radio">商品A</p>
<p><input name="itemname" value="商品B" id="item_02" type="radio">商品B</p>
<p><input name="itemname" value="商品C" id="item_03" type="radio">商品C</p>

 

さらにJavaScriptでcheckedの値を取得

window.addEventListener('DOMContentLoaded', function(e){
document.querySelector(location.hash).checked=true;
});
リダイレクトの設定

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

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

確認画面に入力画面に戻るボタンを設置

<button type="button" onclick=history.back()>戻る</button>
文字列を入力する項目にセキュリティ
$name = htmlspecialchars($_POST["onamae"],ENT_QUOTES);
自身の完了画面ページに遷移する

サンクスページを作成し、送信ボタンを押した後に自作したサンクスページへ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を付ける