とっておきの手土産を教えて

ラジオボタンによるフォームの開閉を行いたい

解決済

  • 質問者：a4_chapp
  • 質問日時：
  • 回答数：3件

お世話になります。PHPでフォームを作っているのですが、分からないことあり質問させて頂きます。

お申込みフォームを作っており、個人の場合と法人との場合で入力してもらう内容が異なる部分がございます。

デフォルトでチェックされているラジオボタンは「個人」とし、その状態で表示されているフォームはお名前とE-Mailだけにしたく、「法人」をチェックすると会社名というフォームが表示されるようにしたいと考えています。

また、フォームに入力を行い送信ボタンを押したとき（POSTしたとき）、入力した内容に不備があった場合、登録へは進まず、入力し直すよう促したいのですが、この時、法人へとチェックが入っていたら会社名のフォームを出した状態で表示させたいと考えています。

この仕組みを実現したく、検索をしているものの知識が乏しく適切なワードが不明なためにこのような内容を説明しているサイトにたどり着けません。

恐れ入りますが、上記を実装するためにはどのようなワードが適切なのでしょうか？
ご教示ください。

よろしくお願いいたします。

「ラジオボタンによるフォームの開閉を行いた」の質問画像

質問者からの補足コメント

  • POSTして入力内容に不備があった場合、出来れば法人ならではの会社名にあたる変数に値があった場合は、法人にチェックを入れ、かつkしあh名というフォームを表示する。こんな流れが望ましいかと考えています。

    アドバイス頂戴できれば幸いです。
    よろしくお願いいたします。

      補足日時：2022/03/31 21:34
    通報する
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.3ベストアンサー

  • 回答者： sukitaro
  • 回答日時：

No2です。



PHPのsessionを使うんですね。
ページの遷移があるので、
form_input.php と、form_check.php の2つのファイルが必要です。

form_input.phpが、

<?php
session_start();

function e(string $str): string {
return htmlspecialchars($str, ENT_QUOTES, 'UTF-8');
}

$check_kojin = "";
$check_houjin = "";

if(isset($_SESSION["radio"]) && $_SESSION["radio"] === "houjin"){
$check_houjin = "checked";
}else{
$check_kojin = "checked";
}

?>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>input</title>
</head>
<body>
<form method="post" action="form_check.php" name="form">
<label><input type="radio" name="radio" value="kojin" <?= $check_kojin ?>>個人</label>
<label><input type="radio" name="radio" value="houjin" <?= $check_houjin ?>>法人</label><br>
<label style="display:none">会社名: <input type="text" name="company" value="<?= e($_SESSION["company"]??"") ?>" ></label><br>
<label>お名前: <input type="text" name="name" value="<?= e($_SESSION["name"]?? "") ?>" ></label><br>
<label>E-Mail: <input type="email" name="email" value="<?= e($_SESSION["email"]?? "") ?>" ></label><br>
<input type="submit" value="送信"><br>
</div>
</form>
<script>
const radio_btns = [...document.querySelectorAll('input[name="radio"]')],
company_name = document.querySelector('input[name="company"]'),
radio_check = (e)=>{
if(radio_btns[0].checked){
company_name.parentNode.style.display = 'none';
}else if(radio_btns[1].checked){
company_name.parentNode.style.display = 'inline';
}
};

document.addEventListener('DOMContentLoaded', radio_check, false);
radio_btns.forEach(elm => {elm.addEventListener('change',radio_check,false)});
</script>
</body>
</html>


そして、form_check.phpが、

<?php
session_start();

function e(string $str): string {
return htmlspecialchars($str, ENT_QUOTES, 'UTF-8');
}

$_SESSION["radio"] = $_POST["radio"]?? "";
$_SESSION["company"] = $_POST["company"]?? "";
$_SESSION["name"] = $_POST["name"]?? "";
$_SESSION["email"] = $_POST["email"]?? "";

?>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>check</title>
</head>
<body>
<table>
<tbody>
<?php
if($_SESSION["radio"] === "houjin"){
echo "<tr><td>属性</td><td>法人</td></tr>";
echo "<tr><td>会社名</td><td>".e($_SESSION["company"])."</td></tr>";
}else{
echo "<tr><td>属性</td><td>個人</td></tr>";
} ?>
<tr><td>お名前</td><td><?= e($_SESSION["name"]) ?></td></tr>
<tr><td>E-Mail</td><td><?= e($_SESSION["email"]) ?></td></tr>
</tbody>
</table>
<a href="form_input.php">戻る</a>
</body>
</html>


とりあえずこれで動くと思います。
PHPのバージョンは7.4です。

なお、入力値のチェックをまったくやっていないので、
セキュリティの対応が必要になると思います。
    • good
    • 0
    • 件
通報する
この回答へのお礼

sukitaroさん

お世話になっております。
お忙しい中でのご回答、ならびに都度ソースまでご提示いただき誠にありがとうございます。

2つのファイルを用意し実装しました。
描いていた動きを実現出来、感謝いたします。

検索ワードが悪かったためか、なかなか思うような情報に辿り着くこと出来ず困っていたので、本当に助かりました。

sukitaroさんに書いていただいたソースを拝見しながら動きを確認し、学んでみたいと思います。

本当にありがとうございました。

通報する
お礼日時：2022/04/03 18:30

No.2

  • 回答者： sukitaro
  • 回答日時：

No1です。



「確認ページ」のPHPがどうなっているのか分からないので、
ご提示の文章だけから回答をすることは難しいです。

確認ページのPHPを補足で示していただければ、
回答できることがあるかもしれません。

もしJavaScriptだけで作るとしたら、こんな感じでしょうか。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>form</title>
</head>
<body>
<form method="post" action="" name="form">
<div id="input">
<label><input type="radio" name="radio" value="" checked>個人</label>
<label><input type="radio" name="radio" value="">法人</label><br>
<label style="display:none">会社名: <input type="text" name="company" value="" ></label><br>
<label>お名前: <input type="text" name="name" value="" ></label><br>
<label>E-Mail: <input type="email" name="email" value="" ></label><br>
<input id="conf_btn" type="button" value="入力">
</div>
<div id="confirm" style="display:none;">
<p>入力内容を確認</p>
<table id="table">
<tr><td>属性</td><td></td></tr>
<tr><td>会社名</td><td></td></tr>
<tr><td>お名前</td><td></td></tr>
<tr><td>E-Mail</td><td></td></tr>
</table>
<input type="submit" value="送信"><br>
<input id="back_btn" type="button" value="修正">
</div>
</form>
<script>
const input = document.getElementById('input'),
conf_div = document.getElementById('confirm'),
conf_table = document.getElementById('table'),
conf_btn = document.getElementById('conf_btn'),
back_btn = document.getElementById('back_btn'),
radio_btns = [...document.querySelectorAll('input[name="radio"]')],
company_name = document.querySelector('input[name="company"]'),
personal_name = document.querySelector('input[name="name"]'),
email = document.querySelector('input[name="email"]'),
radio_check = (e)=>{
if(radio_btns[0].checked){
company_name.parentNode.style.display = 'none';
}else if(radio_btns[1].checked){
company_name.parentNode.style.display = 'inline';
}
},
insert_row = (table, item, content)=>{
const newRow = table.insertRow(-1);
const newItem = newRow.insertCell(0);
newItem.textContent = item;
const newContent = newRow.insertCell(1);
newContent.textContent = content;
};

radio_btns.forEach(elm => {elm.addEventListener('change',radio_check,false)});
conf_btn.addEventListener('click',()=>{
input.style.display = 'none';
conf_div.style.display = 'block';
conf_table.innerHTML = '';
if(radio_btns[0].checked){
insert_row(conf_table, '属性', '個人');
}else{
insert_row(conf_table, '属性', '法人');
insert_row(conf_table, '会社名', company_name.value);
}
insert_row(conf_table, 'お名前', personal_name.value);
insert_row(conf_table, 'E-Mail', email.value);
},false);
back_btn.addEventListener('click',()=>{
input.style.display = 'block';
conf_div.style.display = 'none';
},false);

</script>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

sukitaroさん

お世話になっております。
提示いただいたソースで動かしてみました。
凄いです。javascriptの知識がないのですが各value値に何もなくても表示させることが可能なのですね。

ただゴメンなさいなさい！動きは描いているモノそのものなのですが、value値にはphpの変数を置く方法だとどのようになるのでしょうか？

以下はsukitaroさんのソースの上方にphpのソースを加えたものですが（ラジオボタンにkojin、houjinと値を加えています）、phpで受け取った値を変数に入れ（一時的にセッションに入れている）、このradioの変数が、houjinのときは開いた状態とすることは可能なのでしょうか？

こうすることで確認画面後の修正の他、同様のスクリプトでDBに登録済みのデータを修正する場面にも使えるかと考えている次第です。

sukitaroさんの知識であれば javascriptだけで行けそうな気もするのですが、今一度ご指導頂ければ幸いです。

お忙しい中恐縮いたします。
よろしくお願いいたします。


<?php
session_start();

if(isset($_POST["radio"])){
$_SESSION["radio"] = $_POST["radio"];
}

$radio = $_SESSION["radio"];

?>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>form</title>
</head>
<body>
<form method="post" name="form">
<div id="input">
<label><input type="radio" name="radio" value="kojin" checked>個人</label>
<label><input type="radio" name="radio" value="houjin">法人</label>

・
・
以下続く

と、

通報する
お礼日時：2022/04/02 16:56

No.1

  • 回答者： sukitaro
  • 回答日時：

>入力した内容に不備があった場合



というのが、どのような不備を指すか分からなかったので、
とりあえずrequiredを指定しました。

参考：
https://developer.mozilla.org/ja/docs/Web/HTML/A …


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>form</title>
</head>
<body>
<form method="post" target="" name="form">
<label><input type="radio" name="radio" value="" checked>個人</label>
<label><input type="radio" name="radio" value="">法人</label><br>
<label style="display:none">会社名: <input type="text" name="company" value="" ></label><br>
<label>お名前: <input type="text" name="name" value="" required></label><br>
<label>E-Mail: <input type="email" name="email" value="" required></label><br>
<input type="submit" value="送信">
</form>
<script>
const radio_btns = [...document.querySelectorAll('input[name="radio"]')],
company_name = document.querySelector('input[name="company"]');

document.addEventListener('click',(e)=>{
if(e.target === radio_btns[1]){
company_name.parentNode.style.display = 'inline';
company_name.required = true;
}else if(e.target === radio_btns[0]){
company_name.parentNode.style.display = 'none';
company_name.required = false;
}
},false);
</script>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

sukitaroさん

はじめまして。ご親切なアドバイスをありがとうございます。
ソースまで記載していただき感謝いたします。

>というのが、どのような不備を指すか分からなかったので、
>とりあえずrequiredを指定しました。

すみません。説明が不十分でしたね。
仰るようにrequiredを入れることで入力漏れは防げるのですが、例えば確認ページを設け、入力内容を変更するためフォームに戻ってきたとき、もし法人にチェックが入っている状態（法人名を入力している状態）のときは、法人名のフォームが表示された状態にしたいと考えての質問でした。

引き続き、ご指導頂ければ幸いです。
よろしくお願いいたします。

通報する
お礼日時：2022/04/01 21:32

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

おすすめ情報

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報