Q&A
回答ありがとうございます。試して見ます。結果を後で報告致します。
前画面遷移した際に前回入力した値を入力してある状態にしたいです。
javascriptとPHPで入力フォームのコードを書いているのですが、入力フォームにて両方の言語で重複で値を保持したいです。
流れとしては、①入力フォーム→②確認画面なのですが。
この質問で提示してあるのは入力フォームの最初の画面のコードのみです。
PHPでは保持のコードは書けています。これをJavaScriptでも保持して重複保持したいです。
以下のURLを参考にしたのですが、
値の保持にsessionStorageというのがあるらしいです。
https://developer.mozilla.org/ja/docs/Web/API/Window/sessionStorage
しかし、入力フォームの項目すべてを入力して、送信ボタンを押すと、入力確認表示画面に移動します、その入力確認画面では、最初の入力フォームで入力された内容が出ていて問題はないのですが、
確認画面にある戻るボタンを押して、最初の入力フォーム画面に戻ると、確かに値自体は保持されていますが、、なぜか「お問い合わせ内容入力（150文字）：」に入力した内容のものが、すべての入力フォームに書かれてしまいます。
付属画像のような感じです。「お問い合わせ内容入力（150文字）：」に入力した内容のものが全て同じフォーム書かれています。これをきちんと、入力した内容が保持されるようにしたいです。
php
1<?php 2session_start(); 3 4$errors = array(); 5if ($_POST) { 6$plan = filter_input(INPUT_POST, 'plan'); 7$plan2 = filter_input(INPUT_POST, 'plan2'); 8$name = filter_input(INPUT_POST, 'name'); 9$furigana = filter_input(INPUT_POST, 'furigana'); 10$tel = filter_input(INPUT_POST, 'tel'); 11$email = filter_input(INPUT_POST, 'email'); 12$emailss = filter_input(INPUT_POST, 'emailss'); 13$question = filter_input(INPUT_POST, 'question'); 14 15if (empty($plan)) $errors[] ="お問い合わせ内容を選択して下さい。 "; 16if (empty($plan2)) $errors[] ="業種の選択するを選択して下さい。 "; 17if (empty($name)) $errors[] ="名前が入力されていません。 "; 18if (empty($furigana)) $errors[] ="フリガナが入力されていません。 "; 19if (empty($tel)) $errors[] ="電話番号が入力されていません。 "; 20if (empty($email)) $errors[] ="メールアドレスが入力されていません。 "; 21if (empty($emailss)) $errors[] ="メールアドレス（確認用）が入力されていません。 "; 22if (empty($question)) $errors[] ="お問い合わせ内容入力（150文字以内）が入力されていません。 "; 23 24$plan = htmlspecialchars($plan, ENT_QUOTES); 25$plan2 = htmlspecialchars($plan2, ENT_QUOTES); 26$name = htmlspecialchars($name, ENT_QUOTES); 27$furigana = htmlspecialchars($furigana, ENT_QUOTES); 28$tel = htmlspecialchars($tel, ENT_QUOTES); 29$email = htmlspecialchars($email, ENT_QUOTES); 30$emailss = htmlspecialchars($emailss, ENT_QUOTES); 31$question = htmlspecialchars($question, ENT_QUOTES); 32 33 34if (count($errors) === 0) { 35$_SESSION['plan'] = $plan; 36$_SESSION['plan2'] = $plan2; 37$_SESSION['name'] = $name; 38$_SESSION['furigana'] = $furigana; 39$_SESSION['tel'] = $tel; 40$_SESSION['email'] = $email; 41$_SESSION['emailss'] = $emailss; 42$_SESSION['question'] = $question; 43 44/* 確認画面の表示， */ 45header('Location:http:▼▼'); 46exit(); 47 } 48} 49 50if(isset($_GET['action']) && $_GET['action'] === 'edit'){ 51 52$plan = isset($_SESSION['plan']) ? $_SESSION['plan'] : ''; 53$plan2 = isset($_SESSION['plan2']) ? $_SESSION['plan2'] : ''; 54$name = isset($_SESSION['name']) ? $_SESSION['name'] : ''; 55$furigana = isset($_SESSION['furigana']) ? $_SESSION['furigana'] : ''; 56$tel = isset($_SESSION['tel']) ? $_SESSION['tel'] : ''; 57$email = isset($_SESSION['email']) ? $_SESSION['email'] : ''; 58$emailss = isset($_SESSION['emailss']) ? $_SESSION['emailss'] : ''; 59$question = isset($_SESSION['question']) ? $_SESSION['question'] : ''; 60 61} 62 63?> 64<!DOCTYPE html> 65<html lang="ja"> 66<head> 67 <meta content="text/html; charset=utf-8" /> 68 <meta name="viewport" content="width=device-width, initial-scale=1"> 69 <title>企業ホームページ お問い合わせ画面VANIA</title> 70 <link rel="stylesheet" href="companyhp6form1.css"> 71 <link rel="stylesheet" href="reset.css"> 72 <link rel="stylesheet" href="companyhp6form1responsive.css"> 73 <script src="jquery-3.6.0.min.js"></script> 74 <style type="text/css"> 75 76 /* レスポンシブ対応で右に出る謎の余白を無くす */ 77 .wrapper { 78 overflow: hidden; 79 } 80 81 /* 入力フォームの位置 */ 82 83 .auto-style1 { 84 85text-align: center; 86 87} 88 89 90/* セレクトボックスの位置 */ 91.auto-style2 { 92 93text-align: center; 94/* セレクトボックス中央に配置 */ 95margin-top: 30px; 96} 97 98 99 100 101 102 103 104 105</style> 106</head> 107<body> 108<?= count($errors) ? '<ul><li>' . implode('</li><li>', $errors) . '</li></ul>' : '' ?> 109 110 111 112 113 114<!--javaによるエラー表示のためid="form"を追加--> 115<form action="companyhp6form1.php" method="post" id="form"> 116 117 <div class="auto-style2"> 118 119 <p class="tel-titile14"> 120 お問い合わせ内容を選択する：※ 121 </p> 122 123 124 125 <span class="selectbox"> 126 <select id="plan" class="plan" name="plan"> 127 <option value="">お問い合わせ内容選択</option> 128 <option value="事業内容について" <?php if(isset($plan) && $plan==="事業内容について" ) { echo "selected" ;} ?>>事業内容について 129 </option> 130 <option value="サポートについて" <?php if(isset($plan) && $plan==="サポートについて" ) { echo "selected" ;} ?> 131 >サポートについて</option> 132 <option value="その他弊社にお問い合わせ" <?php if(isset($plan) && $plan==="その他弊社にお問い合わせ" ) { echo "selected" ;} ?>>その他弊社にお問い合わせ 133 </option> 134 135 </select> 136 </span> 137 </div> 138 139 140 141 <div class="auto-style2"> 142 143 <p class="tel-titile15"> 144 業種を選択する：※ 145 </p> 146 147 148 149 <span class="selectbox"> 150 <select id="plan2" class="plan2" name="plan2"> 151 <option value="">業種の選択</option> 152 <option value="法人のお客様" <?php if(isset($plan2) && $plan2==="法人のお客様" ) { echo "selected" ;} ?>>法人のお客様 153 </option> 154 <option value="個人のお客様" <?php if(isset($plan2) && $plan2==="個人のお客様" ) { echo "selected" ;} ?> 155 >個人のお客様</option> 156 157 158 </select> 159 </span> 160 </div> 161 162<!--フォーム中央寄せのため１つ１つdivで囲むauto-style1--> 163 164 165 166 <div class="auto-style1"> 167 168 <p class="tel-titile"> 169 名前：※ 170 </p> 171 <input type="text" class="name" name="name" id="name" value="<?php if(isset($name)){ echo $name; } ?>" /> 172 </div> 173 <div class="auto-style1"> 174 175 <p class="tel-titile"> 176 フリガナ：※ 177 </p> 178 <input type="text" class="furigana" name="furigana" id="furigana" 179 value="<?php if(isset($furigana)){ echo $furigana; } ?>" /> 180 181 </div> 182 183 <div class="auto-style1"> 184 185 <p class="tel-titile"> 186 電話番号：※ 187 </p> 188 <input type="text" class="tel" name="tel" id="tel" value="<?php if(isset($tel)){ echo $tel; } ?>" /> 189 </div> 190 <div class="auto-style1"> 191 192 <p class="tel-titile"> 193 メールアドレス：※ 194 </p> 195 196 <input type="text" class="email" name="email" id="email" 197 value="<?php if(isset($email)){ echo $email; } ?>" /> 198 199 </div> 200 <div class="auto-style1"> 201 202 203 <p class="tel-titile"> 204 メールアドレス（確認用）：※ 205 </p> 206 207 <input type="text" class="emailss" name="emailss" id="emailss" 208 value="<?php if(isset($emailss)){ echo $emailss; } ?>" /> 209 210 </div> 211 212 213 <div class="auto-style1"> 214 <p class="tel-titile"> 215 お問い合わせ内容入力（150文字）： 216 </p> 217 <textarea name="question" class="question" id="question" cols="40" rows="10" placeholder="150文字以内で入力して下さい。"></textarea> 218 219 </div> 220 221 222 <div class="auto-style1"> 223 224 <button type="submit" id="submit" name="submit" class="auto-style4"> 225 送信</button> 226 </div> 227 228</form> 229 230 231<div id="test"> 232</div> 233<script> 234const key = 'date_key'; 235const form = document.querySelector('#form'); 236const plan = document.querySelector('#plan'); 237 const plan2 = document.querySelector('#plan2'); 238 const name = document.querySelector('#name'); 239 const furigana = document.querySelector('#furigana'); 240 const tel = document.querySelector('#tel'); 241 const email = document.querySelector('#email'); 242 const emailss = document.querySelector('#emailss'); 243 const question = document.querySelector('#question'); 244form.addEventListener('submit', function(event) { 245let msg = ""; 246 247 248if (plan.value == "") msg += "お問い合わせ内容を選択して下さい。\n"; 249if (plan2.value == "") msg += "業種の選択するを選択して下さい。\n"; 250if (name.value == "") msg += "名前が入力されていません。\n"; 251if (furigana.value == "") msg += "フリガナが入力されていません。\n"; 252if (tel.value == "") msg += "電話番号が入力されていません。\n"; 253if (email.value == "") msg += "メールアドレスが入力されていません。\n"; 254if (emailss.value == "") msg += "メールアドレス（確認用）が入力されていません。\n"; 255if (question.value == "") msg += "お問い合わせ内容を入力してください\n"; 256 257 258if (msg != "") { 259event.preventDefault(); 260alert(msg); 261} 262}); 263 264form.addEventListener('change', function() { 265if (plan.value != "") sessionStorage.setItem(key, plan.value); 266if (plan2.value != "") sessionStorage.setItem(key, plan2.value); 267if (name.value != "") sessionStorage.setItem(key, name.value); 268if (furigana.value != "") sessionStorage.setItem(key, furigana.value); 269if (tel.value != "") sessionStorage.setItem(key, tel.value); 270if (email.value != "") sessionStorage.setItem(key, email.value); 271if (emailss.value != "") sessionStorage.setItem(key, emailss.value); 272if (question.value != "") sessionStorage.setItem(key, question.value); 273}); 274 275plan.value = sessionStorage.getItem(key); 276plan2.value = sessionStorage.getItem(key); 277name.value = sessionStorage.getItem(key); 278furigana.value = sessionStorage.getItem(key); 279tel.value = sessionStorage.getItem(key); 280email.value = sessionStorage.getItem(key); 281emailss.value = sessionStorage.getItem(key); 282question.value = sessionStorage.getItem(key); 283 284 285 286</script> 287</body> 288</html>
回答3件
0
JavaScriptで保持することをやめるべき、というm.ts10806さんの主張に同意しますが、現在の状況はsessionStorageの使い方に問題があります。
<script> const key = 'date_key'; // 中略 // 以下、sessionStorageのキーが全て同じ値（'date_key'）になっている form.addEventListener('change', function() { if (plan.value != "") sessionStorage.setItem(key, plan.value); if (plan2.value != "") sessionStorage.setItem(key, plan2.value); if (name.value != "") sessionStorage.setItem(key, name.value); if (furigana.value != "") sessionStorage.setItem(key, furigana.value); if (tel.value != "") sessionStorage.setItem(key, tel.value); if (email.value != "") sessionStorage.setItem(key, email.value); if (emailss.value != "") sessionStorage.setItem(key, emailss.value); if (question.value != "") sessionStorage.setItem(key, question.value); }); plan.value = sessionStorage.getItem(key); // 以下全てsessionStorage.getItem(key) という同じ値を代入している plan2.value = sessionStorage.getItem(key); name.value = sessionStorage.getItem(key); furigana.value = sessionStorage.getItem(key); tel.value = sessionStorage.getItem(key); email.value = sessionStorage.getItem(key); emailss.value = sessionStorage.getItem(key); question.value = sessionStorage.getItem(key);
コメントで追記したように、sessionStorageに指定するキー（変数key）がすべて同じ値なので、値がquestionValueで上書きされてしまい、その同じ値を代入しているので、現在の状況になっていると考えられます。
投稿2021/12/05 03:31
総合スコア11705
0
ベストアンサー
sessionStorage に、同じ key でデータを保存しているため、このような状態になっています。
js
1form.addEventListener('change', function() { 2if (plan.value != "") sessionStorage.setItem('plan', plan.value); 3if (plan2.value != "") sessionStorage.setItem('plan2', plan2.value); 4if (name.value != "") sessionStorage.setItem('name', name.value); 5if (furigana.value != "") sessionStorage.setItem('furigana', furigana.value); 6if (tel.value != "") sessionStorage.setItem('tel', tel.value); 7if (email.value != "") sessionStorage.setItem('email', email.value); 8if (emailss.value != "") sessionStorage.setItem('emailss', emailss.value); 9if (question.value != "") sessionStorage.setItem('question', question.value); 10}); 11 12plan.value = sessionStorage.getItem('plan'); 13plan2.value = sessionStorage.getItem('plan2'); 14name.value = sessionStorage.getItem('name'); 15furigana.value = sessionStorage.getItem('furigana'); 16tel.value = sessionStorage.getItem('tel'); 17email.value = sessionStorage.getItem('email'); 18emailss.value = sessionStorage.getItem('emailss'); 19question.value = sessionStorage.getItem('question');
このように、保存したいデータごとに別々の key を指定して保存、取り出しを行うと正常に動作するかと思います。
投稿2021/12/05 03:27
総合スコア84
0
そもそも動作するレイヤーが違うので完全同期は困難かと（そもそもデータが散らばるのは良くない）。
PHPでセッションやDBなどで保持しておきJavascriptではPHPに非同期で取得し参照するのが良いと思います。
投稿2021/12/05 03:07
総合スコア80875
回答ありがとうございます。完全同期は考えてないです。質問の意味がわかりにくくてすみません。phpとjavascriptで個別に保持できたら良いと考えています。だだ、javascriptでこの提示コードの場合、確認画面から入力フォームに戻った時の、お問い合わせ（150文字以内のフォームに入力した値と全て同じ値になる）謎の現象の対処がわからなく困っているのです。
私自身も結構調べてここまで辿りついたのですが。Javascriptで戻る時の値の保持がおかしくなっていると思うのですが、その原因が分かりません。
Javascriptで保持するのを辞めることです。
でも、エラーメッセージの表示ってJavascriptの方が目立ちませんか?
四角いグレーのボックスの中にメッセージが出るので。
phpだとコメントが書かれてるだけというか、スマホだとなお目立たないと思うのですが。
それはPHPでそのように書いてるからです。
PHPに文字出力まで任せるからです。
バリデーションの話ならむしろサーバーサイドで行うべきで、
非同期（Ajaxなど）でバリデーションを行えばエラーメッセージの出力をJavaScriptに任せられます。
そうです。ありがとうございます。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/12/05 03:46
2021/12/05 12:46