Question 15065 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How my jQuery function work on whole table?

I have a problem in my code. My jQuery code is only implement of the first row of table not on others. Here is my code:

   <tr>
                <td><?php echo $row['serial no.'] ?></td>
                <td><?php echo $row['pname'] ?></td>
                <td><input type="text" class="form-control" id="prate"  name = "uprice" value="<?php echo $prate = $row['uprice'];?>"></td>
                <td> <input type="number" class="form-control" id="pqty" name = "quantity" value ="<?php $quant = ""; echo $quant; ?>"></td>
                <td> <input type="text" class="form-control" id="pTotal" name = "price" value = "<?php $tprice = ""; echo $tprice; ?>" ></td>
    </tr>

This is my HTML code:

<script>
              $("#prate").keyup(function(){
                // console.log('presssed');

          var prate = document.getElementById('prate').value;
          var pqty = document.getElementById('pqty').value;
          var ptotal = parseInt(prate) * parseInt(pqty);

          document.getElementById('pTotal').value = ptotal;
        });

        $("#pqty").keyup(function(){
          // console.log('presssed');
          var prate = document.getElementById('prate').value;
          var pqty = document.getElementById('pqty').value;
          var ptotal = parseInt(prate) * parseInt(pqty);

          document.getElementById('pTotal').value = ptotal;
        });
        </script>

What can I try to resolve this?

Tags:

4

Answers


  1. 0

    Use class selector (not id selector) and each method to emplement your desired commands on all rows.

    Login or Signup to reply.
  2. 0

    ID must be unique, instead put a class as a reference for each table data and try each method:

     $('.pqty').each(function(i, element){
    $(element).keyup(function(evt) { 
        /* anything */
    })
 })
    Login or Signup to reply.
  3. 0

    As you know, id must be unique on whole page. So on each row and items, either you have make unique id (Which will be complicated to bind event), so you can go with class or as below script for binding the events.

    <script>
        $('input[name="uprice"]').keyup(function(){
        
          var prate = $(this).val();
          var pqty = $(this).parent().next().find('input[name="quantity"]').val();
          var ptotal = parseInt(prate) * parseInt(pqty);

         $(this).parent().next().next().find('input[name="price"]').val(ptotal);
        });

        $('input[name="quantity"]').keyup(function(){
          var prate = $(this).parent().prev().find('input[name="uprice"]').val();;
          var pqty = $(this).val();
          var ptotal = parseInt(prate) * parseInt(pqty);

          $(this).parent().next().find('input[name="price"]').val(ptotal);
        });
</script>

    Not have tested but should help you.

    Login or Signup to reply.
  4. 0

    What you have to do is (1) Gather all those classes in a Variable. (2) Run Foreach loop on each element. (3) While looping each element, you must sum all of these elements’ values.

    // Step 1: Fetch Classes
var FetchedClasses = document.getElementsByClassName("myclass"); 
var Sum = 0;
// Step 2: Iterate them
Array.prototype.forEach.call(FetchedClasses, function(element) {
  // Step 3: Sum up their values
  Sum = Sum + element.value; //
});
// Now Show it anywhere you like.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search