Form dinamico con variables

Section1 · #1 (**permalink**) 21/02/2011, 09:22

Hola Compañeros,

Llevo un dia entero probando de desarrollar un codigo javascript para hacer un formulario dinamico..

El objetivos es un option desplegable de tres opciones que cuando se haya escogido una de las tres opciones, el segundo option se active y a su vez al escoger la opcion del segundo option se vea un link o enlace.

Entonces el funcionamiento debe ser que el enlace debe llevar una variable o otra segun las opciones escogidas en los dos options anteriores.

Me explico:

Ejemplo: Si en el option 1 escogemos la opción uno este debe guardar la variable 1 y luego en el segundo option si escogemos la 3 la debe guardar tambien... obteniendo al final que el enlace resultante sea enlace.php?valor=4 (o sea el valor resultante de la suma de los dos valores.

Bueno en resumen..

Lo que he conseguido hasta ahora viendo otros posts es el hecho de que aparezcan los optins gradualmente segun se escoja el anterior... pero lo ideal es que simplemente se vean todos pero en disabled i solo sean seleccionables a medida que se escoja una opcion en su antedecesor.

Y ya el tema de conservar las variables del value del option eso no lo he conseguido por mas que lo he intentado porque en el primer option si pero cuando me dispongo en el segundo ya no conserva la variable del prmero para poder hacer la suma.

Bueno a lo mejor sera sencillo pero a mi se me esta haciendo un mundillo.

Ya me direis.

Gracias por avanzado.

omarMusic · #2 (**permalink**) 21/02/2011, 09:51

Si entendi bien deberias tener una variable general defina para guardar los datos del valor que quieres enviar
var url = 0;
function asignarValor1 () {
url = parseInt(document.form.select1.options[document.form1.select1.selectedIndex].value);
...
}
function asignarValor2 () {
url += parseInt(document.form.select2.options[document.form1.select2.selectedIndex].value);
...
document.form.enlace.href = "enlace.php?valor=" + url;
}

<a href="" name="enlace"/>

Saludos!

Section1 · #3 (**permalink**) 21/02/2011, 09:54

Muy bueno voy a provar...

Era eso lo que me faltaba como obtener el valor de ambos options..

Ahora lo desarrollo y comento.

Un saludo.

Section1 · #4 (**permalink**) 21/02/2011, 10:12

Hola,

Bueno esta claro que me acerco pero no lo consigo del todo...

Dejo el codigo que he desarrollado siguiendo las indicaciones de Omar y haber si pudierai orientarme un poco mas..

Código HTML:

Ver original<html>
<head>
<script>
var url = 0;
function asignarValor1 () {
url = parseInt(document.form.select1.options[document.form1.select1.selectedIndex].value);
}
function asignarValor2 () {
url += parseInt(document.form.select2.options[document.form1.select2.selectedIndex].value);
document.form.enlace.href = "enlace.php?valor=" + url;
}
    </script>
</head>
<body>
<FORM method="post"  name="form1" action="calcular.php">
<b>COCINA</b><br>
<SELECT NAME="select1" onchange="asignarValor1 ()">
   <OPTION VALUE="0">--Escoja--</OPTION> 
   <OPTION VALUE="1" >Pequeño 5-6,5 m2</OPTION> 
   <OPTION VALUE="2" >Medio 6,5-8 m2</OPTION> 
   <OPTION VALUE="3" >Grande 8-10 m2</OPTION> 
</SELECT>
<br>
<SELECT NAME="select2" onchange="asignarValor2 ()"> 
   <OPTION VALUE="0">--Escoja--</OPTION>
   <OPTION VALUE="1">Económico</OPTION> 
   <OPTION VALUE="2">Oferta</OPTION> 
   <OPTION VALUE="3">Luxe</OPTION> 
</SELECT>
<br>
<a href="" name="enlace"/>ver detalle calidad</a>
</form>
</body>
</html>

Muchas gracias de nuevo.

omarMusic · #5 (**permalink**) 21/02/2011, 15:13

Bueno corrigiendo algunas cosas, también es válido escribir

url = parseInt(document.form.select1.value);

en vez de

url = parseInt(document.form.select1.options[document.form1.select1.selectedIndex].value);

lo mismo para el otro
url += parseInt(document.form.select2.value);

luego en

document.form.enlace.href = "enlace.php?valor=" + url;

por

document.getElementById("enlace").href = "enlace.php?valor=" + url;

un enlace no se considera un elemento del formulario, espero q eso sea

y por último posiste el nombre del formulario name="form1" cuando deberia ser "form".

Suerte!

Section1 · #6 (**permalink**) 21/02/2011, 19:22

Buenas Omar,

He arreglado los puntos que me has comentado y no me termina de funcionar.

No se a lo mejor es debido a lo que me comentas que una url al no ser un elemento del form no funciona.

No se.

Ya mé dirás.

Un saludo.

omarMusic · #7 (**permalink**) 22/02/2011, 10:17

Bueno acá algunas correcciones:

Código HTML:

Ver original<html>
<head>
<script>
var valor1 = 0;
function asignarValor1 () {
valor1 = parseInt(document.form.select1.value);
document.getElementById("enlace").href = "#";
}
function asignarValor2 () {
var valor2 = parseInt(document.form.select2.value);
document.getElementById("enlace").href = "enlace.php?valor=" + (valor1 + valor2);
}
    </script>
</head>
<body>
<FORM method="post"  name="form" action="calcular.php">
<b>COCINA</b><br>
<SELECT NAME="select1" onchange="asignarValor1 ()">
   <OPTION VALUE="0">--Escoja--</OPTION> 
   <OPTION VALUE="1" >Pequeño 5-6,5 m2</OPTION> 
   <OPTION VALUE="2" >Medio 6,5-8 m2</OPTION> 
   <OPTION VALUE="3" >Grande 8-10 m2</OPTION> 
</SELECT>
<br>
<SELECT NAME="select2" onchange="asignarValor2 ()"> 
   <OPTION VALUE="0">--Escoja--</OPTION>
   <OPTION VALUE="1">Económico</OPTION> 
   <OPTION VALUE="2">Oferta</OPTION> 
   <OPTION VALUE="3">Luxe</OPTION> 
</SELECT>
<br>
<a href="#" name="enlace" id="enlace"/>ver detalle calidad</a>
</form>
</body>
</html>

bueno agregando algo mas si vas a utilizar xhtml escribe todos los tags en minúsculas, si es solo html la verdad no importa.

Saludos!

Section1 · #8 (**permalink**) 24/02/2011, 03:16

Ohhh

Muy bien Omar.

Veo que fallaba sobretodo yo en la sintaxis.

Referente a el codigo que me muestras lo indicaba mal yo.

Ahora solo me queda emplear esta variable resultante para mostrar la info de cada producto asciado con esa id en un pop-up.

Te lo agradezco mucho.. con este ejemplo he aprendido por lo menos a gestionar elementos en javascript que no lo dominaba mucho.

Muchas gracias pot todo.

Section1 · #9 (**permalink**) 24/02/2011, 04:33

Hola Omar,

Tendre que formularte una ultima consulta..

Ya que al aplicar un codigo para generar el pop-up... este no recoge bien la variable de la url que genera el primer script.

Te muestro el codigo:

Código HTML:

<html>
<head>
<script>
var valor1 = 0;function asignarValor1 () {valor1 = parseInt(document.form.select1.value);document.getElementById("enlace").href = "#";}function asignarValor2 () {var valor2 = parseInt(document.form.select2.value);document.getElementById("enlace").href = "enlace.php?valor=" + valor1 + "&valor1=" + valor2;}    </script>
<script language="JavaScript">
function Abrir_ventana (pagina) {
var opciones="toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, width=508, height=365, top=85, left=140";
window.open(pagina,"",opciones);
}
</script>
</head>
<body>
<FORM method="post"  name="form" action="calcular.php">
<b>COCINA</b>
<br>
<SELECT NAME="select1" onchange="asignarValor1 ()">
   <OPTION VALUE="0">--Escoja--</OPTION>
    <OPTION VALUE="1" >Pequeño 5-6,5 m2</OPTION>
    <OPTION VALUE="2" >Medio 6,5-8 m2</OPTION>
    <OPTION VALUE="3" >Grande 8-10 m2</OPTION>
 </SELECT>
<br>
<SELECT NAME="select2" onchange="asignarValor2 ()">
    <OPTION VALUE="0">--Escoja--</OPTION>
   <OPTION VALUE="1">Económico</OPTION>
    <OPTION VALUE="2">Oferta</OPTION>
    <OPTION VALUE="3">Luxe</OPTION>
 </SELECT>
<br>

<a href="javascript:Abrir_ventana('#')" id="enlace"/><font size="1" face="Verdana">Click aquí para abrir la ventana</font></a>

</form></body></html>

Gracias de nuevo

Porque no se como hacer para que recoja la variable del script.

omarMusic · #10 (**permalink**) 24/02/2011, 08:11

Bueno en principio manten el enlace así

<a href="#" id="enlace"/>

una vez q selecciones la segunda opción es ahi donde tiene q cambiar el nuevo enlace, donde esta

document.getElementById("enlace").href = "enlace.php?valor=" + valor1 + "&valor1=" + valor2;

cambialo por:

document.getElementById("enlace").href = "javascript:Abrir_ventana('enlace.php?valor=" + valor1 + "&valor1=" + valor2 + "')";}

y el recojo de los valores de esa variable sería mediante un lenguaje de lado del servidor, bueno ese ya es otro tema.

Saludos!