更新日:2021年12月17日
form関連の主要タグ全種、input、radio、select、checkbox、textareaの値が送信された時、PHPのPOSTで受け取って、それを確認画面で表示する方法のご紹介です。
確認画面ということで、formの項目は表示されているものの、値の変更や選択が出来なくするというのが今回のポイントです。
readonly(読み込み専用)という便利な要素がありますが、これが一部のフォーム部品にしか使えないのが困りものです。
【input、radio、select、checkbox、textarea】form関連のタグに値が入力されているかチェックするjQueryの記事の続きになるような記事になりますので、より理解を深めたい方はこちらも読んで下さい。
まず以下のようなHTMLのフォームがあったとして、それが送信された後の確認画面を作成する想定になります。
仮にindex.htmlとしましょう。
次にindex.htmlから送れてきた値を受け取るkakunin.phpのソースコードになります。
フォームの部品ごとに解説していきましょう。
まずはinputのtype=text要素についてですが、関連のソースコードは以下です。
$name = $_POST['name'];
<input name="name" type="text" value="<?=$name?>" readonly>
受け取った値を$nameに代入して、value要素に出力しています。
ポイントはreadonlyが書かれていることです。これにより読み込み専用となり、ユーザーは目視することは出来ても、編集することが出来ません。
確認画面になるので、編集されては困りますし、こういう仕様が理想ですね。
次にラジオボタンについてですが、関連のソースコードは以下です。
$gender = $_POST['gender'];
if($gender == "man") {
$gender_ck[0] = "checked";
$gender_ck[1] = "disabled";
}else if($gender == "woman") {
$gender_ck[1] = "checked";
$gender_ck[0] = "disabled";}
<label><input name="gender" type="radio" value="man" <?=$gender_ck[0]?>> 男</label>
<label><input name="gender" type="radio" value="woman" <?=$gender_ck[1]?>> 女</label>
受け取った値を$genderに代入して、if文で比較しています。もしも送られてきた値が男だったら、男のラジオボタンにチェックを入れ、女のラジオボタンは変更できないように処理しています。女の時はその逆ですね。
次はセレクトタグ要素についてですが、関連のソースコードは以下です。
$date = $_POST['date'];
if($date == "1/1") {
$date_ck[0] = "selected";
$date_ck[1] = "disabled";
$date_ck[2] = "disabled";
}else if($date == "2/1") {
$date_ck[1] = "selected";
$date_ck[0] = "disabled";
$date_ck[2] = "disabled";
}else if($date == "3/1") {
$date_ck[2] = "selected";
$date_ck[0] = "disabled";
$date_ck[1] = "disabled";
}
<select name="date">
<option value="">選択してください</option>
<option value="1/1" <?=$date_ck[0]?>>1月1日</option>
<option value="2/1" <?=$date_ck[1]?>>2月1日</option>
<option value="3/1" <?=$date_ck[2]?>>3月1日</option>
</select>
受け取った値を$dateに代入して、if文で比較しています。処置はラジオボタンの時と同じですね。違いはセレクトタグでは選択済みはcheckedではなくselectedなので、selectedにしています。
次はチェックボックス要素についてですが、関連のソースコードは以下です。
$property = $_POST['property'];
if(isset($property)) {
for($i = 0; $i < count($property); $i++) {
if($property[$i] == "cellPhone") {
$property_ck[0] = "checked";
}else if($property[$i] == "car") {
$property_ck[1] = "checked";
}else if($property[$i] == "house") {
$property_ck[2] = "checked";
}
}
}
<input name="property[]" type="checkbox" value="cellPhone" <?=$property_ck[0]?> onclick="return false;"> 携帯電話
<input name="property[]" type="checkbox" value="car" <?=$property_ck[1]?> onclick="return false;"> 自動車
<input name="property[]" type="checkbox" value="house" <?=$property_ck[2]?> onclick="return false;"> 家
受け取った値を$propertyに代入して、$_POST['property']が送られてきているかどうかを確認したのち、for文にかけてからif文で比較しています。
なぜチェックボックスだけfor文にかけて繰り返し処理をしているかというと、チェックボックスから送られてきた値は配列に入った状態で送られてくるからです。なぜならチェックボックスが複数選択が出来る仕様だからですね。
そしてポイントとなるのがHTML側にonclick="return false;"をつけていることです。これをすることでクリックされてもチェックがつかないように制御しています。
最後はテキストエリア要素についてですが、関連のソースコードは以下です。
$note = $_POST['note'];
<textarea name="note" readonly><?=$note?></textarea>
受け取った値を$noteに代入して、textarea要素に挟んで出力しています。textareaではvalue要素を使えないので注意です。
ここのポイントもreadonlyを書いて読み込み専用としていることです。
form関連の主要タグであるinput、radio、select、checkbox、textareaの値が送信された時、受け取って編集されないようにする方法のご紹介でした。
微妙に制御の方法が違ったりと毎回調べがちな部分になりますので、ブックマークとかしとくと便利かと思います!
ご活用下さい。