質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

解決済

前画面遷移した際に前回入力した値をjavascriptとPHPで重複保持する状態にしたいです。

ghtew2
ghtew2

総合スコア172

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

3回答

0評価

2クリップ

253閲覧

投稿2021/12/05 03:04

前画面遷移した際に前回入力した値を入力してある状態にしたいです。
javascriptとPHPで入力フォームのコードを書いているのですが、入力フォームにて両方の言語で重複で値を保持したいです。

流れとしては、①入力フォーム→②確認画面なのですが。
この質問で提示してあるのは入力フォームの最初の画面のコードのみです。
PHPでは保持のコードは書けています。これをJavaScriptでも保持して重複保持したいです。

以下のURLを参考にしたのですが、
値の保持にsessionStorageというのがあるらしいです。
https://developer.mozilla.org/ja/docs/Web/API/Window/sessionStorage

しかし、入力フォームの項目すべてを入力して、送信ボタンを押すと、入力確認表示画面に移動します、その入力確認画面では、最初の入力フォームで入力された内容が出ていて問題はないのですが、
確認画面にある戻るボタンを押して、最初の入力フォーム画面に戻ると、確かに値自体は保持されていますが、、なぜか「お問い合わせ内容入力(150文字):」に入力した内容のものが、すべての入力フォームに書かれてしまいます。

付属画像のような感じです。「お問い合わせ内容入力(150文字):」に入力した内容のものが全て同じフォーム書かれています。これをきちんと、入力した内容が保持されるようにしたいです。
イメージ説明

php

<?php session_start(); $errors = array(); if ($_POST) { $plan = filter_input(INPUT_POST, 'plan'); $plan2 = filter_input(INPUT_POST, 'plan2'); $name = filter_input(INPUT_POST, 'name'); $furigana = filter_input(INPUT_POST, 'furigana'); $tel = filter_input(INPUT_POST, 'tel'); $email = filter_input(INPUT_POST, 'email'); $emailss = filter_input(INPUT_POST, 'emailss'); $question = filter_input(INPUT_POST, 'question'); if (empty($plan)) $errors[] ="お問い合わせ内容を選択して下さい。 "; if (empty($plan2)) $errors[] ="業種の選択するを選択して下さい。 "; if (empty($name)) $errors[] ="名前が入力されていません。 "; if (empty($furigana)) $errors[] ="フリガナが入力されていません。 "; if (empty($tel)) $errors[] ="電話番号が入力されていません。 "; if (empty($email)) $errors[] ="メールアドレスが入力されていません。 "; if (empty($emailss)) $errors[] ="メールアドレス(確認用)が入力されていません。 "; if (empty($question)) $errors[] ="お問い合わせ内容入力(150文字以内)が入力されていません。 "; $plan = htmlspecialchars($plan, ENT_QUOTES); $plan2 = htmlspecialchars($plan2, ENT_QUOTES); $name = htmlspecialchars($name, ENT_QUOTES); $furigana = htmlspecialchars($furigana, ENT_QUOTES); $tel = htmlspecialchars($tel, ENT_QUOTES); $email = htmlspecialchars($email, ENT_QUOTES); $emailss = htmlspecialchars($emailss, ENT_QUOTES); $question = htmlspecialchars($question, ENT_QUOTES); if (count($errors) === 0) { $_SESSION['plan'] = $plan; $_SESSION['plan2'] = $plan2; $_SESSION['name'] = $name; $_SESSION['furigana'] = $furigana; $_SESSION['tel'] = $tel; $_SESSION['email'] = $email; $_SESSION['emailss'] = $emailss; $_SESSION['question'] = $question; /* 確認画面の表示, */ header('Location:http:▼▼'); exit(); } } if(isset($_GET['action']) && $_GET['action'] === 'edit'){ $plan = isset($_SESSION['plan']) ? $_SESSION['plan'] : ''; $plan2 = isset($_SESSION['plan2']) ? $_SESSION['plan2'] : ''; $name = isset($_SESSION['name']) ? $_SESSION['name'] : ''; $furigana = isset($_SESSION['furigana']) ? $_SESSION['furigana'] : ''; $tel = isset($_SESSION['tel']) ? $_SESSION['tel'] : ''; $email = isset($_SESSION['email']) ? $_SESSION['email'] : ''; $emailss = isset($_SESSION['emailss']) ? $_SESSION['emailss'] : ''; $question = isset($_SESSION['question']) ? $_SESSION['question'] : ''; } ?> <!DOCTYPE html> <html lang="ja"> <head> <meta content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>企業ホームページ お問い合わせ画面VANIA</title> <link rel="stylesheet" href="companyhp6form1.css"> <link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="companyhp6form1responsive.css"> <script src="jquery-3.6.0.min.js"></script> <style type="text/css"> /* レスポンシブ対応で右に出る謎の余白を無くす */ .wrapper { overflow: hidden; } /* 入力フォームの位置 */ .auto-style1 { text-align: center; } /* セレクトボックスの位置 */ .auto-style2 { text-align: center; /* セレクトボックス中央に配置 */ margin-top: 30px; } </style> </head> <body> <?= count($errors) ? '<ul><li>' . implode('</li><li>', $errors) . '</li></ul>' : '' ?> <!--javaによるエラー表示のためid="form"を追加--> <form action="companyhp6form1.php" method="post" id="form"> <div class="auto-style2"> <p class="tel-titile14"> お問い合わせ内容を選択する:※ </p> <span class="selectbox"> <select id="plan" class="plan" name="plan"> <option value="">お問い合わせ内容選択</option> <option value="事業内容について" <?php if(isset($plan) && $plan==="事業内容について" ) { echo "selected" ;} ?>>事業内容について </option> <option value="サポートについて" <?php if(isset($plan) && $plan==="サポートについて" ) { echo "selected" ;} ?> >サポートについて</option> <option value="その他弊社にお問い合わせ" <?php if(isset($plan) && $plan==="その他弊社にお問い合わせ" ) { echo "selected" ;} ?>>その他弊社にお問い合わせ </option> </select> </span> </div> <div class="auto-style2"> <p class="tel-titile15"> 業種を選択する:※ </p> <span class="selectbox"> <select id="plan2" class="plan2" name="plan2"> <option value="">業種の選択</option> <option value="法人のお客様" <?php if(isset($plan2) && $plan2==="法人のお客様" ) { echo "selected" ;} ?>>法人のお客様 </option> <option value="個人のお客様" <?php if(isset($plan2) && $plan2==="個人のお客様" ) { echo "selected" ;} ?> >個人のお客様</option> </select> </span> </div> <!--フォーム中央寄せのため1つ1つdivで囲むauto-style1--> <div class="auto-style1"> <p class="tel-titile"> 名前:※ </p> <input type="text" class="name" name="name" id="name" value="<?php if(isset($name)){ echo $name; } ?>" /> </div> <div class="auto-style1"> <p class="tel-titile"> フリガナ:※ </p> <input type="text" class="furigana" name="furigana" id="furigana" value="<?php if(isset($furigana)){ echo $furigana; } ?>" /> </div> <div class="auto-style1"> <p class="tel-titile"> 電話番号:※ </p> <input type="text" class="tel" name="tel" id="tel" value="<?php if(isset($tel)){ echo $tel; } ?>" /> </div> <div class="auto-style1"> <p class="tel-titile"> メールアドレス:※ </p> <input type="text" class="email" name="email" id="email" value="<?php if(isset($email)){ echo $email; } ?>" /> </div> <div class="auto-style1"> <p class="tel-titile"> メールアドレス(確認用):※ </p> <input type="text" class="emailss" name="emailss" id="emailss" value="<?php if(isset($emailss)){ echo $emailss; } ?>" /> </div> <div class="auto-style1"> <p class="tel-titile"> お問い合わせ内容入力(150文字): </p> <textarea name="question" class="question" id="question" cols="40" rows="10" placeholder="150文字以内で入力して下さい。"></textarea> </div> <div class="auto-style1"> <button type="submit" id="submit" name="submit" class="auto-style4"> 送信</button> </div> </form> <div id="test"> </div> <script> const key = 'date_key'; const form = document.querySelector('#form'); const plan = document.querySelector('#plan'); const plan2 = document.querySelector('#plan2'); const name = document.querySelector('#name'); const furigana = document.querySelector('#furigana'); const tel = document.querySelector('#tel'); const email = document.querySelector('#email'); const emailss = document.querySelector('#emailss'); const question = document.querySelector('#question'); form.addEventListener('submit', function(event) { let msg = ""; if (plan.value == "") msg += "お問い合わせ内容を選択して下さい。\n"; if (plan2.value == "") msg += "業種の選択するを選択して下さい。\n"; if (name.value == "") msg += "名前が入力されていません。\n"; if (furigana.value == "") msg += "フリガナが入力されていません。\n"; if (tel.value == "") msg += "電話番号が入力されていません。\n"; if (email.value == "") msg += "メールアドレスが入力されていません。\n"; if (emailss.value == "") msg += "メールアドレス(確認用)が入力されていません。\n"; if (question.value == "") msg += "お問い合わせ内容を入力してください\n"; if (msg != "") { event.preventDefault(); alert(msg); } }); 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); 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); </script> </body> </html>

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。