Formulario JS que sume Checkbox y Listas

Comercial · #1 (**permalink**) 11/06/2011, 12:09

Hola compañeros,

Estoy tratando de hacer un pequeño formulario con el cual sumar las distintas opciones elegidas pero me encuentro con una duda que no consigo resolver por mi mismo.

Utilizando el buscador del foro encontré este código, actualmente suma automáticamente los checkbox del formulario y los muestra al final.

Por mi parte, he insertado una Lista con otros valores que también me gustaría que fueran sumados cuando el usuario eligiera una de las distintas opciones.

Mi problema es ese, que no consigo entender que código javascript he de añadir para que ahora también sume la opción elegida en el List

Aquí el código de ejemplo que he ido sacando de aquí y de allá.

Código HTML:

<html> 
<head> 
<script type="text/javascript"> 
function Suma(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 =  siniva2;
} 
</script> 
</head> 
<body> 
<table border="1"> 
<tr> 
<td> 
<form name="sumar2" method="POST"> 
<label for="FOR">Pack</label>
<select name="NAME" id="ID">
<option selected>Selecciona un Pack</option>
<option value="10.00">Pack Uno</option>
<option value="20.00">Pack Dos</option>
</select>
<p>Super Pack U <input type="checkbox" value="1.00" id="Prod2" name="Prod2" onClick="Suma(this.checked,this.value)" />1.00 &euro;</p> 
<p>Super Pack D <input type="checkbox" value="2.00" id="Prod3" name="Prod3" onClick="Suma(this.checked,this.value)" />2.00 &euro;</p> 
<p>Super Pack T <input type="checkbox" value="3.00" id="Prod4" name="Prod4" onClick="Suma(this.checked,this.value)" />3.00 &euro;</p> 
<p>Super Pack C <input type="checkbox" value="4.00" id="Prod5" name="Prod5" onClick="Suma(this.checked,this.value)" />4.00 &euro;</p>
<p>Super Pack C <input type="checkbox" value="5.00" id="Prod6" name="Prod6" onClick="Suma(this.checked,this.value)" />5.00 &euro;</p>
<input type="hidden" value="0.00" id="totalsiniva2" name="totalsiniva2" />     
<p><b><font color="#999999">Total </font></b> <input id="pago" type="text" id="total2" name="total2" value="0" disabled /> &euro;</p> 
</form> 
</td> 
</tr> 
</table> 
</body> 
</html>

Gracias!

Naahuel · #2 (**permalink**) 11/06/2011, 12:12

No me queda claro... qué exactamente hay que sumar? Yo veo que funciona bien.

Hay un combo que dice "pack uno y pack dos". ¿A eso te referís? ¿Cómo querés sumar eso?

Naahuel · #3 (**permalink**) 11/06/2011, 12:15

Ah, perdón. Creo haber entendido. Si es como yo pienso, lo que tenés que hacer es al <select> agregarle el siguiente atributo onchange:

Código Javascript:

Ver originalonchange="Suma(true,this.value)"

-edit-

Eso es parte de la solución, porque me di cuenta que si hacés sucesivos cambios en el combo la suma se va acumulando, no modificando.

Comercial · #4 (**permalink**) 11/06/2011, 12:46

Gracias Naahuel, es exactamente lo que me faltaba para que funcione como deseo.

Comercial · #5 (**permalink**) 11/06/2011, 13:06

Hola otra vez Naahuel,

Ahora tengo otro problemilla, si marco / desmarco los checkbox la cantidad se suma o se resta correctamente, al elegir una opción de la lista también lo suma pero si la cambio por otra la vuelve a sumar sobre la anterior, en ningún caso resta.

Cómo podría evitar que si me muevo varias veces por la lista no haga solo suma sino actualice el valor según lo elegido.

Muchas gracias otra vez.

Naahuel · #6 (**permalink**) 11/06/2011, 14:03

Cita:

Iniciado por Comercial

Hola otra vez Naahuel,

Ahora tengo otro problemilla, si marco / desmarco los checkbox la cantidad se suma o se resta correctamente, al elegir una opción de la lista también lo suma pero si la cambio por otra la vuelve a sumar sobre la anterior, en ningún caso resta.

Cómo podría evitar que si me muevo varias veces por la lista no haga solo suma sino actualice el valor según lo elegido.

Muchas gracias otra vez.

Eso es lo que te había dicho en el mensaje anterior (en el edit).

Podés hacer otra funcion para el select, almacenando los valores anteriores en una variable auxiliar. Algo así:

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <script type="text/javascript">
    function Suma(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 =  siniva2;
    } 
    //almaceno el valor original en una variable para saber qué tenía antes.
    var valor_viejo = 0;
    function SumaSelect(valor){
        siniva2 = (parseFloat(document.sumar2.totalsiniva2.value) + parseFloat(valor) - valor_viejo).toFixed(2); 
        document.sumar2.totalsiniva2.value = siniva2; 
        document.sumar2.total2.value =  siniva2;
        valor_viejo = valor;
    }   
    </script>
  </head>
  <body>
    <table border="1">
      <tr>
        <td>
          <form name="sumar2" method="post" id="sumar2">
            <label for="FOR">Pack</label> <select name="NAME" id="ID" onchange="SumaSelect(this.value)">
              <option selected="selected" value="0">
                Selecciona un Pack
              </option>
              <option value="10.00">
                Pack Uno
              </option>
              <option value="20.00">
                Pack Dos
              </option>
            </select>
            <p>
              Super Pack U <input type="checkbox" value="1.00" id="Prod2" name="Prod2" onclick="Suma(this.checked,this.value)">1.00 ¬
            </p>
            <p>
              Super Pack D <input type="checkbox" value="2.00" id="Prod3" name="Prod3" onclick="Suma(this.checked,this.value)">2.00 ¬
            </p>
            <p>
              Super Pack T <input type="checkbox" value="3.00" id="Prod4" name="Prod4" onclick="Suma(this.checked,this.value)">3.00 ¬
            </p>
            <p>
              Super Pack C <input type="checkbox" value="4.00" id="Prod5" name="Prod5" onclick="Suma(this.checked,this.value)">4.00 ¬
            </p>
            <p>
              Super Pack C <input type="checkbox" value="5.00" id="Prod6" name="Prod6" onclick="Suma(this.checked,this.value)">5.00 ¬
            </p><input type="hidden" value="0.00" id="totalsiniva2" name="totalsiniva2">
            <p>
              <b><font color="#999999">Total</font></b> <input type="text" id="total2" name="total2" value="0" disabled> ¬
            </p>
          </form>
        </td>
      </tr>
    </table>
  </body>
</html>

Comercial · #7 (**permalink**) 12/06/2011, 15:44

Hola Naahuel,

Muchas gracias por todo, con tu ayuda he logrado hacer lo que necesitaba pero ahora me encuentro con un problemita.

He añadito un botón RESET al formulario pero si marco los checkbox y reseteo, al volver a hacer click en un checkbox pues aun tiene guardado el valor anterior y lo suma con lo nuevo que he marcado.

¿Cómo podría hacer para que al hacer click en reset pues elimine toda la información del formulario?.

El código es el mismo que publicaste por último y he añadido el boton de borrar

Código HTML:

<button role="button" type="reset" onclick="document.signupForm.reset()"><span class="ui-button-text">BORRAR</span></button>