dポイントプレゼントキャンペーン実施中！

javascriptとPHPで入力フォームのコードを書いているのですが、 流れとしては、①入力フォー

解決済

  • 質問者：pjdmgam
  • 質問日時：
  • 回答数：2件

javascriptとPHPで入力フォームのコードを書いているのですが、

流れとしては、①入力フォーム→②確認画面→③送信画面の３段階で構成しています。
初めの入力フォームで入力した値を②の確認画面で表示される「戻る」ボタンで
戻っても入力した内容をjavascriptで保持するようにしたいです。

もとから、PHPのみでは保持するコードは書いてある（提示したコードにある）のですが、PHPの内容は変更せず
に①の画面で入力した内容を②確認表示画面で戻っても入力した内容をjavascriptで保持するようにしたいです。

調べてよく分かりません。どうコード書いたらよいでしょうか？
①の画面でjavascripによる入力エラーメッセージの表示の設定をしたら、PHPが発動しなくなりましたが、PHPの内容は変更したくないです。
この質問で提示したコードは①入力フォームのコードのみです。字数制限で全て提示できません。

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

●●①入力フォーム

<?php
session_start();

$errors = array();

if(isset($_POST['submit'])) {
$name = $_POST['name'];

$name = htmlspecialchars($name, ENT_QUOTES);

if($name === "") { $errors['name'] ="名前が入力されていません。 ";
}

if(count($errors) === 0) {
$_SESSION['name'] = $name;

/* 確認画面の表示， */
header('Location:http:▼▼');
exit();
}
}


if(isset($_GET['action']) && $_GET['action'] === 'edit'){

$name = $_SESSION['name'];
}
?>

<!DOCTYPE html>

<html lang="ja">
<head>
<meta content="text/html; charset=utf-8" />
<title></title>
<script src="jquery-3.6.0.min.js"></script>

<style type="text/css">

.auto-style1 {
text-align: center;
}

</style>

<?php echo "<ul>";foreach($errors as $value) {

echo "<li>";
echo $value;
echo "</li>";
}
echo "</ul>";
?>

</head>
<body>

<form action="companyhp6form1.php" method="post" id="form">

<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">

<button type="submit" id="submit" name="submit" class="auto-style4">
送信</button>
</div>

</form>

</body>
<script>
const form = document.querySelector('#form');
const name = document.querySelector('#name');

form.addEventListener('submit', function(event) {
let msg = "";
if (name.value == "") msg += "名前が入力されていません。\n";

if (msg == "") return; event.preventDefault(); alert(msg);
});
</script>
<script src="jquery-3.6.0.min.js"></script>
</html>

通報する

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

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： fujillin
  • 回答日時：

こんにちは



＞入力した内容をjavascriptで保持するようにしたいです。
技術的には、localstorage等を利用すること可能ですけれど、sessionを利用しているのにわざわざ二重帳簿を作るようなものです。
https://developer.mozilla.org/ja/docs/Web/API/We …

sessionを利用しているのですから、session変数を利用するのが普通ではないでしょうか。
https://techplay.jp/column/538
https://qiita.com/yuka_pon/items/94e59e28d92e5f4 …

＞PHPの内容は変更したくないです。
出力をPHPで行っているので、何かの変更をすればPHPの変更は発生すると思いますけれど？
まぁ、外部スクリプトになっていて、スクリプト部分のみを変更するという考えはあるでしょうけれど、ご提示のソースではそのような構成になっているとも思えませんので。

＞この質問で提示したコードは①入力フォームのコードのみです。
＞字数制限で全て提示できません。
不完全な情報でご質問なさっても、正しい回答を得られる確率は低いです。
ざっと見たところ、入力の有無の確認を行っているだけのようなので、スクリプトなどを用いなくても、
<input type="text" name="name" placeholder="氏名を入力" value="" required />
としておくことでも、事足りそうな気がします。

また、ご質問には直接関係はありませんけれど、ご提示のソースではjqueryを読み込んでいるようですが、（省略されているのか）使っている形跡が見られません。
（もしも使用部分が省略されているとしても）最後に再度jqueryの読み込みがあるので、スクリプトが動作しない可能性がありそうに思われます。
使用しないスクリプトを読み込むことの意味もわかりませんし、同じものを二度読み込むのは無駄である以上に弊害がある可能性を懸念します。


※ いずれにしろ、PHPで出力している以上は、PHPのソースを一切変更しないで、何らかの処理を変えたいというのには無理があるのではないでしょうか？
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。もう少し調べてみたいと思います。

通報する
お礼日時：2021/12/03 12:31

No.1

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

>入力した内容をjavascriptで保持するようにしたいです。



とありますが、保持するだけならsessionStorageというのがあります。

https://developer.mozilla.org/ja/docs/Web/API/Wi …

しかしPHP側で保持しているのなら、重複してしまいます。
（あとから何か変更したくなったとき面倒になります）

PHP側で保持した値を取得するだけなら、
const name = document.querySelector('#name');
のあとに、
name.value
で取得できるのではないかと思います。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございました。も少し調べてみたいと思います。

通報する
お礼日時：2021/12/03 12:31

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

Q質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

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

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

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

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

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

おすすめ情報