2

Estoy teniendo un problema para calcular el total. En el calculo no esta sumando los decimales. Por ejemplo si un producto vale $150,24, al elegir "2" como cantidad, el calculo sería:
150,24 * 2 = 300,48. Sin embargo como resultado muestra 300.00.

Imagen (los resultados en rojo son los que deberían dar en el cálculo):

introducir la descripción de la imagen aquí

Aca la tabla

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

Aca la función que muestra el resultado en la columna Total

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

Aca la función que muestra el resultado en Precio final

  function finalPrice() {

        var sum = 0;

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

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

2
  • 1
    Has revisado si los valores en cada variable corresponden a lo que introdujiste?
    – Alfabravo
    el 21 abr. 2020 a las 18:19
  • 2
    Los decimales del precio están separados por coma. Cambia la coma por punto y listo!
    – Triby
    el 21 abr. 2020 a las 18:22

2 respuestas 2

1

Es necesario reemplazar la el separador de decimales por un punto para operar, y volver a reemplazarlo por coma una vez obtenido el resultado para mostralo. Se puede hacer en la función de javascript con replace.

El mismo proceso se seguiría para calcular el 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
  • gracias @Carmen! excelente tu aporte!
    – Claudio
    el 21 abr. 2020 a las 19:14
0

SOLUCIONADO!, aca dejo las 2 funciones donde reemplazo la coma por el punto.

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

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.