Ayuda con formulario en Javascript

aguilab · #1 (**permalink**) 25/08/2008, 03:08

Hola a todos.

Estoy haciendo una web para un centro excursionista para niños sin ánimo de lucro, y quiero hacer un formulario en el que los padres puedan calcular marcando botones tipo radio las opciones de las excursiones. El problema es que no tengo mucha idea (casi nada) de javascript de modo que necesito vuestra ayuda.

Para que sirva de ejemplo.

Aparece una excursión y tienes el apartado Alojamiento que a su vez tiene las opciones:

Sólo dormir.

Media pensión.

Pensión completa.

Los valores de esos botones son por ejemplo 10, 15 y 20. (Por supuesto no se ven.)

Luego hay otro apartado Trasporte que a su vez tiene las opciones:

Medios propios.

Autobús.

Los valores de esos botones son por ejemplo 0, y 25.

Y así varios apartados.

Finalmente aparece un mensaje diciendo: El precio total de la excursión es XX euros.

Os agradezco de antemano vuestra ayuda y os mando un saludo.

David · #2 (**permalink**) 25/08/2008, 07:11

¿Cuál es la parte que no estás consiguiendo hacer? ¿Cuál es el código que tienes hasta ahora?.

Lo que puedes hacer es guardar en los value de los radio los precios y luego sumarlos.

aguilab · #3 (**permalink**) 26/08/2008, 03:43

El tema es que no sé como empezar. Yo sé hacer los formularios en un editor tipo frontpage, pero no se insertar el código javascript.

Me imagino que si le doy un valor a cada botón luego puedo sumarlos y luego poner el resultado con

Código:

document.write('a + b + c + d + e + f ) + '<BR>');

Pero no tengo más ideas.

Te agradezco el interés.

Saludos.

David · #4 (**permalink**) 26/08/2008, 06:44

¿Has investigado algo sobre lo que te comenté de los value de los radio (supongo que son radio los que estás usando)

?

Mira, si por ejemplo tuviéramos algo como esto:

Código PHP:

  <input type="radio" name="nombre" value="1"> Primera Opción
<input type="radio" name="nombre" value="2"> Segunda Opción
<input type="radio" name="nombre" value="3"> Tercera Opción
<input type="radio" name="nombre" value="4"> Cuarta Opción

Fíjate que tenemos en el value los números, en ese caso lo único que tendríamos que hacer es ver cuál de ellos está seleccionado y sumar su valor.

aguilab · #5 (**permalink**) 03/09/2008, 04:17

Cita:

Iniciado por David el Grande

¿Has investigado algo sobre lo que te comenté de los value de los radio (supongo que son radio los que estás usando)

?

Mira, si por ejemplo tuviéramos algo como esto:

Código PHP:

  <input type="radio" name="nombre" value="1"> Primera Opción 
<input type="radio" name="nombre" value="2"> Segunda Opción 
<input type="radio" name="nombre" value="3"> Tercera Opción 
<input type="radio" name="nombre" value="4"> Cuarta Opción

Fíjate que tenemos en el value los números, en ese caso lo único que tendríamos que hacer es ver cuál de ellos está seleccionado y sumar su valor.

Hola. Perdona que no te haya contestado antes pero he estado de viaje.

Como ya te dije, no manejo javascript.

He puesto el código

Código:

<HTML> <HEAD></HEAD> <BODY>


<SCRIPT LANGUAGE="JavaScript">

<!--

<input type="radio" name="nombre1" value="1"> Primera Opción
<input type="radio" name="nombre2" value="2"> Segunda Opción
<input type="radio" name="nombre3" value="3"> Tercera Opción
<input type="radio" name="nombre4" value="4"> Cuarta Opción

//-->
</SCRIPT>
</BODY>
</HTML>

Y no me sale nada en el navegador.

¿Qué hago mal?

Salu2

Legoltaz · #6 (**permalink**) 03/09/2008, 04:44

Claro, no se vé nada porque has puesto los input dentro del tag script de JavaScript.

Código HTML:

<html>
<head>
</head>
<body>
<input type="radio" name="nombre1" value="1" /> Primera Opción<br />
<input type="radio" name="nombre2" value="2" /> Segunda Opción<br />
<input type="radio" name="nombre3" value="3" /> Tercera Opción<br />
<input type="radio" name="nombre4" value="4" /> Cuarta Opción<br />
</body>
</html>

aguilab · #7 (**permalink**) 03/09/2008, 04:58

¿Comprendo, pero ahora cómo hago para sumar los valores?

Código:

<HTML> <HEAD></HEAD> <BODY>

<b>Transporte</b><p>

<input type="radio" name="Transporte" value="1" checked> Primera Opción
<input type="radio" name="Transporte" value="2"> Segunda Opción
<input type="radio" name="Transporte" value="3"> Tercera Opción
<input type="radio" name="Transporte" value="4"> Cuarta Opción </p>

<p>

<b>Hospedaje</b></p>
<p>

<input type="radio" name="Hospedaje" value="1" checked> Primera Opción
<input type="radio" name="Hospedaje" value="2"> Segunda Opción
<input type="radio" name="Hospedaje" value="3"> Tercera Opción
<input type="radio" name="Hospedaje" value="4"> Cuarta Opción

</p>

<p>Suma total: </p>

</BODY></HTML>

David · #8 (**permalink**) 03/09/2008, 09:25

Debes usar el evento onclick de los radio para hacer la suma, después con un for recorrer todos los radio para saber cuál está seleccionado y finalmente sumar su value. Algo así:

Código PHP:

  function valuechecked(radio) {
   for (i=0; i<radio.length; i++) {
      if (radio[i].checked) {
         return radio[i].value;
      }
   }
}

En ese caso el valor de retorno será el value del radio, lo único que tendrás que hacer es la suma de todos los grupos de radio.

aguilab · #9 (**permalink**) 05/09/2008, 04:03

Cita:

Iniciado por David el Grande

Debes usar el evento onclick de los radio para hacer la suma, después con un for recorrer todos los radio para saber cuál está seleccionado y finalmente sumar su value. Algo así:

Código PHP:

  function valuechecked(radio) { 
   for (i=0; i<radio.length; i++) { 
      if (radio[i].checked) { 
         return radio[i].value; 
      } 
   } 
}

En ese caso el valor de retorno será el value del radio, lo único que tendrás que hacer es la suma de todos los grupos de radio.

Gracias amigo, pero como ya te dije no se programar en javascript y lo que me cuentas me suena a chino.

Sin embargo si me desarrollas un ejemplo que funcione, luego si que me veo capaz de ir modificando el código para añadir las demás opciones y radios.

Me he bajado un curso de Javascript pero estoy por el principio y no creo que llegue a lo que necesito hasta dentro de un tiempo.

Gracias de nuevo por tu ayuda.

Salu2

David · #10 (**permalink**) 05/09/2008, 07:19

Código PHP:

  <html>
<head>
<script type="text/javascript">
function valuechecked(radio) {
   for (i=0; i<radio.length; i++) {
      if (radio[i].checked) {
         return radio[i].value;
      }
   }
}
function sumar() {
   var suma = 0;
   suma += parseInt(valuechecked(form.Transporte));
   suma += parseInt(valuechecked(form.Hospedaje));
   alert(suma);
}
</script>
</head>
<body>

<form name="form">
<input type="radio" name="Transporte" value="1" checked /> Primera Opción
<input type="radio" name="Transporte" value="2" /> Segunda Opción
<input type="radio" name="Transporte" value="3" /> Tercera Opción
<input type="radio" name="Transporte" value="4" /> Cuarta Opción </p>


<input type="radio" name="Hospedaje" value="1" checked /> Primera Opción
<input type="radio" name="Hospedaje" value="2" /> Segunda Opción
<input type="radio" name="Hospedaje" value="3" /> Tercera Opción
<input type="radio" name="Hospedaje" value="4" /> Cuarta Opción

<input type="button" name="Sumar" value="Sumar" onclick="sumar()" />
</form>

</body>
</html>

Pero mira, se trata de que entiendas cómo funciona y no sólo que copies y pegues el código, lo que hace la función valuechecked es recorrer todos los radios que conforman el array y ver cuál está seleccionado, al encontrar uno que esté seleccionado devuelve su atributo value, y la función sumar recoge los value de ambos grupos de radios, los convierte a enteros (parseInt) y los suma.

aguilab · #11 (**permalink**) 06/09/2008, 03:17

Cita:

Iniciado por David el Grande

Pero mira, se trata de que entiendas cómo funciona y no sólo que copies y pegues el código, lo que hace la función valuechecked es recorrer todos los radios que conforman el array y ver cuál está seleccionado, al encontrar uno que esté seleccionado devuelve su atributo value, y la función sumar recoge los value de ambos grupos de radios, los convierte a enteros (parseInt) y los suma.

Muchas gracias David. Ahora veo un poco mejor como va el código.

No quiero que pienses que pretendo sólo copiar el código y se acabó. Mi pretensión es aprender, lo que ocurre es que como mi nivel es muy bajo, no entiendo algunas expresiones y sobre todo no se hacer la estructura correctamente con lo que no me funciona y no tengo ni idea de donde puede estar el fallo.

Al hacerme tú un ejemplo funcional, y con las explicaciones que me has dado y buscando en el tutorial que estoy leyendo, ya entiendo que es lo que hay que hacer y en qué orden, de modo que puedo empezar a experimentar y hacer cambios. Si hago algo mal, el código deja de funcionar y ya sé que puedo volver atrás y buscar la solución para lo que he hecho mal.

Gracias de nuevo.

Un salu2

aguilab · #12 (**permalink**) 08/09/2008, 04:56

Hola David el Grande,

¿Hay alguna manera de que en vez de que salga la ventanita de Alert cuando se da a calcular, que aparezca el total en un texto al final del formulario?

Algo como: El precio total de la excursión es XX euros.

Yo he visto eso en algún formulario de cálculo de intereses bancarios y es más elegante que la ventanita alert.

¿Qué habría que cambiar?

Salu2

JavierB · #13 (**permalink**) 08/09/2008, 05:05

Hola aguilab

Pon esto donde quieras que salga el precio:

Precio: euros

y cambia la línea: alert(suma);

por: document.getElementById('algo').innerHTML = suma;

Saludos,

aguilab · #14 (**permalink**) 09/09/2008, 04:30

Cita:

Iniciado por JavierB

Hola aguilab

Pon esto donde quieras que salga el precio:

Precio: euros

y cambia la línea: alert(suma);

por: document.getElementById('algo').innerHTML = suma;

Saludos,

Muchas gracias Javier.

Es exactamente lo que buscaba.

Sois unos cracks. A ver si voy avanzando en este lenguaje y puedo ayudar yo también.

Gracias y salu2.

madacigui · #15 (**permalink**) 04/03/2009, 08:26

Hola gente muy buen aporte me fue de mucha utilidad

, pero tengo una cuestión

. El For funciona barbaro en IE pero no logro descubrir porque no funciona en el Mozilla. Alguien me puede dar una idea del porque. Desde ya GRACIAS