前回の 「PHP初心者入門その２・Webページから入力データを送信（FORM, $_POST, $_GET）」 では入力されたデータを自分自身の PHP スクリプトで受信し、そのデータを表示するところまでを行いました。
データを表示した画面では入力画面への戻りのリンクは在るのですが、 入力画面に戻っても、その前の入力値が保持されておらず、まっさらな状態から始まることになります。
データ表示画面で入力データを保持し、入力画面へ戻る時にはその値を戻す必要があります。 そこで表示画面でデータを保持する為に隠しフィールドの <INPUT TYPE="HIDDEN" ... > を使います。
この記事では <INPUT TYPE="HIDDEN"> を使ってデータを保持する方法について説明します。
<INPUT TYPE="HIDDEN">を使ったデータの保持
前回の記事の 「PHP初心者入門その２・Webページから入力データを送信（FORM, $_POST, $_GET）」 の最後では以下の様な例を示しました。
<?php /* [begin-2-4.php] */
// $_POST["name"]の存在確認
if (isset($_POST["name"]) == false) {
// 存在しない場合、送信ページの表示
?>
<!DOCTYPE?html>
<html>
<head>
<meta charset="UTF-8">
<title>FORMタグを使った送信</title>
</head>
<body>
<h1>FORMタグを使った送信</h1>
<form action="begin-2-4.php" method="post">
名前：<input type="text" name="name" /><br>
住所：<input type="text" name="addr" /><br>
<input type="submit" />
</form>
</body>
</html>
<?php
} else {
// 存在する場合、確認ページの表示
?>
<!DOCTYPE?html>
<html>
<head>
<meta charset="UTF-8">
<title>FORMタグの内容の受信</title>
</head>
<body>
<h1>FORMタグの内容の受信</h1>
<?php
echo "名前：".$_POST["name"]."<br>";
echo "住所：".$_POST["addr"]."<br>";
?>
<br>
<a href="begin-2-4.php">入力に戻る</a>
</body>
</html>
<?php
}
?>
$_POST["name"] の存在を確認することで入力ページを表示するのか、または確認ページを表示するのかを分けています。
このスクリプトの確認ページの表示部分を変更するのですが、 自分自身に送信する為にFORM タグを追加し、 その中に「名前」と「住所」を保持する <INPUT TYPE="HIDDEN"> タグを追加します。
$_POST["name"] の存在確認では確認画面からの戻りを判定できないので、 「submit」ボタンに「value」を追加してどちらのボタンからの処理なのかを判定させています。
変更したスクリプトは以下の様になります。
<?php /* [begin-3-1.php] */
// $_POST["name"]の存在確認
if ((isset($_POST["submit_button"]) == false) ||
(isset($_POST["submit_button"]) == true && $_POST["submit_button"] == "戻る")) {
// 初めての表示化または「submit_button」が"戻る"の場合、送信ページの出力
// $_POSTから名前の取得
$strName = "";
if (isset($_POST["name"]) == true && $_POST["name"] != "") {
$strName = $_POST["name"];
}
// $_POSTから住所の取得
$strAddr = "";
if (isset($_POST["addr"]) == true && $_POST["addr"] != "") {
$strAddr = $_POST["addr"];
}
?>
<!DOCTYPE?html>
<html>
<head>
<meta charset="UTF-8">
<title>FORMタグを使った送信</title>
</head>
<body>
<h1>FORMタグを使った送信</h1>
<form action="begin-3-1.php" method="post">
名前：<input type="text" name="name" value="<?php echo $strName; ?>" /><br>
住所：<input type="text" name="addr" value="<?php echo $strAddr; ?>" /><br>
<input type="submit" name="submit_button" value="送信" />
</form>
</body>
</html>
<?php
} else {
// 「submit_button」が"送信"の場合、確認ページの出力
?>
<!DOCTYPE?html>
<html>
<head>
<meta charset="UTF-8">
<title>FORMタグの内容の受信</title>
</head>
<body>
<h1>FORMタグの内容の受信</h1>
<?php
echo "名前：".$_POST["name"]."<br>";
echo "住所：".$_POST["addr"]."<br>";
?>
<form action="begin-3-1.php" method="post">
<input type="hidden" name="name" value="<?php echo $_POST["name"]; ?>" />
<input type="hidden" name="addr" value="<?php echo $_POST["addr"]; ?>" />
<input type="submit" name="submit_button" value="戻る" />
</form>
</body>
</html>
<?php
}
?>
$_POST["submit_button"] の「value」を判定して処理を変える方法を示しましたが、 少しスッキリしない感じがします。
ボタンの「value」を変えた場合には、判定での文字列も直さないといけないですし。
そこで、画面のモードと言う考え方を導入したいと思います。ここでのモードとは処理モードとほぼ同じです。
このモードを使って、自分のスクリプトがどの状態にあるのかを判定し、処理を分けていきます。
次の項目としてその説明を行います。
画面モードの導入
画面モード（処理モード）として考えられるのは以下の様なものがあると思います。
- 初期モード ：初めてこのページがアクセスされた場合の処理
- 確認モード ：入力画面から渡されたデータを確認表示を行う処理
- 再表示モード：確認画面から戻りによる再表示を行う処理
- 登録モード ：入力されたデータを登録を行う処理
初期モードとは単にこのスクリプトが呼ばれた最初の状態で、 このモードの処理は入力領域をクリアな状態で表示します。
確認モードはPOSTされてきたデータを確認用に表示し、 「戻る」と「登録」ボタンを表示します。
当然、隠れフィールド <INPUT TYPE="HIDDEN"> に入力データを保存しておきます。
再表示モードは確認モードから戻されたデータを、 入力フィールドの値として再表示します。
登録モードは確認モードから渡されたデータを、 データベース等に登録し、「登録しました」等のメッセージを表示します。 ここでは、戻りの処理として自分自身へのリンクを設置します。
先ずはモードの値なのですが、私がよくやる方法としては以下の様に宣言を使っています。 （この宣言をいろんな画面のスクリプトで使う場合は別ファイルとして宣言しインクルードします）
この画面モードですが当然 <INPUT TYPE="HIDDEN"> で値を保持します。
尚、この時の値は、処理の遷移を起させるために、次の処理のモードの値を設定します。 （つまりはドミノ倒し的に処理を進める感じでしょうか）
<?php
define('MODE_INITIAL', 0); //初期モード
define('MODE_CONFIRM', 1); //確認モード
define('MODE_REDISP', 2); //再表示モード
define('MODE_REGIST', 3); //登録モード
?>
尚、スクリプトの処理は以下の様になっています。
- 処理モードの取得
- 名前と住所の取得
- 初期モード、再表示モードの場合は入力画面を表示する
- 確認モードの場合は確認画面を表示する（「戻る」及び「登録」ボタンの表示）
- 確認モードの場合は登録処理を行い、結果のメッセージを表示する
それでは上記のスクリプトを画面モードの導入で変更したものを以下に示します。
<?php /* [begin-3-2.php] */
// 処理モードの宣言
define('MODE_INITIAL', 0); //初期モード
define('MODE_CONFIRM', 1); //確認モード
define('MODE_REDISP', 2); //再表示モード
define('MODE_REGIST', 3); //登録モード
// 処理モードの取得
$intMode = MODE_INITIAL;
if (isset($_POST["mode"]) == true && $_POST["mode"] != "") {
$intMode = intval($_POST["mode"]);
}
// 名前と住所の取得
$strName = "";
$strAddr = "";
if ($intMode == MODE_CONFIRM || $intMode == MODE_REDISP || $intMode == MODE_REGIST) {
// $_POSTから名前の取得
if (isset($_POST["name"]) == true && $_POST["name"] != "") {
$strName = $_POST["name"];
}
// $_POSTから住所の取得
if (isset($_POST["addr"]) == true && $_POST["addr"] != "") {
$strAddr = $_POST["addr"];
}
}
if ($intMode == MODE_INITIAL || $intMode == MODE_REDISP) {
// 初期モード、再表示モードの場合
?>
<!DOCTYPE?html>
<html>
<head>
<meta charset="UTF-8">
<title>FORMタグを使った送信</title>
</head>
<body>
<h1>FORMタグを使った送信</h1>
<form action="begin-3-2.php" method="post">
名前：<input type="text" name="name" value="<?php echo $strName; ?>" /><br>
住所：<input type="text" name="addr" value="<?php echo $strAddr; ?>" /><br>
<input type="hidden" name="mode" value="<?php echo(MODE_CONFIRM); ?>" />
<input type="submit" value="確認" />
</form>
</body>
</html>
<?php
} elseif ($intMode == MODE_CONFIRM) {
// 確認モードの場合
?>
<!DOCTYPE?html>
<html>
<head>
<meta charset="UTF-8">
<title>FORMタグの内容の確認</title>
</head>
<body>
<h1>FORMタグの内容の受信</h1>
<?php
echo "名前：".$_POST["name"]."<br>";
echo "住所：".$_POST["addr"]."<br>";
?>
<form action="begin-3-2.php" method="post">
<input type="hidden" name="name" value="<?php echo $_POST["name"]; ?>" />
<input type="hidden" name="addr" value="<?php echo $_POST["addr"]; ?>" />
<input type="hidden" name="mode" value="<?php echo(MODE_REDISP); ?>" />
<input type="submit" value="戻る" />
</form>
<form action="begin-3-2.php" method="post">
<input type="hidden" name="name" value="<?php echo $_POST["name"]; ?>" />
<input type="hidden" name="addr" value="<?php echo $_POST["addr"]; ?>" />
<input type="hidden" name="mode" value="<?php echo(MODE_REGIST); ?>" />
<input type="submit" value="登録" />
</form>
</body>
</html>
<?php
} elseif ($intMode == MODE_REGIST) {
// 登録モードの場合
// =====
// ここでデータベース等への登録処理を記述
// =====
?>
<!DOCTYPE?html>
<html>
<head>
<meta charset="UTF-8">
<title>登録処理後の確認</title>
</head>
<body>
<h1>登録処理を行いました</h1>
<?php
echo "名前：".$_POST["name"]."<br>";
echo "住所：".$_POST["addr"]."<br>";
?>
<a href="begin-3-2.php">入力に戻る</a>
</body>
</html>
<?php
}
?>
それではスクリプトを実行してみます。
「送信」ボタンを押下すると、確認モードとなり入力データの「名前」「住所」を表示します。
「戻る」ボタンを押下すると、上の画面に戻ります。
「登録」ボタンを押下すると、登録モードとなり登録メッセージ及び、入力データの「名前」「住所」を表示します。
「入力に戻る」リンクを押下すると最初の入力データがクリアされた状態に戻ります。
FORMタグの冗長な部分をJavascriptで簡略化
上記のスクリプトの確認モードの中で FORMタグ を2個記述していました。
これでは少し処理が冗長なので、この部分を Javascript を使ってすっきりさせたいと思います。
変わった部分は Javascript の関数を追加したところと、「戻る」「登録」ボタンを「submit」から「button」属性とし 「OnClick」イベントで Javascript の関数をコールしているところです。 （動作は全く同じものです。）
<?php /* [begin-3-3.php] */
// 処理モードの宣言
define('MODE_INITIAL', 0); //初期モード
define('MODE_CONFIRM', 1); //確認モード
define('MODE_REDISP', 2); //再表示モード
define('MODE_REGIST', 3); //登録モード
// 処理モードの取得
$intMode = MODE_INITIAL;
if (isset($_POST["mode"]) == true && $_POST["mode"] != "") {
$intMode = intval($_POST["mode"]);
}
// 名前と住所の取得
$strName = "";
$strAddr = "";
if ($intMode == MODE_CONFIRM || $intMode == MODE_REDISP || $intMode == MODE_REGIST) {
// $_POSTから名前の取得
if (isset($_POST["name"]) == true && $_POST["name"] != "") {
$strName = $_POST["name"];
}
// $_POSTから住所の取得
if (isset($_POST["addr"]) == true && $_POST["addr"] != "") {
$strAddr = $_POST["addr"];
}
}
if ($intMode == MODE_INITIAL || $intMode == MODE_REDISP) {
// 初期モード、再表示モードの場合
?>
<!DOCTYPE?html>
<html>
<head>
<meta charset="UTF-8">
<title>FORMタグを使った送信</title>
</head>
<body>
<h1>FORMタグを使った送信</h1>
<form action="begin-3-3.php" method="post">
名前：<input type="text" name="name" value="<?php echo $strName; ?>" /><br>
住所：<input type="text" name="addr" value="<?php echo $strAddr; ?>" /><br>
<input type="hidden" name="mode" value="<?php echo(MODE_CONFIRM); ?>" />
<input type="submit" value="確認" />
</form>
</body>
</html>
<?php
} elseif ($intMode == MODE_CONFIRM) {
// 確認モードの場合
?>
<!DOCTYPE?html>
<html>
<head>
<meta charset="UTF-8">
<title>FORMタグの内容の確認</title>
<script>
function doSubmit(mode){
document.forms["inp_form"].mode.value = mode;
document.forms["inp_form"].submit();
return true;
}
</script>
</head>
<body>
<h1>FORMタグの内容の受信</h1>
<?php
echo "名前：".$_POST["name"]."<br>";
echo "住所：".$_POST["addr"]."<br>";
?>
<form action="begin-3-3.php" name="inp_form" method="post">
<input type="hidden" name="name" value="<?php echo $_POST["name"]; ?>" />
<input type="hidden" name="addr" value="<?php echo $_POST["addr"]; ?>" />
<input type="hidden" name="mode" value="0" />
<input type="button" value="戻る" onclick="doSubmit(<?php echo(MODE_REDISP); ?>)">
<input type="button" value="登録" onclick="doSubmit(<?php echo(MODE_REGIST); ?>)">
</form>
</body>
</html>
<?php
} elseif ($intMode == MODE_REGIST) {
// 登録モードの場合
// =====
// ここでデータベース等への登録処理を記述
// =====
?>
<!DOCTYPE?html>
<html>
<head>
<meta charset="UTF-8">
<title>登録処理後の確認</title>
</head>
<body>
<h1>登録処理を行いました</h1>
<?php
echo "名前：".$_POST["name"]."<br>";
echo "住所：".$_POST["addr"]."<br>";
?>
<a href="begin-3-3.php">入力に戻る</a>
</body>
</html>
<?php
}
?>
この記事のまとめ
今回の記事では <INPUT TYPE="HIDDEN"> を使ってデータを保持する方法について説明してきました。
目的とするマスタデータのメンテナンス処理に近づいてはいますが、 入力データのエラーチェックや実際のデータベースへの登録処理がまだまだ必要です。
今後、このスクリプトを発展させてさらに進めていきたいと思います。