用ajax更新数量

Question

I've tried and succeeded. but there are 2 row, only the first row is updated, not for the second row. if more than one row, the second row and others row will not be updated.

Can anyone help me implement with ajax ?

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'");

?>

I've tried and succeeded. but there are 2 row, only the first row is updated, not for the second row. if more than one row, the second row and others row will not be updated.

I think its wrong here : var quantityVal = $("input[name='quantity']").val();

Answer 1

On your onclick attributes in html, add event parameter

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

On your ajax scripts, add parameter to functions to catch event, then add preventDefault to prevent page refresh

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

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

Then on minusqty and plusqty ajax success, you do the changing of value of textbox

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

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

Update:

Having many quantity fields, you should use

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