Q&A
PHPとJavaScript双方のソースを貼ってください。このままでは何もわかりません。
前提・実現したいこと
phpの練習でショッピングカートシステムを作成しました。
phpでカート内に動的に生成された複数商品の金額を選択した個数によってそれぞれajaxで金額を変えられるようにしたい。
発生している問題・エラーメッセージ
カートに入った商品が一つの時はselectで選んだ個数分、ajaxで金額を動的に変更できるのですが、商品が２つ以上になると新しく追加した商品の金額で一つ目の金額に反映されてしまう。
動的に生成された商品の金額と選択個数を紐づける事ができていない。
該当のソースコード
php
1<?php 2 3require_once('functions.php'); 4 5session_start(); 6 7$name = $_SESSION['name']; 8 9if (isset($_SESSION['id'])) { 10 $msg = 'こんにちは、' . h($name) . ' さん'; 11 $link = '<a href="logout.php">ログアウト</a>'; 12} else { 13 $msg = 'ようこそZAZATOWNへ'; 14 $login_msg = 'ログインしてください'; 15 $link = '<a href="login.php">ログイン</a>'; 16} 17 18 if (isset($_POST['cartIn'])) { 19 20 unset($_SESSION['favorite'][$_POST['product_id']]); 21 22 $product_id = $_POST['product_id']; 23 24 $_SESSION['cart'][$product_id] = [ 25 'product_id' => $_POST['product_id'], 26 'productImage' => $_POST['productImage'], 27 'brandName' => $_POST['brandName'], 28 'productName' => $_POST['productName'], 29 'price' => $_POST['price'], 30 'size' => $_POST['size'], 31 'count' => $_POST['count'] + $_SESSION['cart'][$product_id]['count'], 32 ]; 33 $cartmsg = "カートに入りました"; 34 header('Location: http://192.168.33.10:8000/cart.php'); 35 36 $count = $_SESSION['cart'][$product_id]['count']; 37 $price = $_SESSION['cart'][$product_id]['price']; 38 $subtotal = $price * $count; 39 $_SESSION['cart'][$product_id] += array('subtotal' => $subtotal); 40 $total = array_sum(array_column($_SESSION['cart'], 'subtotal')); 41 $total = number_format($total); 42 // $_SESSION['cart'][$product_id] += array('total' => $total); 43 } 44 45 if (empty($_SESSION['cart'])) { 46 $empty_msg = 'カートに商品が入っていません'; 47 } 48 49 if (isset($_GET['id'])) { 50 // $delete = $_POST['delete']; 51 unset($_SESSION['cart'][$_GET['id']]); 52 $total = array_sum(array_column($_SESSION['cart'], 'subtotal')); 53 $total = number_format($total); 54 // $_SESSION['cart'][$product_id] += array('total' => $total); 55 } 56 57 $total = array_sum(array_column($_SESSION['cart'], 'subtotal')); 58 $total = number_format($total); 59 60?> 61 62<!DOCTYPE html> 63<html lang="ja"> 64<head> 65 <meta charset="utf-8"> 66 <title>EC SITE</title> 67 <link rel="stylesheet" href="styles.css"> 68</head> 69<body> 70 <header> 71 <p><?php echo $msg; ?></p> 72 <a href="index.php"><h1>ZAZA TOWN</h1></a> 73 <form action="search.php" method="GET"> 74 <input type="search" name="search" placeholder="何かお探しですか？"> 75 <input type="submit" name="submit" value="検索"> 76 </form> 77 <?php echo $link; ?> 78 <a href="history.php">購入履歴</a> 79 <a href="favorite.php"><img src="images/image2.jpeg" alt="お気に入り" title="お気に入り"></a> 80 <a href="cart.php"><img src="images/image1.jpeg" alt="カート" title="カート"></a> 81 </header> 82 <p1>ZAZASALE 2020 開催中 <span>MAX90%OFF</span></p1><br> 83 <p><?php echo $cartmsg; ?></p> 84 <p><?php echo $empty_msg; ?></p> 85 <form action="purchase.php" method="POST" name="form" class="form"> 86 <?php foreach ($_SESSION['cart'] as $product_id): ?> 87 <div class="cart_container"> 88 <div class="cart_thumbnail"> 89 <img src="images/<?php echo h($product_id['productImage']); ?>" title="画像" id="cart_img" width="auto" height="240"> 90 </div> 91 <!-- <div class="cart_detail"><br> --> 92 <div class="cart_content"> 93 <p>ブランド : <?php echo h($product_id['brandName']); ?></p> 94 <p>アイテム : <?php echo h($product_id['productName']); ?></p> 95 <p>サイズ : <?php echo h($product_id['size']); ?></p> 96 <!-- <p>個数 : <?php echo h($product_id['count']); ?></p> --> 97 <p>個数 / 98 <select name="count" id="count" class="count"> 99 <?php for ($i=1; $i<=10; $i++) { 100 echo "<option value=" .$i.">".$i."</option>"; 101 } ?> 102 </select></p> 103 <p id="id">id : <?php echo h($product_id['product_id']); ?></p> 104 <p id="price" class="price"><?php echo number_format(h($product_id['price'])); ?><span> (税込)</span></p> 105 <!-- <p id="price">1<span> (税込)</span></p> --> 106 <p><a href="cart.php?id=<?php echo h($product_id['product_id']); ?>" name="delete">削除</a></p> 107 </div> 108 <p id="subtotal" class="subtotal" data>小計 <?php echo number_format(h($product_id['price'])); ?><span> (税込)</span></p> 109 </div> 110 <?php endforeach; ?> 111 <input type="hidden" name="product_id" value="<?php echo h($product_id['product_id']); ?>"> 112 <input type="hidden" name="productImage" value="<?php echo h($product_id['productImage']); ?>"> 113 <input type="hidden" name="productName" value="<?php echo h($product_id['productName']); ?>"> 114 <input type="hidden" name="brandName" value="<?php echo h($product_id['brandName']); ?>"> 115 <input type="hidden" name="size" value="<?php echo h($product_id['size']); ?>"> 116 <input type="hidden" name="count" value="<?php echo h($product_id['count']); ?>"> 117 <input type="hidden" name="subtotal" value="<?php echo h($product_id['subtotal']); ?>"> 118 <input type="hidden" name="total" value="<?php echo h($total); ?>"> 119 120 <div class="purchase">商品合計 ¥ 121 <!-- <p class="total">商品合計 ¥<?php echo h($total); ?><span> (税込)</span></p> --> 122 <p class="total"><?php echo h($total); ?></p><span> (税込)</span> 123 </div> 124 125 <p class="buy"> 126 <input type="submit" name="purchase" value="購入手続き"> 127 </p> 128 </form> 129 <p><a href="index.php">買い物を続ける</a></p> 130 131<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 132<script> 133 134 $(function() { 135 var sessionCart = <?php echo json_encode($_SESSION['cart']); ?>; 136 137 $('select').on('change', function() { 138 139 // $('select').each(function() { 140 var selected = $(this).val(); 141 142 console.log(selected); 143 144 Object.values(sessionCart).forEach(function(value, index) { 145 console.log(value.price + '[' + value.product_id + ']'); 146 const total = value.price * selected; 147 console.log(total); 148 149 $.ajax({ 150 type: "POST", 151 url: "http://192.168.33.10:8000/cart.php", 152 data: {"total": "total"} 153 }).done(function() { 154 // $('#subtotal').each(function() { 155 $('#subtotal').text('小計 ' + total + '(税込)'); 156 // }); 157 }).fail(function(XMLHttpRequest, textStatus, errorThrown) { 158 alert(errorThrown); 159 }); 160 }); 161 // }); 162 }); 163}); 164</script> 165</body> 166 167</html> 168
試したこと
下記のようにeachを使ってみましたが動的に生成される要素には対応しませんでした。
$('#subtotal').each(function() {
$('#subtotal').text('小計 ' + total + '(税込)');
});
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
すみません。コードが抜け落ちていたようです。
Ajaxのレスポンス結果の引数は記述忘れでしょうか？あとcart.phpはどれに当たるものでしょうか。
ご指摘ありがとうございます。
記述忘れではなくそのような理解ができていませんでした。
下記のようなイメージで宜しいでしょうか？
$.ajax({
type: "POST",
url:
data: {"total": "total"}
}).done(function(response) {
$('#subtotal').text('小計 ' + total + '(税込)');
return response;
})
ajaxの基礎を学んだ方がいいかも。これだとレスポンス結果を何も反映させてない（加工してない）ですよ
ajaxについて何もわかっていない事に気付きました。しっかり基礎学んでからまたチャレンジしたいと思います。
ありがとうございます。
あなたの回答
tips
プレビュー
