Home / Questions / 348081
Accepted
Claudio
Asked: 2020-04-22 10:15:01 +0800 CST 2020-04-22 10:15:01 +0800 CST

Why don't you add the decimals in the calculation?

  • 772

I'm having a problem calculating the total. In the calculation you are not adding the decimals. For example, if a product is worth $150.24, by choosing "2" as the quantity, the calculation would be:
150.24 * 2 = 300.48. However as a result it shows 300.00.

Image (the results in red are the ones that should be given in the calculation):

enter image description here

here the table

<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 is the function that displays the result in the Total column

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

        finalPrice();
    }

Here is the function that shows the result in Final Price

  function finalPrice() {

        var sum = 0;

        $(".total").each(function () {
            sum += +parseFloat($(this).val());
        });

        $("#finalPrice").val(sum.toFixed(2));//revisar no suma los decimales
    }

javascript

2 Answers

  1. Best Answer

    It is necessary to replace the decimal separator with a point to operate, and replace it with a comma once the result is obtained to display it. It can be done in javascript function with replace.

    The same process would be followed to calculate the total.

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

        $("#total-" + idRow).val(resultformat);

    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-striped table-primary table-bordered" id="tableComprar">
	<thead>
        <tr>
            <th class="text-center">P/unidad</th>
            <th class="text-center">Cantidad</th>
            <th class="text-center">Total</th>
        </tr>                
	</thead>
        <tbody>           
           <tr>
            <td class="text-center"><input type="text" class="price" id="price-1" value="80,13" disabled /></td>
            <td class="text-center"><input type="number" onchange="Total(1);" class="input-number" id="input-number-1" value="0" min="1" max="20" placeholder="1" /></td>
            <td class="text-center"><input type="text" class="total" id="total-1" disabled /></td>
        </tr> 
        <tbody>           
           <tr>
            <td class="text-center"><input type="text" class="price" id="price-2" value="10,2" disabled /></td>
             <td class="text-center"><input type="number" onchange="Total(2);" class="input-number" id="input-number-2" value="0" min="1" max="20" placeholder="1" /></td>
            <td class="text-center"><input type="text" class="total" id="total-2" disabled /></td>
        </tr> 
        </tbody>
</table>

    • 1

  2. SOLVED! Here I leave the 2 functions where I replace the comma with the point.

    function Total(idRow) {
      
        var getprice = $("#price-" + idRow).val();
        //si es num decimal, reemplazo la coma ","por el punto "." para poder hacer el calculo 
        var price = parseFloat(getprice.replace(/,/g, "."));
        var quantity = $("#input-number-" + idRow).val();
        var result = parseFloat(price * quantity).toFixed(2);//.toFixed(2) muestar solo 2 decimales
        //para mostrar el resultado con coma "," en el input, reemplazo el punto por la coma
        var resultformat = result.replace(".", ",");

        $("#total-" + idRow).val(resultformat);

        finalPrice();
 }
 
 function finalPrice() {

        var sum = 0;
                          
        $(".total").each(function () {
            var num = $(this).val();
            //reemplazo la coma ","por el punto "." para poder hacer el calculo           
            var price = parseFloat(num.replace(/,/g, "."));
            sum += price;
        });
              
        $("#finalPrice").val(sum.toFixed(2));        
    }

    • 0