【サンプルあり】htmlページ間のデータ受け渡し【$_POST変数】

今回の記事では、formタグにて、指定したURLにデータを送信してみます。
こちらの記事はgetで行っているのに対し、今回はpostでやってみます。

出勤・退勤送信のサンプルコード
ポイント解説

出勤・退勤送信のサンプルコード

前準備として、こちらの記事内で紹介している、htmlページ内でPHPを動作させる方法を行って下さい。

下記コードをコピー＆ペーストしてC:/xampp/htdocs/test/study_btn2.htmlに保存、 xamppを起動し、ブラウザで表示してください。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>出勤/退勤選択</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <?php
        $select = 0;
        if(isset($_POST['status'])==false){
            print '<p>直接アクセスしました。</p>';
        }else{
            if($_POST['status']==1){
                print '<p>出勤を選択しました。</p>';
            }else if($_POST['status']==2){
                print '<p>退勤を選択しました。</p>';
                $select = 1;
            }else {
                print '<p>想定していないstatus。</p>';
            }
        }
    ?>
    <div>
      <form name="myForm" action="study_btn2.html" method="post">
        <p>
          <select id="id_status" name="status">
            <option value="1">出勤</option>
            <option value="2">退勤</option>
          </select>
        </p>
        <p>
          <input type="submit" value="送信">
        </p>
      </form>
    </div>
    <script>
        var obj = document.getElementById("id_status");
        obj.selectedIndex = <?=$select?>;
    </script>
</body>
</html>

出勤または退勤を選択して送信をクリックすると、何を選択したか表示されましたね。

押したボタンによって$_POST変数の中身が違うので、何を押したか判断できるので、出勤と退勤の区別がつけられる仕組みです。

ポイント解説

$_POST[‘status’]がない場合(http://localhost/test/study_btn2.htmlに直接アクセスしたとき)は”直接アクセスしました。”を表示します。

送信ボタンをクリックした場合は、formのactionがstudy_btn2.htmlなので、画面上の変化はありませんがpostメソッドでデータが送信されていますので、$_POST[‘status’]にselectで選択したvalueが入っています。

$_GET変数の場合は、key名が”?○○=xx”だったのに対して、$_POST変数の場合は、key名は、formタグ内のnameとなります。
今回でいうとname=”status”ここの部分です。

ついでに、javascriptにて選択した方を選択済みとしています。
$select変数に10行目で0(初期値)を設定し、退勤を押してアクセスしてきた場合は18行目で$select変数に1を設定しています。
そしてjavascriptにてselectedIndexしています。