Skip to content
Advertisement

Couldn’t calculate drop down list select value using jquery

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…

User contributions licensed under: CC BY-SA
8 People found this is helpful
Advertisement