Javascript 在ajax的帮助下,使用select选项无法更新数量
我正在创建一个简单的添加到购物车功能,当用户成功地将其产品添加到购物车时,他们可以查看购物车并使用购物车页面中的选择选项更新数量,但似乎我只能更新添加到购物车的第一个产品,如果我添加第二个产品,我无法更新第二个产品 cart.phpJavascript 在ajax的帮助下,使用select选项无法更新数量,javascript,php,jquery,html,ajax,Javascript,Php,Jquery,Html,Ajax,我正在创建一个简单的添加到购物车功能,当用户成功地将其产品添加到购物车时,他们可以查看购物车并使用购物车页面中的选择选项更新数量,但似乎我只能更新添加到购物车的第一个产品,如果我添加第二个产品,我无法更新第二个产品 cart.php <?php if(isset($_COOKIE["shopping_cart"])) { $total = 0; $cookie_data = stripslashes($_COOKIE['s
<?php
if(isset($_COOKIE["shopping_cart"]))
{
$total = 0;
$cookie_data = stripslashes($_COOKIE['shopping_cart']);
$cart_data = json_decode($cookie_data, true);
?>
<?php
foreach($cart_data as $keys => $values)
{
?>
<form id="myForm">
<input type="hidden" name="hidden_id" value="<?php echo $values["item_id"];?>">
<select name="qty" id="qty" class="form-control">
<option style="display:none;" selected><?php echo $values["item_quantity"];?></option>
<?php
for($i=1; $i<=$values["item_qty"]; $i++)
{
?>
<option value="<?php echo $i;?>"><?php echo $i;?></option>
<?php
}
?>
</select>
</form>
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#qty").change(function(){
var url = "<?php echo URLROOT; ?>"
var form = $( '#myForm' ).serialize();
$.ajax({
type: "POST",
url: url + '/shops/cookiesave',
data: form,
beforeSend: function() {
//do something here like load a loading spinner etc.
},
})
.done(function() {
window.location.reload(true);
})
});
});
</script>
$(“#qty”)
将只识别具有该ID的第一个元素。因此它不会处理任何其他元素上的事件。在HTML中,具有相同ID的多个元素是无效的——毕竟,如果一个ID不能唯一地标识某个东西,那么根据定义,它不是一个ID!因此JavaScript/jQuery将忽略第一个之后的任何重复项。$(“#myForm”)
也会有同样的问题
您需要使用类来标识
,然后遍历DOM以查找父窗体:
<form>
<input type="hidden" name="hidden_id" value="<?php echo $values["item_id"];?>">
<select name="qty" class="qty" class="form-control">
<option style="display:none;" selected><?php echo $values["item_quantity"];?></option>
<?php
for($i=1; $i<=$values["item_qty"]; $i++)
{
?>
<option value="<?php echo $i;?>"><?php echo $i;?></option>
<?php
}
?>
</select>
</form>
你能告诉我怎么做选项b吗。但是您知道,您最好使用PHP$\u会话来存储购物车,而不是自己显式地设置cookie。
<form>
<input type="hidden" name="hidden_id" value="<?php echo $values["item_id"];?>">
<select name="qty" class="qty" class="form-control">
<option style="display:none;" selected><?php echo $values["item_quantity"];?></option>
<?php
for($i=1; $i<=$values["item_qty"]; $i++)
{
?>
<option value="<?php echo $i;?>"><?php echo $i;?></option>
<?php
}
?>
</select>
</form>
$(".qty").change(function(){
var url = "<?php echo URLROOT; ?>"
var form = $(this).closest("form").serialize();
$.ajax({
type: "POST",
url: url + '/shops/cookiesave',
data: form,
beforeSend: function() {
//do something here like load a loading spinner etc.
},
})
.done(function() {
window.location.reload(true);
})
});