用ajax更新数量

时间:2017-11-24 01:50:17

标签: javascript php jquery ajax

我已经尝试过并取得了成功。但是有2行,只有第一行更新,而不是第二行。如果有多行,则不会更新第二行和其他行。

任何人都可以帮我实现ajax吗?

img

cart.php:

<td>            
    <form method="post" action="cart-update.php">
        <input type="text" name="cart_id" value="<?php echo $row['cart_id']?>">
        <input type="text" name="item_id" value="<?php echo $row['item_id']?>">
        <input type="text" name="id" value="<?php echo $row['cdid']?>">
        <center>
        <button type="submit" class="qtyminus" field="quantity" name="minus" id="value-minus2" onclick="minusqty()">-</button> 
        <input type="text" name="quantity" class="qty" id="value2" value="<?php echo $row['qty']?>">
        <button type="submit" class="qtyplus" field="quantity" name="plus" id="value-plus2" onclick="plusqty()">+</button>  
        </center>
    </form>                     
</td>
//ajax & javascript
<script type="text/javascript">
function minusqty() {//update when press button -
var quantityVal = $("input[name='quantity']").val();
var qtyVal = quantityVal-1; 
var idVal = $("input[name='id']").val();
var itemidVal = $("input[name='item_id']").val();
var cartidVal = $("input[name='cart_id']").val();
$.ajax({
    url: 'cart-update.php',
    method: 'GET',
    data: {qty: qtyVal, item_id: itemidVal, id: idVal, cart_id: cartidVal },
    cache: false,
    dataType: 'html',
    success: function(data) {

    },
});
}
</script>

<script type="text/javascript">
function plusqty() {////update when press button +
var quantityVal2 = $("input[name='quantity']").val();
var qtyVal2 = quantityVal2-(-1); 
var idVal2 = $("input[name='id']").val();
var itemidVal2 = $("input[name='item_id']").val();
var cartidVal2 = $("input[name='cart_id']").val();
$.ajax({
    url: 'cart-update.php',
    method: 'GET',
    data: {qty: qtyVal2, item_id: itemidVal2, id: idVal2, cart_id: cartidVal2 },
    cache: false,
    dataType: 'html',
    success: function(data) {

    },
});
}
</script>

cart-update.php:

<?php
include 'config.php';       

$cart_id = $_GET['cart_id'];
$id      = $_GET['id'];
$item_id = $_GET['item_id'];
$qty     = $_GET['qty']; 

$myqry=mysqli_query($conn,"UPDATE cart_order_detail SET qty='$qty'                                          
                           WHERE cart_id='$cart_id'                                         
                           AND item_id='$item_id'                                           
                           AND id='$id'");

?>

我已经尝试过并取得了成功。但是有2行,只有第一行更新,而不是第二行。如果有多行,则不会更新第二行和其他行。

我觉得这里错了:    var quantityVal = $("input[name='quantity']").val();

1 个答案:

答案 0 :(得分:1)

在html中的onclick属性中,添加event参数

id="value-minus2" onclick="minusqty(event)">-</button>
id="value-plus2" onclick="plusqty(event)">-</button>

在ajax脚本上,将参数添加到函数以捕获事件,然后添加preventDefault以防止页面刷新

function minusqty(e) {   // minusqty
    e.preventDefault()

function plusqty(e) {    //plusqty
    e.preventDefault()

然后在minusqty和plusqty ajax成功,你改变文本框的值

success: function(data) {   // minusqty ajax success
    quantityVal = qtyVal;
},

success: function(data) {   // plusqty ajax success
    quantityVal2 = qtyVal2;
},

更新

拥有多个数量字段,您应该使用

var quantityVal = $(this).closest("input[name='quantity']").val();