Multiplicación de Inputs con resultado automático

Question

Tengo el siguiente código

function multi(){
  var total = 0;

  $(".monto").each(function(){
   if (isNaN(parseFloat($(this).val()))) {
    total += 0;
   } else {
     total += parseFloat($(this).val());
   }
 });

 document.getElementById('Costo').innerHTML = total;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<tr>
 <td>
    <label>
      <input type="text" name="Precio" id="Precio" value="" class="monto" onkeyup="multi();">
    </label>
  </td>
 <td>
    <label>
      <input type="text" name="Cantidad" id="Cantidad" class="monto" onkeyup="multi();">
    </label>
  </td>
  <td>
    <label id="Costo">
      <input type="text" name="Costo" disabled>
    </label>
  </td>
</tr>

El script lo que hace es que los inputs con las clase monto los suma y los arroja como resultado en el input de id = Gasto pero este código lo desarrolle no hace poco para una suma en otro proyecto, ahora lo estoy reutilizando para que me pueda hacer un multiplicación. La vdd soy nuevo en esto de ajax y lo poco de que investigue fue lo que logre en este pequeño script.

En si mi pregunta es ¿Que debo mover o poner en el código para que en vez que me sume me multiplique?

Les agradeceria la ayuda :)

Ya lo he cambiado de esa manera pero, no me arroja el resultado en ves de eso me pone el 0 — Santiago Huh, Jan 21 '18 at 23:14
Si eso vi, me ayudo @Dev. Joel, pero igual gracias por la observacion. — Santiago Huh, Jan 21 '18 at 23:48

score 4 · Accepted Answer · answered Jan 21 '18 at 23:38

4

En teoría cambiando el + por el * debería funcionar pero la variable total la inicializa en cero lo cuál al multiplicar por 0 siempre será 0 el resultado. Debería tener una validación adicional como por ejemplo una bandera para saber si se modifico el valor así retornar 0 por defecto.

function multi(){
    var total = 1;
    var change= false; //
    $(".monto").each(function(){
        if (!isNaN(parseFloat($(this).val()))) {
            change= true;
            total *= parseFloat($(this).val());
        }
    });
    // Si se modifico el valor , retornamos la multiplicación
    // caso contrario 0
    total = (change)? total:0;
    document.getElementById('Costo').innerHTML = total;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
    <td>
    <label>
      <input type="text" name="Precio" id="Precio" value="" class="monto" onkeyup="multi();">
    </label>
  </td>
    <td>
    <label>
      <input type="text" name="Cantidad" id="Cantidad" class="monto" onkeyup="multi();">
    </label>
  </td>
  <td>
    <label id="Costo">
      <input type="text" name="Costo" disabled>
    </label>
  </td>
</tr>

answered Jan 21 '18 at 23:38

Dev. Joel

23,229
3
25
44

Excelente gracias, ya quedo :) – Santiago Huh Jan 21 '18 at 23:46
Excelenete amigo si me funciono, gracias, nada una cosilla más como le hago para que cuando en la casilla que me da el Gasto (osea total) al detectar que no hay cantidades en los inputs lo deje en cero, porque en si en el proyecto donde lo estoy implementado, el input de precio se llena solo ya que traigo valores de una base de datos y pues cantidad se pone manualmente. Perdon la molestia – Santiago Huh Jan 21 '18 at 23:58
1

@SantiagoHuh añada el atributo `value="0"` al campo gato o total, para que inicialice en `0` el valor cuando no haya valores en los `inputs.` – Dev. Joel Jan 22 '18 at 00:03
Ok gracias de igual manera, si quieres formulo otra pregunta ? – Santiago Huh Jan 22 '18 at 00:05
1

@SantiagoHuh con mi comentario de añadir el value a 0 , no soluciona esa pregunta ? yo creo que sí, a menos que no le haya entendido del todo. Si con eso no soluciono puede formular un nueva pregunta. Saludos – Dev. Joel Jan 22 '18 at 00:07
Ok la formulare y por aqui mismo te enviare el link de la pregunta gracias :) – Santiago Huh Jan 22 '18 at 00:10

Multiplicación de Inputs con resultado automático

1 Answers1