Datepickerで選択した日付をPHPのセッションに保存できず、困っています。

前提・実現したいこと

PHPで入力画面（refill.php）⇒確認画面（refill_confirm.php）⇒送信完了画面を作成しています。
入力画面で入力した内容を確認画面で確認し、何か不備があった場合、「戻るボタン」を押して入力画面に戻るという仕様です。
全項目の入力内容を$_SESSIONに入れているので、確認画面から入力画面に戻った際には、すでに入力した値が表示されるようになっていますが、Datepickerで選択した日付のみ空白になってしまいます。どうすれば、Datepickerで選択した日付も表示されるようになりますか？それとも、私がやろうとしている事は、不可能なのでしょうか？

Datepickerで選択した日付は、確認画面では問題なく表示され、また確認画面の送信ボタン押下後、データベースにデータ挿入するようにしていますが、それも問題ありません。問題は、確認画面から入力画面に戻ったときのみです。

PHPとDatepicker初心者です。詳しくご教示いただければ幸いです。よろしくお願いいたします。

（質問に関係のないアクション名やクラス名は#に変更しています。）

該当のソースコード

php
1refill.php：
2<?php
3session_start();
4?>
5
6<head>
7<script src="jquery-3.5.0.min.js"></script>
8<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
9<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>
10<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css">
11<script>
12$(function() {
13    $("#datepicker").datepicker();  	
14	$("#datepicker").datepicker("option", "dateFormat", 'mm/dd/yy');
15	$("#datepicker").datepicker("option", "minDate", '0');
16	$("#datepicker").datepicker("option", "showButtonPanel", 'true');
17　　　$("#datepicker").datepicker("option", "closeText", 'Done');
18  });
19</script>
20</head>
21
22<body>
23<form action="refill_confirm.php" method="post">
24<fieldset>
25/*ここに他の入力項目を書いています。*/
26/*↓これが問題のdatepicker*/
27<label for="refill_day" class="#">
28Pickup or Delivery Date<span>*</span>:
29</label>
30<div class="#">
31<label class="#">
32<input type="text" name="refill_day" id="datepicker" placeholder="mm/dd/yyyy" value="<?php if(isset($_SESSION['refill_day'])){echo htmlspecialchars($_SESSION['refill_day'], ENT_QUOTES, 'UTF-8');} ?>" required>     
33<div>
34<image class="#" src="ico_calendar.png" alt= "Calendar Img">
35</div>
36</label>
37</div>
38/*↓確認画面に遷移するボタン*/
39<input type="submit" name="refill_confirm" value="Confirm" class="#">
40</fieldset>
41</form>
42</body>

PHP
1refill_confirm.php：
2<?php
3session_start();
4
5if ($_SERVER["REQUEST_METHOD"] === "POST"){
6if (isset($_POST['refill_day'])) {
7	$_SESSION['refill_day'] = $_POST['refill_day'];
8}}
9?>
10
11<body>
12<form action="#" method="post">
13<table>
14<tr>
15  <th>Pickup or Delivery Date</th>
16  <td><?php echo htmlspecialchars($_SESSION["refill_day"], ENT_QUOTES, 'UTF-8');?></td>
17 </tr>
18</table>
19/*戻るボタン*/
20<input type="button" class="#" onclick="location.href='refill.php'" value="Previous">
21/*送信ボタン*/
22<input type="submit" name="con_send" value="Send" class="#">
23</form>
24</body>

試したこと

下記のコードを、refill.phpとbackend.phpに書きましたが、やはり空白で表示されてしまいます。

refill.php：
$("#datepicker").datepicker({
onClose: function(dateText, inst) {
$.post("/backend.php", {"refill_day": dateText});
}
});

backend.php：

<?php // set the variable $_SESSION['refill_day'] = $_POST['refill_day']; ?>

行動規範の内容に同意します

回答1件

ベストアンサー

JQueryのバージョンの記載がありませんが、session間で値が保持されている前提にて
回答します。

セッションは消えていない？

refill.php でのJavaScript内JQueryのdatepickerにて初期化されているため、
refill_confirm.phpから戻ったrefill.phpを表示した際、
見た目上は空表記のままになっている可能性があります。

refill.phpのbodyタグの配下に、表示用のコードを記載すれば、session間に保持されている変数は見れるのではないでしょうか。

php
1<?php echo htmlspecialchars($_SESSION["refill_day"], ENT_QUOTES, 'UTF-8');?>

じゃあどうするのさ

setDateを活用してみてください。
2次はこちら

コードサンプル

諸注意

セキュリティ、エラーハンドリング等考慮および動作確認等は行ってはおりません。
考え方の１つとして認識していただければ幸いです。

refill.php

php
1<?php
2session_start();
3?>
4
5<head>
6<script src="jquery-3.5.0.min.js"></script>
7<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
8<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>
9<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css">
10<script>
11$(function() {
12    $("#datepicker").datepicker();      
13    $("#datepicker").datepicker("option", "dateFormat", 'mm/dd/yy');
14    $("#datepicker").datepicker("option", "minDate", '0');
15    $("#datepicker").datepicker("option", "showButtonPanel", 'true');
16　　 $("#datepicker").datepicker("option", "closeText", 'Done');
17    // 追加コード ----
18    $("datepicker").datepicker("setDate", '<?php echo htmlspecialchars($_SESSION["refill_day"], ENT_QUOTES, 'UTF-8');?>');
19    // -----追加コードここまで
20  });
21</script>
22</head>
23
24<body>
25<!-- 確認用コード -->
26<?php echo htmlspecialchars($_SESSION["refill_day"], ENT_QUOTES, 'UTF-8');?>
27<!-- 確認用コードここまで-->
28<form action="refill_confirm.php" method="post">
29<fieldset>
30/*ここに他の入力項目を書いています。*/
31/*↓これが問題のdatepicker*/
32<label for="refill_day" class="#">
33Pickup or Delivery Date<span>*</span>:
34</label>
35<div class="#">
36<label class="#">
37<!-- 
38valueに記載されるのもありですが、上部のjavascriptの制御で初期化されているため空になります。 
39-->
40<input type="text" name="refill_day" id="datepicker" placeholder="mm/dd/yyyy" required>     
41<!-- 
42　上で日付をセット(setDate)しているためvalueの記載は不要になります
43-->
44<div>
45<image class="#" src="ico_calendar.png" alt= "Calendar Img">
46</div>
47</label>
48</div>
49/*↓確認画面に遷移するボタン*/
50<input type="submit" name="refill_confirm" value="Confirm" class="#">
51</fieldset>
52</form>
53</body>

次防ぐにはどうするのさ

今回の理解に必要な情報ですが、
phpよりは、ドキュメント内のjavascriptの読み込みと、
JQueryのウイジェット（datepicker）に関する再理解が求められそうです。
こういった初めてのウイジェットの学習については、いきなり本番用に書くのではなく
ミニマムコードで確認されることを強くお勧めします。

投稿2020/06/22 14:55