Couldn't calculate drop down list select value using jquery - php

Question

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);
}

Answer 1

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...