i am creating a simple inventory system using jquery.what is problem is when i calculation products we have a two option GR and KG. if i select as GR it need to be calculation the GR calculation part if i select as KG it need to be calculation the KG calculation part.i ran into the problem with KG is working GR not working what i tried so far i attached along with the image.
Form Design
<nav class="navbar navbar-dark bg-dark"> <span class="navbar-brand mb-0 h1">Restaurant Coffee Shop Pos</span> </nav> <tr> <td> <input type="checkbox" name="pos" value="Suger"> <label>Suger</label> </td> <td> <input type="number" name="qty" id="qty" size="10px"> </td> <td> <select class="form-control" id="option" name="option" placeholder="option" required> <option value="">Please Select</option> <option value="1">GR</option> <option value="2">KG</option> </select> </td> </tr> <tr> <td> <input type="checkbox" name="pos" value="Tea"> <label>Tea</label> </td> <td> <input type="number" name="qty" size="10px"> </td> <td> <select class="form-control" id="option" name="option" placeholder="Plan" required> <option value="">Please Select</option> <option value="1">GR</option> <option value="2">KG</option> </select> </td> </tr> <tr> <td> <input type="checkbox" name="pos" value="Flour"> <label> Flour</label> </td> <td> <input type="number" name="qty" size="10px"> </td> <td> <select class="form-control" id="option" name="option" placeholder="option" required> <option value="">Please Select</option> <option value="1">GR</option> <option value="2">KG</option> </select> </td> </tr> <tr> <td> <input type="checkbox" name="pos" value="Rice"> <label> Rice</label> </td> <td> <input type="number" name="qty" size="10px"> </td> <td> <select class="form-control" id="status" name="status" placeholder="Ricestatus" required> <option value="">Please Select</option> <option value="1">GR</option> <option value="2">KG</option> </select> </td> </tr> <tr> <td> <input type="checkbox" name="pos" value="Dhall"> <label> Dhall</label> </td> <td> <input type="number" name="qty" size="10px"> </td> <td> <select class="form-control" id="Dhallstatus" name="status" placeholder="status" required> <option value="">Please Select</option> <option value="1">GR</option> <option value="2">KG</option> </select> </td> </tr> </table> <input type="button" class="btn btn-info" onclick="Add()" value="Ok" name="Ok" id="Ok"> </div> </form> </div> </div> </div> <div class="col-sm-4"> <div class="container"> <div class="list-group-item list-group-tem-action active">AddProducts</div> <table id="tbl-item" class="table table-dark table-bordered" cellspacing="0" width="100%" align="center"> <thead> <tr> <th>Delete</th> <th>Item</th> <th>Price</th> <th>Qty</th> <th>Total</th> </tr> <tbody> </tbody> </table> </div> </div> <div class="col-sm-2"> <div class="list-group-item list-group-item-action active">Bill</div> <div> <label>Total</label> <input type="text" style="color: yellow; background: black; font-size: 30px;" id="total" name="total" placeholder="Total" required> </div> </br> <div> <input type="button" class="btn btn-warning" value="Reset" name="reset" id="reset"> </div> </div> </div>
jQuery
<script type="text/javascript"> var tot = 0; var total = 0; function Add() { $("input[name='pos']:checked").each(function() { // Get the value let check = $(this).val(); var price = null; var sugerstatus = $('#Sugerstatus :selected').text(); if (check == "Suger") { price = 12; } else if (check == "Village Fries") { price = 15; } else if (check == "Fries") { price = 35; } else if (check == "Tea") { price = 10; } else if (check == "Coffee") { price = 32; } else if (check == "Apple Juice") { price = 25; } else if (check == "Orange Juice") { price = 45; } var qty = $(this).closest("tr").find('[name="qty"]').val() || 0; tot = qty * price; $("#option").each(function() { if ($(this).val() == 2){ var calamount = ( qty * 140 ); $("#total").val(calamount); } if ($(this).val() == 1) { var calamount = (qty /1000 * 140 ); $("#total").val(calamount); } }); var table1 = "<tr>" + "<td><button type='button' name='record' class='btn btn-warning' onclick='deleterow(this)'>Delete </td>" + "<td>" + check + "</td>" + "<td>" + price + "</td>" + "<td>" + qty + "</td>" + "<td>" + tot + "</td>" + "</tr>"; total += Number(tot); $('#total').val(total); $("#tbl-item tbody").append(table1); }); } function deleterow(e) { total_cost = parseInt($(e).parent().parent().find('td:last').text(),10); total -= total_cost; $('#total').val(total); $(e).parent().parent().remove(); } $('#reset').click(function() { location.reload(); } ); </script>
Here
there GR value 1 KG value 2
$("#option").each(function() { if ($(this).val() == 2){ var calamount = ( qty * 140 ); $("#total").val(calamount); } if ($(this).val() == 1) { var calamount = (qty /1000 * 140 ); $("#total").val(calamount); }
Advertisement
Answer
var tot = 0; var total = 0; function Add() { $("input[name='pos']:checked").each(function() { // Get the value let check = $(this).val(); var price = null; var sugerstatus = $('#Sugerstatus :selected').text(); if (check == "Suger") { price = 12; } else if (check == "Village Fries") { price = 15; } else if (check == "Fries") { price = 35; } else if (check == "Tea") { price = 10; } else if (check == "Coffee") { price = 32; } else if (check == "Apple Juice") { price = 25; } else if (check == "Orange Juice") { price = 45; } var qty = $(this).closest("tr").find('[name="qty"]').val() || 0; tot = qty * price; var sel = $(this).closest("tr").find("select"); if (sel.val() == 2) { var calamount = ( qty * 140); $("#total").val(calamount); console.log("val", sel.val(), calamount); } if (sel.val() == 1) { var calamount = (qty / 1000 * 140); $("#total").val(calamount); console.log("val", sel.val(), calamount); } var table1 = "<tr>" + "<td><button type='button' name='record' class='btn btn-warning' onclick='deleterow(this)'>Delete </td>" + "<td>" + check + "</td>" + "<td>" + price + "</td>" + "<td>" + qty + "</td>" + "<td>" + tot + "</td>" + "</tr>"; total += Number(tot); $('#total').val(total); $("#tbl-item tbody").append(table1); }); } function deleterow(e) { total_cost = parseInt($(e).parent().parent().find('td:last').text(), 10); total -= total_cost; $('#total').val(total); $(e).parent().parent().remove(); } $('#reset').click(function() { location.reload(); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script> <nav class="navbar navbar-dark bg-dark"> <span class="navbar-brand mb-0 h1">Restaurant Coffee Shop Pos</span> </nav> <div class="row"> <div class="col-sm-5"> <div class="container"> <div class="list-group-item list-group-tem-action active">Item</div> <div class="panel-body bg-dark" style="color: white"> <form id="tbl-project"> <div class="panel-body bg-dark" style="color: white"> <table class="table table-bordered" style="color: white"> <tr> <td> <input type="checkbox" name="pos" value="Suger"> <label>Suger</label> </td> <td> <input type="number" name="qty" id="qty" size="10px"> </td> <td> <select class="form-control" id="option" name="option" placeholder="option" required> <option value="">Please Select</option> <option value="1">GR</option> <option value="2">KG</option> </select> </td> </tr> <tr> <td> <input type="checkbox" name="pos" value="Tea"> <label>Tea</label> </td> <td> <input type="number" name="qty" size="10px"> </td> <td> <select class="form-control" id="option" name="option" placeholder="Plan" required> <option value="">Please Select</option> <option value="1">GR</option> <option value="2">KG</option> </select> </td> </tr> <tr> <td> <input type="checkbox" name="pos" value="Flour"> <label> Flour</label> </td> <td> <input type="number" name="qty" size="10px"> </td> <td> <select class="form-control" id="option" name="option" placeholder="option" required> <option value="">Please Select</option> <option value="1">GR</option> <option value="2">KG</option> </select> </td> </tr> <tr> <td> <input type="checkbox" name="pos" value="Rice"> <label> Rice</label> </td> <td> <input type="number" name="qty" size="10px"> </td> <td> <select class="form-control" id="status" name="status" placeholder="Ricestatus" required> <option value="">Please Select</option> <option value="1">GR</option> <option value="2">KG</option> </select> </td> </tr> <tr> <td> <input type="checkbox" name="pos" value="Dhall"> <label> Dhall</label> </td> <td> <input type="number" name="qty" size="10px"> </td> <td> <select class="form-control" id="Dhallstatus" name="status" placeholder="status" required> <option value="">Please Select</option> <option value="1">GR</option> <option value="2">KG</option> </select> </td> </tr> </table> <input type="button" class="btn btn-info" onclick="Add()" value="Ok" name="Ok" id="Ok"> </div> </form> </div> </div> </div> <div class="col-sm-4"> <div class="container"> <div class="list-group-item list-group-tem-action active">AddProducts</div> <table id="tbl-item" class="table table-dark table-bordered" cellspacing="0" width="100%" align="center"> <thead> <tr> <th>Delete</th> <th>Item</th> <th>Price</th> <th>Qty</th> <th>Total</th> </tr> <tbody> </tbody> </table> </div> </div> <div class="col-sm-2"> <div class="list-group-item list-group-item-action active">Bill</div> <div> <label>Total</label> <input type="text" style="color: yellow; background: black; font-size: 30px;" id="total" name="total" placeholder="Total" required> </div> </br> <div> <input type="button" class="btn btn-warning" value="Reset" name="reset" id="reset"> </div> </div> </div>
what i see its an error when you select the right select
for GR or KG:
use $(this).closest("tr").find("select")
instead of $("#option")
, (you have to have uniq id and you have lot of id option
) and no need to use loop function
var sel = $(this).closest("tr").find("select") if (sel.val() == 2) { var calamount = ( qty * 140); $("#total").val(calamount); } if (sel.val() == 1) { var calamount = (qty / 1000 * 140); $("#total").val(calamount); }
i dont figure how you calculate…