Sumar con jQuery

Hace unos días atrás me tope con un inconveniente de sumar campos dentro de un formulario html, para tal acción tenia 2 opciones; hacer la suma en lado del servidor lo cual me llevaría a crear otro código javascript para que sume cuando el cliente cambiara la cantidad en unos de los campos; y como el objetivo de la programación orientada a objetos es reducir el código a lo mas mínimo posible; busque un poco en la documentación de jQuery para ver si podiamos hacer algo para solucionar el problema y si pudimos con unas cuantas lineas de codigo, el cual les mostramos a continuación:

Como primer paso descargaremos la última version de jQuery en http://jquery.com/ luego de descargar la librería que nos servirá en los ejemplos de este post, procederemos a programar la función de sumar, y hacer la referencia entre las etiquetas de head del html

Código del formulario

<form>
	<table align="center">
		<tr>
			<td><label>Campo 1:</label></td>
			<td><input type="Text" id="campo1" size="6" value="" maxlength="6"  class="post" /></td>
		</tr>
		<tr>
			<td><label>Campo 2:</label></td>
			<td><input type="Text" id="campo2" size="6" value="" maxlength="6" class="post" /></td>
		</tr>
		<tr>
			<td><label>Campo 3:</label></td>
			<td><input type="Text" id="campo3" size="6" value="" maxlength="6" class="post" /></td>
		</tr>
		<tr>
			<td><label>Total:</label></td>
			<td><input type="Text" id="total" size="6" value="" maxlength="6" /></td>
		</tr>
	</table>
	<div>
		<button >Guardar</button>
	</div>
</form>

Después pasamos a crear la función con jquery.

$(document).ready(function() {
    var re;
    var valor = 0
    $('form').find('.post').each(function(){
        re = $(this).val();
        valor += parseFloat(re)
    });
    $('#Total').val(valor.toFixed(2));
});

Explicación:

las variables re y valor son variables para tratar la información que se extrae con jquery.

El método find:  esta función hace posible buscar en el formulario las etiquetas que contienen la clase post.

El método each: recorre el elemento para extraer los valores.

El método val: recupera el valor del campo.

Utilizamos parseFloat de javascript para convertir el valor extraido a flotante, luego que termina la rutina la función lo agregamos al campo total, para evitar el exceso de decimales después del punto decimal, utilizamos el método toFixed para redondear el valor a 2 decimales.

Con la función creada anteriormente nos sumara los valores que se encuentren en el formulario al momento de cargar el mismo.

Con estas lineas nos ahorramos de cear muchas lineas de código, y evitamos relizar la suma desde una consulta sql o al lado del servidor.

About these ads

5 Respuestas a “Sumar con jQuery

  1. Hey brother muchas gracias, no sabia como sumar unas variables, ya estaba cansado… lo que hacia era que me las juntaba, osea que si el valor1 era 100 y el dos era 200 el resultado final era 100200…. pero con ese parseFloat me sirvio mucho….

    Gracias

  2. Que tal saludos, solo una observación amigo, si ocupas jQuery, no deverias de poner (document.getElementById(‘total’).value = valor.toFixed(2);
    ) si no (“ $(#total).val(valor.toFixed(2))” ) chécalo va, gracias por tu aporte.

  3. Gracias este codigo es sencilla facil de entender y bien explicado. Saludos. David Rafael Blanco Leon. Caracas Venezuela.

  4. Primero que nada saludo a cada uno de ustedes, mi problema es el siguiente, motivo por el cual les pido ayuda. Lo presentaré textualmente: (php)
    Tengo una variable que se llama $cantidad_p …
    “.number_format($row[cantidad_p],0,”,”,”.”).”
    si suma todas las celdas me arroja la sumatoria total.
    $sumcantidad_p=$sumcantidad_p+$row[cantidad_p];
    y lo muestro al final de la tabla.
    “.number_format($row[cantidad_p],0,”,”,”.”).”
    Estoy trabajando con un ejemplo que encontre en la siguiente dirección:
    http://mottie.github.io/tablesorter/docs/example-widget-bootstrap-theme.html
    Este ejemplo es de propiedad tablesorter.
    Efecivamente me muestra la sumatoria total de un total de 100 registros, pero cuando bajo el listado a 10 registros la tabla sigue mostrando el valor total y no de acuerdo a la cantidad de registros que deseo mostrar. ¿¿ Se entiende ??, no soy programador. ojala me puedan ayudar.

    saludos desde temuco, chile

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s