お問合せフォームの内容を確認画面せ表示する方法

実現したいこと

問い合わせフォームで入力した内容をsessionを使い、確認画面で表示したい。

前提

入力フォーム(contact.php)で入力した内容を確認画面(comfirt.php)で表示したいのですがtelとkanaだけが表示されずにundifined indexと表示されています。他のnameやemailのエラーは出ていません。どこがおかしいかわからないのでご教授いただきたいです。

発生している問題・エラーメッセージ

undifined index :kana(confirm.php5行目)
undifined index :tel(confirm.php６行目)

該当のソースコード

《contact.php》お問合せフォーム
入力フォームこちらになります。
<?php

$name = "";
$kana = "";
$tel = "";
$email = "";
$body = "";

if($_SERVER['REQUEST_METHOD'] === 'POST')
{
$returnFlg = false;
if(! isset($_POST['name']))
{
$name = htmlspecialchars($_POST['name']);
$returnFlg = true;
}

if(! isset($_POST['kana']))
{
$kana = htmlspecialchars($_POST['kana']);
$returnFlg = true;
}

$tel = htmlspecialchars($_POST['tel']);

if(! isset($_POST['email']))
{
$email = htmlspecialchars($_POST['email']);
$returnFlg = true;
}

if(! isset($_POST['body']))
{
$body = htmlspecialchars($_POST['body']);
$returnFlg = true;
}

if(!$returnFlg)
{
if(count($errors) === 0){
$_SESSION['name']= $name;
$_SESSION['kana'] = $kana;
$_SESSION['tel']= $tel;
$_SESSION['email']= $email;
$_SESSION['body'] = $body;

exit;
header('Location:http://localhost/confirm.php');

}
}

}
?>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>サーバーサイド基礎 課題form</title>
<link rel="stylesheet" type="text/css" href="base.css">
</head>
<body>
<!--header挿入 -->
<header>
<?php include($_SERVER['DOCUMENT_ROOT']."/header.php");?>
</header>

<section>
<div id="contact_box">
<h2><b>お問い合わせ</b></h2>
<form action="contact.php" method="post" id="formContact">
<h3>下記の項目をご記入の上送信ボタンを押してください</h3>
<p>送信頂いた件につきましては、当社より折り返しご連絡を差し上げます。</p>
<p>なお、ご連絡までに、お時間を頂く場合もございますので予めご了承ください。</p>
<p><span class="required">*</span>は必須項目となります。</p>
<dl>
<dt><label for="name">氏名</label><span class="required">*</span></dt>
<dt><span id="name-msg" class="required"></span></dt>
<dd><input type="text" name="name" id="name" placeholder="山田太郎" value="<?=$name?>"></dd>

<dt><label for="kana">フリガナ</label><span class="required">*</span></dt>
<dt><span id="kana-msg" class="required"></span></dt>
<dd><input type="text" name="kana" id="kana" placeholder="ヤマダタロウ" ></dd>

<dt><label for="tel">電話番号</label></dt>
<dt><span id="tel-msg" class="required"></span></dt>
<dd><input type="text" name="tel" id="tel" placeholder="09012345678" ></dd>

<dt><label for="email">メールアドレス</label><span class="required">*</span></dt>
<dt><span id="email-msg" class="required"></span></dt>
<dd><input type="text" name="email" id="email" placeholder="test@test.co.jp" ></dd>
</dl>
<h3><label for="body">お問い合わせ内容をご記入ください<span class="required">*</span></label></h3>

<dl>
<dd><textarea name="body" id="body"></textarea></dd>
<dt><span id="body-msg" class="required"></span></dt>
<dd>
<!-- <button id="send" class="send" name="submit">送　信</button> -->
</dd>
</dl>
</form>
<dl>
<dd>
<button id="send" class="send" name="submit">送　信</button>
</dd>
</dl>
</div>
</section>

<!--footer挿入-->
<?php include($_SERVER['DOCUMENT_ROOT']."/footer.php");?>

<script>
window.onload = function() {
document.getElementById('send').onclick = function(){

let returnFlg = false;
let messages = [];

const name = document.getElementById('name').value;
if(name === ""){
returnFlg = true;
document.getElementById('name-msg').innerHTML = "名前は必須項目です。";
messages.push("名前は必須項目です。");
}else if(name.length >= 10){
returnFlg = true;
document.getElementById('name-msg').innerHTML = "氏名は10文字以内で入力してください。";
messages.push("氏名は10文字以内で入力してください。");
}

const kana = document.getElementById('kana').value;
if(kana === ""){
returnFlg = true;
document.getElementById('kana-msg').innerHTML = "フリガナは必須項目です。";
messages.push("フリガナは必須項目です。");
}else if(kana.length >= 10){
returnFlg = true;
document.getElementById('kana-msg').innerHTML = "フリガナは10文字以内で入力してください。";
messages.push("フリガナは10文字以内で入力してください。");
}

const tel = document.getElementById('tel').value;
if (!tel.match(/^0\d{9,10}$/)) {
returnFlg = true;
document.getElementById('tel-msg').innerHTML = "電話番号は正しい形式で入力してください。";
messages.push("電話番号は正しい形式で入力してください。");
}

const email = document.getElementById('email').value;
if(email === ""){
returnFlg = true;
document.getElementById('email-msg').innerHTML = "メールアドレスは必須項目です。";
messages.push("メールアドレスは必須項目です。");
}else if (!email.match(/.+@.+\..+/)) {
returnFlg = true;
document.getElementById('email-msg').innerHTML = "メールアドレスは正しい形式で入力してください。";
messages.push("メールアドレスは正しい形式で入力してください。");
}

const body = document.getElementById('body').value;
if(body === ""){
returnFlg = true;
document.getElementById('body-msg').innerHTML = "お問い合わせ内容は必須項目です。";
messages.push("お問い合わせ内容は必須項目です。");
}

if(returnFlg){
alert(messages.join('\n'));
return false;
}

document.forms.formContact.submit();
}
}
</script>
</body>
</html>
《comfirm.php》確認フォーム
<?php
session_start();   //SESSIONを使うときは最初にスタートさせる
if(isset($_SESSION['name'])){
  $name = $_SESSION['name'];
  $kana = $_SESSION['kana'];
  $tel = $_SESSION['tel'];
  $email = $_SESSION['email'];
  $body = $_SESSION['body'];
}
?>
<!DOCTYPE html>

試したこと

jsなども見直しましたが分かりませんでした。。。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

m.ts10806

2023/06/06 02:45

入力フォームのコードも提示してください。

m.ts10806

2023/06/06 02:48

あと本筋からはずれますが、画面表示の際に利用するべきであるhtmlspecialchars()が変数保管時に利用されています。参考されている資料などがセキュリティ要件に不安があるので変更したほうが良いです。

m.ts10806

2023/06/06 02:50

あとheader()の手前でexit()し、 $_SESSIONの中身をデバッグ確認した結果も追記してください

iwahaku

2023/06/06 02:56

入力フォームこちらになります。 <?php $name = ""; $kana = ""; $tel = ""; $email = ""; $body = ""; if($_SERVER['REQUEST_METHOD'] === 'POST') { $returnFlg = false; if(! isset($_POST['name'])) { $name = htmlspecialchars($_POST['name']); $returnFlg = true; } if(! isset($_POST['kana'])) { $kana = htmlspecialchars($_POST['kana']); $returnFlg = true; } $tel = htmlspecialchars($_POST['tel']); if(! isset($_POST['email'])) { $email = htmlspecialchars($_POST['email']); $returnFlg = true; } if(! isset($_POST['body'])) { $body = htmlspecialchars($_POST['body']); $returnFlg = true; } if(!$returnFlg) { if(count($errors) === 0){ $_SESSION['name']= $name; $_SESSION['kana'] = $kana; $_SESSION['tel']= $tel; $_SESSION['email']= $email; $_SESSION['body'] = $body; exit; header('Location:http://localhost/confirm.php'); } } } ?> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>サーバーサイド基礎課題form</title> <link rel="stylesheet" type="text/css" href="base.css"> </head> <body>  <header> <?php include($_SERVER['DOCUMENT_ROOT']."/header.php");?> </header> <section> <div id="contact_box"> <h2><b>お問い合わせ</b></h2> <form action="contact.php" method="post" id="formContact"> <h3>下記の項目をご記入の上送信ボタンを押してください</h3> <p>送信頂いた件につきましては、当社より折り返しご連絡を差し上げます。</p> <p>なお、ご連絡までに、お時間を頂く場合もございますので予めご了承ください。</p> <p><span class="required">*</span>は必須項目となります。</p> <dl> <dt><label for="name">氏名</label><span class="required">*</span></dt> <dt><span id="name-msg" class="required"></span></dt> <dd><input type="text" name="name" id="name" placeholder="山田太郎" value="<?=$name?>"></dd> <dt><label for="kana">フリガナ</label><span class="required">*</span></dt> <dt><span id="kana-msg" class="required"></span></dt> <dd><input type="text" name="kana" id="kana" placeholder="ヤマダタロウ" ></dd> <dt><label for="tel">電話番号</label></dt> <dt><span id="tel-msg" class="required"></span></dt> <dd><input type="text" name="tel" id="tel" placeholder="09012345678" ></dd> <dt><label for="email">メールアドレス</label><span class="required">*</span></dt> <dt><span id="email-msg" class="required"></span></dt> <dd><input type="text" name="email" id="email" placeholder="test@test.co.jp" ></dd> </dl> <h3><label for="body">お問い合わせ内容をご記入ください<span class="required">*</span></label></h3> <dl> <dd><textarea name="body" id="body"></textarea></dd> <dt><span id="body-msg" class="required"></span></dt> <dd>  </dd> </dl> </form> <dl> <dd> <button id="send" class="send" name="submit">送　信</button> </dd> </dl> </div> </section>  <?php include($_SERVER['DOCUMENT_ROOT']."/footer.php");?> <script> window.onload = function() { document.getElementById('send').onclick = function(){ let returnFlg = false; let messages = []; const name = document.getElementById('name').value; if(name === ""){ returnFlg = true; document.getElementById('name-msg').innerHTML = "名前は必須項目です。"; messages.push("名前は必須項目です。"); }else if(name.length >= 10){ returnFlg = true; document.getElementById('name-msg').innerHTML = "氏名は10文字以内で入力してください。"; messages.push("氏名は10文字以内で入力してください。"); } const kana = document.getElementById('kana').value; if(kana === ""){ returnFlg = true; document.getElementById('kana-msg').innerHTML = "フリガナは必須項目です。"; messages.push("フリガナは必須項目です。"); }else if(kana.length >= 10){ returnFlg = true; document.getElementById('kana-msg').innerHTML = "フリガナは10文字以内で入力してください。"; messages.push("フリガナは10文字以内で入力してください。"); } const tel = document.getElementById('tel').value; if (!tel.match(/^0\d{9,10}$/)) { returnFlg = true; document.getElementById('tel-msg').innerHTML = "電話番号は正しい形式で入力してください。"; messages.push("電話番号は正しい形式で入力してください。"); } const email = document.getElementById('email').value; if(email === ""){ returnFlg = true; document.getElementById('email-msg').innerHTML = "メールアドレスは必須項目です。"; messages.push("メールアドレスは必須項目です。"); }else if (!email.match(/.+@.+\..+/)) { returnFlg = true; document.getElementById('email-msg').innerHTML = "メールアドレスは正しい形式で入力してください。"; messages.push("メールアドレスは正しい形式で入力してください。"); } const body = document.getElementById('body').value; if(body === ""){ returnFlg = true; document.getElementById('body-msg').innerHTML = "お問い合わせ内容は必須項目です。"; messages.push("お問い合わせ内容は必須項目です。"); } if(returnFlg){ alert(messages.join('\n')); return false; } document.forms.formContact.submit(); } } </script> </body> </html>

AbeTakashi

2023/06/06 03:16

↑のコードは質問文に「追記」した方がいいですよ。ここは見ない人がいますので。

iwahaku

2023/06/06 03:54

ご指摘ありがとうございます

m.ts10806

2023/06/06 04:36 編集

おそらく理解が難しそうなのでデバッグについて補足。 >$_SESSIONの中身をデバッグ確認した結果も追記してください var_dump() で調べたい変数を出力してください。あとマジック定数である __LINE__ をechoで出力すると、そのスクリプトファイルの通った場所の行番号が出力されるので、分岐など各所に改行コードと一緒に書いておくと意図した場所を通ってるかどうか確認できます。例: echo __LINE__."¥n"; if($hoge){ echo __LINE__."¥n"; } マジック定数:https://www.php.net/manual/ja/language.constants.magic.php 上記２点が主な手動デバッグです。環境きちんと作ればデバッガなども使えますが。手動デバッグは入門者や初心者がループや分岐など学ぶ際に本来覚えておくべき作業です。 (実はこれ覚えるだけで質問しなくて解決できることのほうが多くなる)