Home / Questions / 347723
Accepted
Claudio
Asked: 2020-04-21 09:34:46 +0800 CST 2020-04-21 09:34:46 +0800 CST

Problem calculating the price of a product with input type="number"

  • 772

I have a pivot table, for each row that is generated a <input type="number" onclick="Total();" class="input-number"/>. What I am trying to do is that when the user increases or decreases the quantity from the input numberchosen row, the price of the "Total" column changes. The problem I have is that when I click on input numberany row, the result is "NaN" in all the Total columns.

Here the image:

enter image description here

Here the pivot table and jquery

<script type="text/javascript">

        function Total() {

            var price = $('.price').val();
            var quantity = $('.input-number').val();
            var result = price * quantity;
            
            $('.total').val(result);
                       
        }

    </script>
<table class="table table-striped table-primary table-bordered" id="tableComprar">

                    <thead>
                        <tr>
                            <th class="text-center">Imagen</th>
                            <th class="text-center">Nombre</th>
                            <th class="text-center">P/unidad</th>
                            <th class="text-center">Cantidad</th>
                            <th class="text-center">Total</th>
                        </tr>
                    </thead>
                    <tbody>
                        
                        @foreach (Libro item in Model)
                        {
                            <tr>
                                <th class="text-center"><img src="/@item.UrlImagen.Replace("\\", "/")" width="80" height="100" /></th>
                                <th class="text-center">@item.Nombre</th>
                                <th class="text-center"><input type="text" class="price" value="@item.Precio" disabled /></th>
                                <th class="text-center">                   
                                    <input type="number" onchange="Total(this);" class="input-number" value="" min="1" max="@item.Cantidad" placeholder="1"/>
                                </th>
                                <th class="text-center"><input type="text" class="total" value="@item.Precio" disabled /></th>                        
                            </tr>
                        }

                    </tbody>

                </table>

javascript

3 Answers

  1. Look at this code I did it with a simple function:

     <table>

 <tr>
   <th class="text-center"><img src="" width="80" height="100" /></th>
   <th class="text-center">Nombre</th>
   <th class="text-center"><input type="text" class="price" id="price1" value="10" disabled /></th>
   <th class="text-center">
     <input type="number" onclick="Total(1);" id="cant1" class="input-number" value="1" min="1" max="10" />
   </th>
   <th class="text-center"><input type="text" class="total" value="" id="tot1" disabled /></th>
 </tr>
  <tr>
   <th class="text-center"><img src="" width="80" height="100" /></th>
   <th class="text-center">Nombre 2</th>
   <th class="text-center"><input type="text" class="price" id="price2" value="10" disabled /></th>
   <th class="text-center">
     <input type="number" onclick="Total(2);" id="cant2" class="input-number" value="1" min="1" max="10" />
   </th>
   <th class="text-center"><input type="text" class="total" value="" id="tot2" disabled /></th>
 </tr>
</table>


        function Total(id){
          $("#tot"+id).val($("#cant"+id).val()*$("#price"+id).val());
    }

    What happens is that you are taking all the inputs with class "price", by doing this you get an array, and multiply it with another array of "quantities", so you could generate an id for each input.

    • 1

  2. As I told you, I linked the onChange event to input-number, because when making changes to the quantity, they were not reflected in the total.

    $(document).ready(() => {
  let unit = $('#price').val()
  let quantity = $('#quantity').val()
  let total = calculate(unit, quantity)
  $('#total').val(total)
  
  $('#quantity').on('change', () => {
    unit = $('#price').val()
    quantity = $('#quantity').val()
    total = calculate(unit, quantity)
    $('#total').val(total)  
  })
  
  function calculate(price, quantity) {
    return price * quantity
  }
})
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table table-striped table-primary table-bordered table-responsive">
  <thead>
    <tr>
      <th class="text-center">Imagen</th>
      <th class="text-center">Nombre</th>
      <th class="text-center">P/unidad</th>
      <th class="text-center">Cantidad</th>
      <th class="text-center">Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th class="text-center"><img src="/@item.UrlImagen.Replace("\\", "/")" width="80" height="100" /></th>
      <th class="text-center">@item.Nombre</th>
      <th class="text-center"><input type="text" class="price" id="price" value="22" disabled /></th>
      <th class="text-center">                   
        <input type="number" id="quantity" class="input-number" value="13" min="1" max="@item.Cantidad" placeholder="1"/>
      </th>
      <th class="text-center"><input type="text" id="total" class="total" disabled /></th>                        
    </tr>
  </tbody>
</table>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>

    You must include one idin each inputso that you can calculate by row; if you do it by classes - as it is currently -, changing a value in the input-number will update all the totals in the table. You can concatenate a generic name plus the index of the element inside your forto fix this ;)

    Let us know how it goes =)

    • 1
  3. Best Answer

    Thanks colleagues for your contribution!, Following your ideas I solved it this way:

    1) Create a counter variable "idRow" that serves as the id for each row. inputassign an id to each one concatenated with the idRow (achieving a different id for each input).

    2) Also, in the total() function, change to the onchange() event and pass the idRow as a parameter.

    Sample of how the inputs were: 

    <input type="text" class="price" id="price-@idRow" value="@item.Precio" disabled />
                  
<input type="number" onchange="Total(@idRow);" class="input-number" id="input-number-@idRow" value="1" min="1" max="@item.Cantidad" placeholder="1"/>

<input type="text" class="total" id="total-@idRow" value="@item.Precio" disabled />

    Here I pass the html code:

    @{
    Layout = "~/Views/Shared/_UsserLayout.cshtml";   
    int idRow = 0;
}

<table class="table table-striped table-primary table-bordered" id="tableComprar">

                    <thead>
                        <tr>
                            <th class="text-center">Imagen</th>
                            <th class="text-center">Nombre</th>
                            <th class="text-center">P/unidad</th>
                            <th class="text-center">Cantidad</th>
                            <th class="text-center">Total</th>
                        </tr>
                    </thead>
                    <tbody>

                        @foreach (Libro item in Model)
                        {

                            idRow++;
                            <tr>
                                <th class="text-center"><img src="/@item.UrlImagen.Replace("\\", "/")" width="80" height="100" /></th>
                                <th class="text-center">@item.Nombre</th>
                                <th class="text-center"><input type="text" class="price" id="price-@idRow" value="@item.Precio" disabled /></th>
                                <th class="text-center">                   
                                    <input type="number" onchange="Total(@idRow);" class="input-number" id="input-number-@idRow" value="1" min="1" max="@item.Cantidad" placeholder="1"/>
                                </th>
                                <th class="text-center"><input type="text" class="total" id="total-@idRow" value="@item.Precio" disabled /></th>                        
                            </tr>
                        }

                    </tbody>

                </table>

    here jquery

    function Total(idRow) {
        //Hay precios que son float en la bd, para que no de errores siempre convierto a float
         
        var price = parseFloat($("#price-" + idRow).val());
        var quantity = $("#input-number-" + idRow).val();
        var result = parseFloat(price * quantity);

        $("#total-" + idRow).val(result.toFixed(2));//.toFixed(2) muestre 2 decimales despues de la coma
        
    }

    • 0