ウォッチ
お世話になります。PHPでフォームを作っているのですが、分からないことあり質問させて頂きます。
お申込みフォームを作っており、個人の場合と法人との場合で入力してもらう内容が異なる部分がございます。
デフォルトでチェックされているラジオボタンは「個人」とし、その状態で表示されているフォームはお名前とE-Mailだけにしたく、「法人」をチェックすると会社名というフォームが表示されるようにしたいと考えています。
また、フォームに入力を行い送信ボタンを押したとき（POSTしたとき）、入力した内容に不備があった場合、登録へは進まず、入力し直すよう促したいのですが、この時、法人へとチェックが入っていたら会社名のフォームを出した状態で表示させたいと考えています。
この仕組みを実現したく、検索をしているものの知識が乏しく適切なワードが不明なためにこのような内容を説明しているサイトにたどり着けません。
恐れ入りますが、上記を実装するためにはどのようなワードが適切なのでしょうか？
ご教示ください。
よろしくお願いいたします。
No.3ベストアンサー
- 回答日時：
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です。
なお、入力値のチェックをまったくやっていないので、
セキュリティの対応が必要になると思います。
-
-
- 0
- 件
-
sukitaroさん
お世話になっております。
お忙しい中でのご回答、ならびに都度ソースまでご提示いただき誠にありがとうございます。
2つのファイルを用意し実装しました。
描いていた動きを実現出来、感謝いたします。
検索ワードが悪かったためか、なかなか思うような情報に辿り着くこと出来ず困っていたので、本当に助かりました。
sukitaroさんに書いていただいたソースを拝見しながら動きを確認し、学んでみたいと思います。
本当にありがとうございました。
No.2
- 回答日時：
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>
-
-
- 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>
・
・
以下続く
と、
No.1
- 回答日時：
>入力した内容に不備があった場合
というのが、どのような不備を指すか分からなかったので、
とりあえず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>
-
-
- 0
- 件
-
sukitaroさん
はじめまして。ご親切なアドバイスをありがとうございます。
ソースまで記載していただき感謝いたします。
>というのが、どのような不備を指すか分からなかったので、
>とりあえずrequiredを指定しました。
すみません。説明が不十分でしたね。
仰るようにrequiredを入れることで入力漏れは防げるのですが、例えば確認ページを設け、入力内容を変更するためフォームに戻ってきたとき、もし法人にチェックが入っている状態（法人名を入力している状態）のときは、法人名のフォームが表示された状態にしたいと考えての質問でした。
引き続き、ご指導頂ければ幸いです。
よろしくお願いいたします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！
似たような質問が見つかりました
- Access（アクセス） Access 登録ボタンからサブフォームの更新 1 2022/07/22 10:23
- Microsoft ASP グーグルフォーム 1 2022/12/30 18:16
- Visual Basic（VBA） ユーザーフォーム「frm_基本❶」を立ち上げると新規で入力する行数を右下のNoとして表示しています。 1 2023/03/16 19:02
- その他（データベース） Accessフォームからパラメーターで表示したレコードを指定のExcelのセルへ転送する方法について 2 2022/08/22 18:04
- その他（セキュリティ） Facebookアカウントを乗っ取られ、ログインも出来ずパスワードの再設定もできずに困っている 2 2023/02/17 14:24
- JavaScript ソースコードは下の共有コードサイト「張り紙」にあります。 入力フォームの javascript で 1 2022/05/11 11:01
- その他（プログラミング・Web制作） 入力フォームへ、データを自動的に入力するプログラム。どうやって作る？ 4 2023/01/16 10:24
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- その他（プログラミング・Web制作） google formsで回答者をスプレッドシートに記載する方法 1 2023/06/23 11:22
- JavaScript 空白で入力フォームのボタンをクリックしたら、ブラウザの上部からjavascriptで 表示されるアラ 1 2022/05/20 11:16
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
テキストボックス入力を半角英...
-
フォームの値が０だったら空白...
-
Javascriptが機能せず原因が分...
-
javascriptで入力フォームが空...
-
フッター下部を追従しているコ...
-
VBScriptで未入力のチェック（...
-
onClickとsubmitの処理順序
-
数字の1文字目を消したい
-
HTMLで入力したものを変数で扱...
-
ラジオボタンによるフォームの...
-
submit後、同じ入力欄に戻らせ...
-
イベント発生時に入力待ち状態...
-
return trueとreturn falseの用...
-
プルダウン 項目が多いので先頭...
-
【jQuery】input nameの文字列...
-
二つの入力欄に、同時に同じ文...
-
onchangeイベントを強制的に発...
-
<input>の選択肢をプルダウンメ...
-
ボタンかリンクをクリックする...
-
％の計算の仕方
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
onClickとsubmitの処理順序
-
条件により、リンク先に画面遷...
-
javascriptで入力フォームが空...
-
フォームから入力すると、入力...
-
ラジオボタンによるフォームの...
-
JSPとJavaScriptの連携について...
-
テキストフィールドに入力した...
-
日付入力欄の表示形式を自動的...
-
最初の入力を判断
-
PDFフォームで条件つき金額を表...
-
テキストボックスを無効にする...
-
URLの/以降だけを入力したいです。
-
vbsでフォームに値を入力できない
-
フォームの値が０だったら空白...
-
テキストエリア入力文字数の表...
-
VBScriptで未入力のチェック（...
-
テキストボックス入力を半角英...
-
数字の1文字目を消したい
-
Javascriptが機能せず原因が分...
-
javascriptで入力禁止文字をチ...
おすすめ情報
POSTして入力内容に不備があった場合、出来れば法人ならではの会社名にあたる変数に値があった場合は、法人にチェックを入れ、かつkしあh名というフォームを表示する。こんな流れが望ましいかと考えています。
アドバイス頂戴できれば幸いです。
よろしくお願いいたします。