※ ChatGPTを利用し、要約された質問です（原文：前画面遷移した際に前回入力した値を入力してある状態）
前回入力した値を保持する方法とは？
このQ&Aのポイント
前回入力した値を入力してある状態にしたいです。JavaScriptとPHPで入力フォームのコードを書いていますが、両方の言語で重複で値を保持したいです。
値の保持にはsessionStorageという仕組みを利用していますが、いくつかの問題が生じています。具体的には、入力フォームを埋めて送信ボタンを押しても次に進まず、エラーメッセージが表示されることです。
この問題の解決方法として、JavaScriptのコードを修正する必要があります。具体的な修正内容は、入力フォームの値が変更された時にsessionStorageに値を保存する処理を追加すれば良いです。
前画面遷移した際に前回入力した値を入力してある状態
前画面遷移した際に前回入力した値を入力してある状態にしたいです。
javascriptとPHPで入力フォームのコードを書いているのですが、入力フォーム（①画面）にて両方の言語で重複で値を保持したいです。
流れとしては、①入力フォーム→②確認画面なのですが。
PHPでは保持のコードは書けています。これをJavaScriptでも保持して重複保持したいです。
以下のURLを参考にしたのですが、
値の保持にsessionStorageというのがあるらしいです。
https://developer.mozilla.org/ja/docs/Web/API/Window/sessionStorage
URLを参考に下の方にコードを書いてみたのですが、入力フォームを埋めて送信ボタンを押しても付属画像のようにメッセージが出て、次に進めません。どこが間違っているで
ましょうか？
回答よろしくお願いいたします。
●●①入力フォームのコード
<?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'];
}
?>
<?php echo "<ul>";foreach($errors as $value) {
echo "<li>";
echo $value;
echo "</li>";
}
echo "</ul>";
?>
<!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">
</style>
</head>
<body>
<form action="orm1.php" method="post" id="form">
<p>
名前
</p>
<input type="text" class="name" name="name" id="name" value="<?php if(isset($name)){ echo $name; } ?>" />
<button type="submit" id="submit" name="submit" class="auto-style4">
送信</button>
</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);
});
var key = 'date_key';
var set_value = sessionStorage.getItem(key);
$('name').val(set_value);
$('name').on('change', function () {
var value = $('#name').val();
sessionStorage.setItem(key, value);
});
</script>
</html>
お礼
ありがとうございました。解決できました。