2

I have two problems in this page.
Problem 1
I have text box and a table, when value of the text box match with the value in the product id column in the table, the value in the quantity should be increase by 1.
When i run the debugger, i am getting the values but the if statement is not working.
Problem 2
The value of the quantity should multiply with value of price and display the result in total column. Multiplication is working for 1st row but for the 2nd row and later row its not working. For this I tried with both ID's and CLASS
NOTE
All the row are dynamically generated from backend.
Thanks in Advance..

/*Increase quanity in billing table*/
$(document).ready(function(){
        $("#add").click(function () {
    var product1 = parseInt(document.getElementById('billing-product-id').value); 
    var product2 = parseInt(document.getElementById('billing-product-id1').value); 
    var quanity = parseInt(document.getElementById('billing-quanity').value);
    
    if(product1 === product2 ){
        quanity = quanity + 1;
            
    } 
});

});

/*billing table total*/
$("#billing-quanity,#billing-price").keyup(function () {
    $('#billing-total').val($('#billing-quanity').val() * $('#billing-price').val());
     
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Billing Table -->
        <div class="container-fluid billing-section">
        <table class="table table-striped" id="billing-table">
            
            <form action="" method="post">
            <legend>Billing</legend>
            <thead>
            <tr>
                <th>Product ID</th>
                <th><input type="text" name="billing-product-id" id="billing-product-id" class="form-control" required></th>
                <th><input type="submit" class="btn btn-primary" value="ADD" id="add"></th>
            </tr>
            </thead>
            </form>
 <thead>
            <tr>
                <th>S.no</th>
                <th>Product ID</th>
                <th>Product Name</th>
                <th>Quantity</th>
                <th>Price</th>
                <th>Total</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
        <tr>
            <td><input type="number" class="form-control" id="billing-sno" disabled value="1"></td>
            <td><input type="number" class="form-control" id="billing-product-id1" disabled value="123"></td>
            <td><input type="text" class="form-control" id="billing-product-name" disabled value="shoes"></td>
            <td><input type="number" class="form-control" id="billing-quanity" value=""></td>
            <td><input type="number" class="form-control" id="billing-price" disabled value="100"></td>
            <td><input type="number" class="form-control" id="billing-total" disabled value=""></td>
            <td><input type="button" class="btn btn-primary row-delete" value="Delete" ></td>
        </tr>
        <tr>
            <td><input type="number" class="form-control" id="billing-sno" disabled value="1"></td>
            <td><input type="number" class="form-control" id="billing-product-id1" disabled value="123"></td>
            <td><input type="text" class="form-control" id="billing-product-name" disabled value="shoes"></td>
            <td><input type="number" class="form-control" id="billing-quanity" value=""></td>
            <td><input type="number" class="form-control" id="billing-price" disabled value="100"></td>
            <td><input type="number" class="form-control" id="billing-total" disabled value=""></td>
            <td><input type="button" class="btn btn-primary row-delete" value="Delete" ></td>
        </tr>
        <tr>
            <td><input type="number" class="form-control" id="billing-sno" disabled value="1"></td>
            <td><input type="number" class="form-control" id="billing-product-id1" disabled value="123"></td>
            <td><input type="text" class="form-control" id="billing-product-name" disabled value="shoes"></td>
            <td><input type="number" class="form-control" id="billing-quanity" value=""></td>
            <td><input type="number" class="form-control" id="billing-price" disabled value="100"></td>
            <td><input type="number" class="form-control" id="billing-total" disabled value=""></td>
            <td><input type="button" class="btn btn-primary row-delete" value="Delete" ></td>
        </tr>
        
        </tbody> 
        </table>
        </div>
prasad
  • 49
  • 4

2 Answers2

1

This is the code you need:

/*Increase quanity in billing table*/
$(document).ready(function(){
        $("#add").click(function () {
    var product1 = parseInt(document.getElementById('billing-product-id').value); 
    var product2 = parseInt(document.getElementById('billing-product-id1').value); 
    var quantity = parseInt(document.getElementById('billing-quanity').value) || 0;
    
    if(product1 == product2 ){
      quantity = quantity + 1;
      
      $('#billing-quanity').val(quantity);
      updateTotal();
            
    } 
    return false;
});

});

function updateTotal() {
    $('#billing-total').val($('#billing-quanity').val() * $('#billing-price').val());
}

/*billing table total*/
$("#billing-quanity,#billing-price").bind("keyup change", updateTotal);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Billing Table -->
        <div class="container-fluid billing-section">
        <table class="table table-striped" id="billing-table">
            
            <form action="" method="post">
            <legend>Billing</legend>
            <thead>
            <tr>
                <th>Product ID</th>
                <th><input type="text" name="billing-product-id" id="billing-product-id" class="form-control" required></th>
                <th><input type="submit" class="btn btn-primary" value="ADD" id="add"></th>
            </tr>
            </thead>
            </form>
 <thead>
            <tr>
                <th>S.no</th>
                <th>Product ID</th>
                <th>Product Name</th>
                <th>Quantity</th>
                <th>Price</th>
                <th>Total</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
        <tr>
            <td><input type="number" class="form-control" id="billing-sno" disabled value="1"></td>
            <td><input type="number" class="form-control" id="billing-product-id1" disabled value="123"></td>
            <td><input type="text" class="form-control" id="billing-product-name" disabled value="shoes"></td>
            <td><input type="number" class="form-control" id="billing-quanity" value=""></td>
            <td><input type="number" class="form-control" id="billing-price" disabled value="100"></td>
            <td><input type="number" class="form-control" id="billing-total" disabled value=""></td>
            <td><input type="button" class="btn btn-primary row-delete" value="Delete" ></td>
        </tr>
        <tr>
            <td><input type="number" class="form-control" id="billing-sno" disabled value="1"></td>
            <td><input type="number" class="form-control" id="billing-product-id1" disabled value="123"></td>
            <td><input type="text" class="form-control" id="billing-product-name" disabled value="shoes"></td>
            <td><input type="number" class="form-control" id="billing-quanity" value=""></td>
            <td><input type="number" class="form-control" id="billing-price" disabled value="100"></td>
            <td><input type="number" class="form-control" id="billing-total" disabled value=""></td>
            <td><input type="button" class="btn btn-primary row-delete" value="Delete" ></td>
        </tr>
        <tr>
            <td><input type="number" class="form-control" id="billing-sno" disabled value="1"></td>
            <td><input type="number" class="form-control" id="billing-product-id1" disabled value="123"></td>
            <td><input type="text" class="form-control" id="billing-product-name" disabled value="shoes"></td>
            <td><input type="number" class="form-control" id="billing-quanity" value=""></td>
            <td><input type="number" class="form-control" id="billing-price" disabled value="100"></td>
            <td><input type="number" class="form-control" id="billing-total" disabled value=""></td>
            <td><input type="button" class="btn btn-primary row-delete" value="Delete" ></td>
        </tr>
        
        </tbody> 
        </table>
        </div>

Of course it only works for the first same ID and not for all.

Changes

  • return false;

    The ADD button is a submit button which means that when you click it the page reloads. By adding the return false you prevent the page from reloading.

  • var quantity = parseInt(document.getElementById('billing-quanity').value) || 0;

    When billing-quanity field was empty, the quantity var had value 'NaN', so I added the || 0 that you see which gives the value 0 when the billing-quantity field is empty.

  • $("#billing-quanity,#billing-price").bind("keyup change", updateTotal);

    Using the above line the total will change not only when the user writes somthing in the quantity textbox, but also when that value is changed using the up and down arrows. I also made the updateTotal a function in order to call it when I change the quantity programmatically (inside the if(product1 == product2 )).

Hope this was helpful. If you wanted something else please let me know.

Sources

  1. jQuery 'if .change() or .keyup()'
  2. How to turn NaN from parseInt into 0 for an empty string?
Thanasis1101
  • 1,614
  • 4
  • 17
  • 28
0

Try this way. I've converted IDs to Classes because IDs should be unique not repeated. Also changed function from button on click to form on submit, this way it prevent page to reload.

Demo: https://codepen.io/kastriotcunaku/pen/QMgLNx?editors=1010

/*Increase quanity in billing table*/
$(document).ready(function() {
 $('#add').submit(function( event ) {
  event.preventDefault();
  $('.product').each(function() {
   var input = $('#billing-product-id').val();
   var id = $(this).find('.billing-product-id').val();
   var quantity = $(this).find('.billing-quanity');
   var quantityValue = quantity.val();
   var price = $(this).find('.billing-price').val();
   var total = $(this).find('.billing-total');
   
   if(input === id) {
    quantity.val(++quantityValue);
    total.val(quantityValue * price)
   }
  });
 });
 
 // Change Total on manual Quantity change
 $('.billing-quanity').change(function() {
  var quantity = $(this).val();
  var price = $(this).parent().parent().find('.billing-price').val();
  $(this).parent().parent().find('.billing-total').val(quantity * price);
 });
});

    
    
    
    
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Billing Table -->
<div class="container-fluid billing-section">
 <table class="table table-striped" id="billing-table">

  <form action="" method="post" id="add">
   <legend>Billing</legend>
   <thead>
    <tr>
     <th>Product ID</th>
     <th><input type="text" name="billing-product-id" id="billing-product-id" class="form-control" required></th>
     <th><input type="submit" class="btn btn-primary" value="ADD"></th>
    </tr>
   </thead>
  </form>
  <thead>
   <tr>
    <th>S.no</th>
    <th>Product ID</th>
    <th>Product Name</th>
    <th>Quantity</th>
    <th>Price</th>
    <th>Total</th>
    <th></th>
   </tr>
  </thead>
  <tbody>
   <tr class="product">
    <td><input type="number" class="form-control billing-sno" disabled value="1"></td>
    <td><input type="number" class="form-control billing-product-id" disabled value="123"></td>
    <td><input type="text" class="form-control billing-product-name" disabled value="shoes"></td>
    <td><input type="number" class="form-control billing-quanity" value="0"></td>
    <td><input type="number" class="form-control billing-price" disabled value="100"></td>
    <td><input type="number" class="form-control billing-total" disabled value=""></td>
    <td><input type="button" class="btn btn-primary row-delete" value="Delete"></td>
   </tr>
   <tr class="product">
    <td><input type="number" class="form-control billing-sno" disabled value="1"></td>
    <td><input type="number" class="form-control billing-product-id" disabled value="123"></td>
    <td><input type="text" class="form-control billing-product-name" disabled value="shoes"></td>
    <td><input type="number" class="form-control billing-quanity" value="0"></td>
    <td><input type="number" class="form-control billing-price" disabled value="100"></td>
    <td><input type="number" class="form-control billing-total" disabled value=""></td>
    <td><input type="button" class="btn btn-primary row-delete" value="Delete"></td>
   </tr>
   <tr class="product">
    <td><input type="number" class="form-control billing-sno" disabled value="1"></td>
    <td><input type="number" class="form-control billing-product-id" disabled value="123"></td>
    <td><input type="text" class="form-control billing-product-name" disabled value="shoes"></td>
    <td><input type="number" class="form-control billing-quanity" value="0"></td>
    <td><input type="number" class="form-control billing-price" disabled value="100"></td>
    <td><input type="number" class="form-control billing-total" disabled value=""></td>
    <td><input type="button" class="btn btn-primary row-delete" value="Delete"></td>
   </tr>

  </tbody>
 </table>
</div>
kastriotcunaku
  • 1,179
  • 7
  • 11