从javascript设置HTML元素的值

Question

I am using session variable to keep track of items in the cart. I generate a table using loop to display contents of the cart. The code for table is as follow:

<?php
  $count=0;
  $grandTotal=0;
  foreach($_SESSION['cart'] AS $product) {
    $table=$product['table'];
    $id=$product['id'];
    $Name=$product['name'];
    $qty=$product['quantity'];
    $price=$product['price'];
    $total=$qty*$price;
    $grandTotal +=$total;
?>

<tr>
    <td class="cart_product">
        <img src=<?php $i=2; echo "images/".$table."/".$id.".jpg"?> height="150" width="150">
    </td>
    <td class="cart_description">
        <h4><a href=""><?php echo $Name?></a></h4>
        <p><?php echo "Web ID: ".$id?></p>
    </td>
    <td class="cart_price">
        <p><?php echo $price?></p>
    </td>
    <td class="cart_quantity">
        <div class="cart_quantity_button">
            <a class="cart_quantity_up" href="addToCart.php?table=<?php echo $table ?>&action=inc&id=<?php echo $id ?>" id="increment"> + </a>
            <input class="cart_quantity_input" type="text" name="quantity" id="qty" value="<?php echo $qty?>" autocomplete="off" size="2">
            <!-- <p class="cart_quantity_input" name="qunatity" id="qty"><?php echo $qty?></p>-->
            <a class="cart_quantity_down" href="addToCart.php?table=men&action=dec&id=<?php echo $id ?>" name="decreament" > - </a>
        </div>
    </td>
    <td class="cart_total">
        <p class="cart_total_price"><?php echo $total ?></p>
    </td>
    <td class="cart_delete">
        <a class="cart_quantity_delete" href="addToCart.php?table=men&action=del&id=<?php echo $id ?>"><i class="fa fa-times"></i></a>
    </td>
</tr>

<?php
    }
    $tax=0.15*$grandTotal;
?>

I am having problem with + and - buttons within a tags. I want to increment or decrement value in input field named quantity . But since i am generating table in a loop i do not know the id of each field. I want to do something like this:

<script>
    $(document).ready(function () {
        $("#increment").click(function () {
            var oldval=document.getElementById("qty").value;
            var newval=parseInt(oldval);
            document.getElementById("qty").value=newval++;
        });
    });
</script>

But this method always increments first quantity field in the table. How do i get ids of other quantity fields in the table?

Answer 1

Dont use ids inside loop.Just use class for that>check the snippet for a smaple demo

 $(document).ready(function () { $(".increment").click(function () { var oldval = $(this).prev('.qty').val(); var newval = parseInt(oldval)+ 1; $(this).prev('.qty').val(newval); }); $(".decrement").click(function () { var oldval = $(this).next('.qty').val(); var newval = parseInt(oldval) - 1; $(this).next('.qty').val(newval); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td>sl No</td> <td>name</td> <td>Dept</td> <td>dummy</td> <td>dummy</td> <td>dummy</td> </tr> <tr> <td>1</td> <td>name</td> <td> </td> <td>name</td> <td>name</td> <td> </td> </tr> <tr> <td>2</td> <td>name</td> <td>Dept</td> <td>name</td> <td> <button class="decrement"> - </button> <input type="text" class="qty" value="1"/> <button class="increment">+ </button> </td> <td>name</td> </tr> <tr> <td>3</td> <td>name</td> <td>name</td> <td>name</td> <td>name</td> <td>name</td> </tr> </table> 

Answer 2

Don't use same id for multiple elements instead use class like below

<a class="cart_quantity_up" href="addToCart.php?table=<?php echo $table ?>&action=inc&id=<?php echo $id ?>" class="increment">

same is case of decrement button user class

<a class="cart_quantity_down" href="addToCart.php?table=men&action=dec&id=<?php echo $id ?>" name="decreament" class="decreament"> - </a>

You can bind click event to these anchors and change the quantity in input inside same parent div

$(function(){
  $('.increment').on('click', function(){
      var $parent = $(this).closest('.cart_quantity_button');
      var $input = $parent.find('.cart_quantity_input');
      var value = $input.val();
      value = parseInt(value)+1;
      $input.val(value);
  });
  $('.decreament').on('click', function(){
      var $parent = $(this).closest('.cart_quantity_button');
      var $input = $parent.find('.cart_quantity_input');
      var value = $input.val();
      value = parseInt(value)-1;
      $input.val(value);
  });
});

Answer 3

There are 2 solutions to this problem:

1. When generating table using php, assign unique id to each row's <a> and <input> , such as #increment_id8878 and #input_id8878 . Then when #increment or #decreament button is clicked, operate <input> with corresponding id.

2. Operate <input> element with jQuery's relative selector.

For example:

$('.increment').click(function() {
    var inputEle = $(this).siblings('input');
    var originVal = inputEle.val();
    inputEle.val(parseInt(originVal) + 1);
});

A jsfiddle is made for the 2nd solution.

BTW, duplicate id should be avoided in HTML code.