ショッピングカートの数量をSELECT/OPTIONで変更した時に値が保持できない。

前提・実現したいこと

テキストを基にショッピングサイトを試作しています。カートに入った商品の一覧ページで、商品の数量を変更する方法で悩んでいます。
select/optionを使い、例えば1から5までの選択肢からそれぞれの商品の購入数をユーザーに選んでもらい、配列で別のファイルに一旦post送信し、header(“Location: xxx”)ですぐに一覧ページに戻して変更された数量を反映させます。

発生している問題・エラーメッセージ

お聞きしたいことは２つあります。
ひとつは、一覧ページに戻って来た数量の配列を表示させる方法を次のように考えたのですが、これで問題無いかという点です。考えたのはソースコードにあるように、selectの中に<option value=”$qty[$i]”>$qty[$i]</option>を追加してselectedをつけ、またこれでは既存のoptionの中にある同じ数字とダブってしまうのでhiddenで消すというものです。一応思った通りに動きますが、疑問に思うのは、selectedが付いた追加optionはhiddenによって表示されていないはずなので、選んだ数字が表示されているのはselectedが付いていない同じ数字のoptionの方だと思われ、何故selectedが無いのに表示されるのかという点です。
もうひとつは、上記の自分が考えた方法だとカートに入った商品すべての数量を選ばなければならないことです。数量を変えたくない商品も、一度同じ数量を選ばないと数字の値を保持してくれず、配列に空要素が入ってしまいます。毎回すべての数量を選ぶのではユーザビリティが悪すぎます。変更したい数量だけ変更し、それ以外はそのままsubmitすれば、その変更した値が反映するようにしたいのですが、良い方法はありますか。
select/optionはselectされた値が保持されると理解していますが、配列で商品ページに渡ってきた数字が<option value=”$qty[$i]” selected>$qty[$i]</option>に入ることによりselectされたということにはなっていないのでしょうか。

さらに欲を言えば、数量を選んだ後わざわざsubmitボタンを押して反映することなく、amazonのカートのようにselect/optionで数量を選択しただけで即反映されるような仕組みにしたいのですが、今の知識では出来そうにありません。
下のコードは要点のみ残し、分かりやすいように簡略化してあります。
よろしくお願い致します。

該当のソースコード

PHP

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Shop</title>
</head>
<body>
<?php
  $cart=$_SESSION['cart'];/*カートに入った各商品のcodeが配列で入っている*/ 
  $qty=$_SESSION['qty'];/*カートに入った各商品の数量が配列で入っている。
数量変更後は、変更された数量が配列で入ってくる。*/
  $max=count($cart);/*カートに入った商品点数*/

  $dbh=new PDO('mysql:host=localhost;dbname=shop;charset=utf8',$user='root',$pass='');
  $dbh->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);

  foreach($cart as $key => $val) {
    $sql='SELECT name,price FROM table WHERE code=?';
  $stmt=$dbh->prepare($sql);
  $data[0]=$val;
  $stmt->execute($data);
  
  $rec=$stmt->fetch(PDO::FETCH_ASSOC);
  
	$name[]=$rec['name'];
  $price[]=$rec['price'];
}
  $dbh=null;
  ?>
  <form method="post" action="qty_change.php">
    <?php for($i=0;$i<$max;$i++) { ?>
    商品名: <?php print $name[$i]; ?><br>
    価格: <?php print $price[$i]; ?>円<br>
    数量: <select name="qty<?php print $i; ?>">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="<?php $qty[$i] ?>" selected hidden><?php print $qty[$i] ?></option>
          </select>
    <input type="hidden" name="max" value="<?php print $max; ?>"> 
  <?php } ?> 
    <input type="submit" value="数量変更"> 
  </form>

</body>
</html>

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

m.ts10806

2020/12/03 14:14 編集

>下のコードは要点のみ残し、分かりやすいように簡略化してあります。 SESSIONが参照不可能である「変に誤解や疑念を与えるコード」になっています。せめて自身で動作確認できるくらいのミニマムコードにしてください。

schuloco

2020/12/04 05:24

SESSIONについてはコメントで説明させて頂いたつもりでしたが、誤解や疑念を与えてしまったようで申し訳ありませんでした。SESSIONに入る要素がどういうコードから来ているか、送られる前の別ファイルのコードも明記すべきだということと理解します。今後気をつけたいと思います。

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

回答1件

ベストアンサー

一つ目の件ですが、optionの部分は以下のような書き方で解決すると思います。

php
1<?php for ($j = 1; $j <=5; $j ++): ?>
2	<option value="<?=$j?>"<?php if ($j == $qty[$i]): ?> selected<?php endif; ?>><?=$j?></option>
3<?php endfor; ?>

2つ目の件は、ajaxを使い、必要なデータのみ送信して更新する方法を取ればリロードの必要もなくユーザビリティも格段に良くなるはずです。

あと、htmlを出力しだしてから同じファイル上でデータベース接続などをされていますが、ファイルは切り分けて、別々に呼び出す形にした方が保守もしやすく、セキュリティ上も良くなります。

投稿2020/12/03 15:17

編集2020/12/03 15:20

cerfweb

総合スコア1899

schuloco

2020/12/04 05:30

1つ目の件は、教えて頂いたコードを見て、心の中で「なるほど！」と呟きました。スマートな書き方ですね。有難うございました。２つ目の件は、Javascriptの基礎をざっと学んだ程度なので、どう書けばいいのか分かりません。もし可能であれば、キーとなるコードを教えて頂けると助かります。もしくは自分で調べるために、どのようなワードで検索すればヒントになる記事が見つかるかアドバイスを頂けますでしょうか。データベース接続ファイルの切り分けについては、以前他の回答者様にも指摘されました。これはデータベース接続の部分は別ファイルで行い、それをrequire_onceなどでhtmlファイルに読み込むべきということだと理解します。有難うございました。