formulario suma en tiempo real

Citar

Escrito el 13 Oct 2010 02:10 pm

alguien sabe o tiene un ejemplo de como se hace una suma en tiempo real de un formulario

Por os_the_neo

21 de clabLevel

Envíale un mensaje privado Email

Citar

Escrito el 14 Oct 2010 06:28 pm

Hola

Se puede hacer de varias maneras, depende del tipo de campo que estés usando. Supongamos que son textfields.

Código Javascript :

<html>
<head>
<script type="text/javascript">
function sumar(c){
var subtotal = 0;
campo = c.form;
  if(!/^\d*$/.test(c.value)) return;

      for (var i = 0; i < campo.length-1; i++) {
          if (!/^\d+$/.test(campo[i].value)) continue;
              subtotal += parseInt(campo[i].value);
      }
document.getElementById('res').value = subtotal;
}
</script>

</head>
<body>
<form name="a" action="" method="post">
1:<input type="text" name="sum[]" value="0" onkeyup="sumar(this);" /><br />
2:<input type="text" name="sum[]" value="0" onkeyup="sumar(this);" /><br />
3:<input type="text" name="sum[]" value="0" onkeyup="sumar(this);" /><br />
4:<input type="text" name="sum[]" value="0" onkeyup="sumar(this);" /><br />
5:<input type="text" name="sum[]" value="0" onkeyup="sumar(this);" /><br />
6:<input type="text" name="sum[]" value="0" onkeyup="sumar(this);" /><br />
Resultado:<input type="text" id="res" value="0" />
</form>
</body>
</html>

Si son checkbox o radios

Código Javascript :

<html>
<head>
</head>
<body>
<script type="text/javascript">
function Suma1(isChecked, valor){
    if (isChecked) {
        siniva1 = (parseFloat(document.sumar1.totalsiniva1.value) + parseFloat(valor)).toFixed(2);
    } else {
        siniva1 = (parseFloat(document.sumar1.totalsiniva1.value) - parseFloat(valor)).toFixed(2);
    }
document.sumar1.totalsiniva1.value = siniva1;
document.sumar1.total1.value = (parseFloat(document.sumar1.totalactual.value) + parseFloat(siniva1 * 1.16)).toFixed(2);
}



function Suma2(isChecked, valor){
    if (isChecked) {
        siniva2 = (parseFloat(document.sumar2.totalsiniva2.value) + parseFloat(valor)).toFixed(2);
    } else {
        siniva2 = (parseFloat(document.sumar2.totalsiniva2.value) - parseFloat(valor)).toFixed(2);
    }
document.sumar2.totalsiniva2.value = siniva2;
document.sumar2.total2.value =  parseFloat(siniva2 * 1.16).toFixed(2);
}

 </script>
<body>
<table border="1">
<tr>
<td>
<form name="sumar1" method="POST">
<p><b><font color="#999999">Importe Actual con IVA 16%</font></b> <input type="text" value="200.00" id="totalactual" name="totalactual" disabled /> &euro;</p>
<p>Televisi&oacute;n LG <input type="checkbox" value="2000.00" id="Prod1" name="Prod1" onClick="Suma1(this.checked,this.value)" />2000,00 &euro;</p>
<p>Televisi&oacute;n Sony <input type="checkbox" value="1505.99" id="Prod2" name="Prod2" onClick="Suma1(this.checked,this.value)" />1505,99 &euro;</p>
<p>Televisi&oacute;n Panasonic <input type="checkbox" value="1151.99" id="Prod3" name="Prod3" onClick="Suma1(this.checked,this.value)" />1151,99 &euro;</p> 
<input type="hidden" value="0.00" id="totalsiniva1" name="totalsiniva1" />   
<p><b><font color="#999999">Importe Total con IVA 16%</font></b> <input id="pago" class="resultado" type="text" id="total1" name="total1" value="200" disabled /> &euro;</p>
</form>
</td>
</tr>
</table>

<br /><br />

<table border="1">
<tr>
<td>
<form name="sumar2" method="POST">
<p>Consola X-Box <input type="checkbox" value="199.99" id="Prod4" name="Prod4" onClick="Suma2(this.checked,this.value)" />199,99 &euro;</p>
<p>Consola PlayStation <input type="checkbox" value="176.50" id="Prod5" name="Prod5" onClick="Suma2(this.checked,this.value)" />176,50 &euro;</p>
<p>Consola Wii <input type="checkbox" value="195.99" id="Prod6" name="Prod6" onClick="Suma2(this.checked,this.value)" />195,99 &euro;</p>
<input type="hidden" value="0.00" id="totalsiniva2" name="totalsiniva2" />    
<p><b><font color="#999999">Importe Total con IVA 16%</font></b> <input id="pago" class="resultado" type="text" id="total2" name="total2" value="0" disabled /> &euro;</p>
</form>
</td>
</tr>
</table>
</body>
</html>

Suerte

Por CLAnonimo

Claber

600 de clabLevel

5 tutoriales
1 articulo

Envíale un mensaje privado Web

Este es un usuario anónimo genérico para las cuentas borradas o perdidas.

@cristalab

Citar

Escrito el 04 Feb 2014 09:11 pm

Hola amigo, estoy siguiendo un poco el código que compartiste y me pare muy bueno, solo tengo una pregunta espero me puedas ayudar, cambie un poco el código y puse radio button, cunado selecciono uno u otro me aumenta el valor en la suma, lo que quiero es que no aumente el valor de esos radios buttom si pertenecen al mismo nombre:

<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Sexo:</legend>
<input type="radio" name="sexo" id="radio_1" value="0.1" onClick="Suma2(this.checked,this.value)" />
<label for="radio_1">Femenino</label>
<input type="radio" name="sexo" id="radio_2" value="0.2" onClick="Suma2(this.checked,this.value)" />
<label for="radio_2">Masculino</label>
</fieldset>

Espero me puedas echar una mano, saludos.

Por alfre04

4 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 15 Feb 2016 06:42 pm

Me sirve mucho este código, muchas gracias, estoy utilizando el de RADIO, ya solo una pregunta, como mando ese resultado por email, please

Por raulgiovan

0 de clabLevel

Envíale un mensaje privado

formulario suma en tiempo real

Escribe una respuesta rapida