5

Tengo un formulario con 3 input donde se colocan algunas cantidades enteras o decimales.

Lo que quiero es que al ir colocando cantidades en cada input se vaya sumando con el otro sin necesidad de dar clic en un botón de calcular, sino que se muestre el resultado en otro input o en un label.

1
  • 5
    Coloca el código que has usado, para poder ayudarte y ver donde te falla Commented el 11 ago. 2016 a las 16:59

3 respuestas 3

13

Consiste en sumar automáticamente el valor escrito en una serie de inputs identificados con la clase monto.

Cada vez que presionas una tecla dentro del input se genera el evento onkeyup, el cual llama a una función denominada suma.

La función suma obtiene todos los elementos con la clase monto en forma de arreglo; este arreglo se recorre mediante un each para acceder al atributo value de cada input y si el contenido del value tiene un número válido, entonces se añade su valor al contador total, si el contenido del value no es válido, entonces se añade un cero al contador total.

Al finalizar el recorrido, el valor del contador se muestra en el elemento identificado con el id spTotal.

function sumar() {

  var total = 0;

  $(".monto").each(function() {

    if (isNaN(parseFloat($(this).val()))) {

      total += 0;

    } else {

      total += parseFloat($(this).val());

    }

  });

  //alert(total);
  document.getElementById('spTotal').innerHTML = total;

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<span>Valor #1</span>
<input type="text" id="txt_campo_1" class="monto" onkeyup="sumar();" />
<br/>

<span>Valor #2</span>
<input type="text" id="txt_campo_2" class="monto" onkeyup="sumar();" />
<br/>

<span>Valor #3</span>
<input type="text" id="txt_campo_3" class="monto" onkeyup="sumar();" />
<br/>

<span>El resultado es: </span> <span id="spTotal"></span>

3
  • 2
    Para complementar la solución podrías poner algún texto explicativo de lo que hace
    – Codelaby
    Commented el 15 mar. 2017 a las 15:42
  • 1
    Hola, pues, basicamente este codigo da solucion a la inquietud del amigo, consiste en sumar automaticamente el valor escrito en una serie de inputs identificados con la clase monto. Commented el 16 mar. 2017 a las 17:57
  • 1
    Pipe puedes editar la solución y ponerlo a la cabecera
    – Codelaby
    Commented el 16 mar. 2017 a las 18:25
12

Usa el siguiente código:

/* Sumar dos números. */
function sumar (valor) {
    var total = 0;	
    valor = parseInt(valor); // Convertir el valor a un entero (número).
	
    total = document.getElementById('spTotal').innerHTML;
	
    // Aquí valido si hay un valor previo, si no hay datos, le pongo un cero "0".
    total = (total == null || total == undefined || total == "") ? 0 : total;
	
    /* Esta es la suma. */
    total = (parseInt(total) + parseInt(valor));
	
    // Colocar el resultado de la suma en el control "span".
    document.getElementById('spTotal').innerHTML = total;
}
<span>Valor #1</span>
<input type="text" id="txt_campo_1" onchange="sumar(this.value);" />
<br/ >
<span>Valor #2</span>
<input type="text" id="txt_campo_2" onchange="sumar(this.value);" />
<br/ >
<span>Valor #3</span>
<input type="text" id="txt_campo_3" onchange="sumar(this.value);" />
<br/ >
<span>El resultado es: </span> <span id="spTotal"></span>

8
  • 1
    Muchas Gracias Funciona Perfecto Mil Gracias
    – Fernando
    Commented el 11 ago. 2016 a las 18:06
  • 2
    Con todo gusto, @Fernando y bienvenido a Stack Overflow en Español. Para futuras preguntas que tengas, te recomiendo leer esta guía acerca de cómo preguntar, para así obtener reputación y añadir valor a nuestro sitio. Commented el 11 ago. 2016 a las 19:15
  • Como se realiza para poder pasar el valor del span a php para poder insertarlo en la base de datos ?
    – Fernando
    Commented el 12 ago. 2016 a las 17:15
  • 1
    Ya encontré como realizarlo Gracias
    – Fernando
    Commented el 12 ago. 2016 a las 17:52
  • 2
    Una alternativa, para que vaya sumando mientras se tipea, es utilizar el evento oninput (en vez de onchange)
    – Mariano
    Commented el 16 mar. 2017 a las 19:00
1

Suma automáticamente todos los valores de los inputs con la clase monto cada vez que alguno es modificado:

function sumar()
{
  const $total = document.getElementById('total');
  let subtotal = 0;
  [ ...document.getElementsByClassName( "monto" ) ].forEach( function ( element ) {
    if(element.value !== '') {
      subtotal += parseFloat(element.value);
    }
  });
  $total.value = subtotal;
}
<span>Valor #1</span>
<input type="number" id="txt_campo_1" class="monto" onchange="sumar();" />
<br/>

<span>Valor #2</span>
<input type="number" id="txt_campo_2" class="monto" onchange="sumar();" />
<br/>

<span>Valor #3</span>
<input type="number" id="txt_campo_3" class="monto" onchange="sumar();" />

<hr>
<span>TOTAL </span>
<input type="number" id="total" value="0" readonly/>

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