jQuery – Sumar valores de inputs con la misma clase

Veamos un ejemplo de cómo sumar econ jQuery valores de inputs en un formulario que tienen la misma clase asignada.

Es un ejemplo muy sencillo y que se utiliza de una manera poco elegante para agrupar elementos de un formualrio o web, para poder operar con ellos. Como cada elemento tiene una Id diferente, podemos asignarles una clase que no aplicará ningún estilo al objeto, pero que nos permitirá diferenciarlo con jQuery.

Formulario con inputs con la misma clase

<for action="envio.php" method="post">
  <label for="lunes">Lunes</label>
  <br /><input type="text" name="lunes" id="lunes" class="recaudado" />

  <label for="martes">Martes</label>
  <br /><input type="text" name="martes" id="martes" class="recaudado" />

  <label for="miercoles">Miércoles</label>
  <br /><input type="text" name="miercoles" id="miercoles" class="recaudado" />

  <label for="jueves">Jueves</label>
  <br /><input type="text" name="jueves" id="jueves" class="recaudado" />

  <label for="viernes"></label>
  <br /><input type="text" name="viernes" id="viernes" class="recaudado" />

  <input type="submit" value="Enviar" />
</form>

Como podéis ver, cada input tiene su Name y si Id, pero todos comparten la clase RECAUDADO. Aprovecharemos que asignamos esta clase a todos los campos para trabajar con él.

El código jQuery que suma los elementos

var suma = 0;
$('.recaudado').each(function(){
       suma += parseFloat($(this).val());
});

Si os fijais, recorremos todos los elementos a los que se les ha asignado la clase recaudado, en nuestro caso todos los inputs del formualrio. De cada uno de ellos, cogemos su valor, lo convertimos a Float y lo sumamos a la variable suma que almacena la suma del total.

Este código por si sólo, no hace nada. Vosotros tenéis que utilizarlo haciendo que al clicar sobre el botón se ejecute, o que lo haga si se quiere enviar el formulario… Sólo es una muestra para que veáis el proceso de coger el valor de los inputs, o dicho de otra manera: cómo agrupar elementos asignándoles una clase para trabajar luego con ellos desde jQuery.

Espero que os haya sido de utilidad el ejemplo de cómo sumar econ jQuery valores de inputs en un formulario que tienen la misma clase asignada.