Crear tres formularios en uno

Bernardao · #1 (**permalink**) 09/08/2012, 04:45

Buenos días,
Quiero crear una página de contacto en la que dependiendo de la elección en un select o radio button, muestre uno de los tres posibles formulariios.
Me refiero a que si selecciona "contacto" aparezca el formulario de contacto, si selecciona pedidos, le aparezca un formulario de pedidos y si selecciona "soporte" le aparezca el formulario de IT.
Esto entiendo que lo puedo hacer con css o con js (jquery). Entiendo que habrá que hacerlo con display y visibilities.
Mi problema principal es que no sé cómo se llaman a este tipo de formularios, para buscarlo en Google y ver ejemplos y después mirar el código.
Alguien puede decirme cómo se llaman o enviarme algún link de ejemplos?

Gracias

luisgzafra · #2 (**permalink**) 09/08/2012, 04:52

No lo se, pero un select onchange=funcion() y según esa muestras una div o otra según el valor que seleccionó.

Así pides unos datos y otros.

Luego con php, obtienes el valor de ese select y así envias un msg u otro

(Usa javascript)

Bernardao · #3 (**permalink**) 09/08/2012, 05:02

Cita:

Iniciado por luisgzafra

No lo se, pero un select onchange=funcion() y según esa muestras una div o otra según el valor que seleccionó.

Así pides unos datos y otros.

Luego con php, obtienes el valor de ese select y así envias un msg u otro

(Usa javascript)

Ya sé que con onchange lo podría hacer, pero como le voy a querer dar algún tipo de animación, creo que lo má conveniente será usar jquery o css3.
Voy a buscar formularios con la función onchange a ver si averiguo como googlearlo.
Gracias

harryp · #4 (**permalink**) 10/08/2012, 04:35

aquí tienes una posible solución para tu problema...
http://api.jquery.com/slideDown/

Desaparecer el div...
http://api.jquery.com/slideUp/

Bernardao · #5 (**permalink**) 10/08/2012, 07:11

Cita:

Iniciado por harryp

aquí tienes una posible solución para tu problema...
http://api.jquery.com/slideDown/

Desaparecer el div...
http://api.jquery.com/slideUp/

No es exactamente eso lo que quería hacer, pero muchas gracias a los dos,

swagasaurex · #6 (**permalink**) 10/08/2012, 14:18

Hola, no se si es exactamente lo que necesitas, pero puedes probarlo para ver si es :)

Código:

<body>
<select id="principal" name="principal" onchange="mostrarFormulario();">
	<option value="1">Contacto</option>
   	<option value="2">Pedidos</option>
</select>
<br/>
<form id="contacto" style="display:none">
	<h2>Contacto</h2>
    Digite telefono <input type="text" name="telefono"/>
</form>
<form id="pedidos" style="display:none">
	<h2>Pedidos</h2>
    Digite producto <input type="text" name="producto"/>
</form>


</form>
<script>
function mostrarFormulario()
{
	var valorActual=document.getElementById("principal").value;
		switch(valorActual){
			case "1":
				document.getElementById("pedidos").setAttribute("style","display:none");
				document.getElementById("contacto").setAttribute("style","display:block");
			break;
			case "2":
				document.getElementById("contacto").setAttribute("style","display:none");
				document.getElementById("pedidos").setAttribute("style","display:block");
			break;
		}
		
}
</script>
</body>

Bernardao · #7 (**permalink**) 10/08/2012, 17:33

Cita:

Iniciado por swagasaurex

Hola, no se si es exactamente lo que necesitas, pero puedes probarlo para ver si es :)

Código:

<body>
<select id="principal" name="principal" onchange="mostrarFormulario();">
	<option value="1">Contacto</option>
   	<option value="2">Pedidos</option>
</select>
<br/>
<form id="contacto" style="display:none">
	<h2>Contacto</h2>
    Digite telefono <input type="text" name="telefono"/>
</form>
<form id="pedidos" style="display:none">
	<h2>Pedidos</h2>
    Digite producto <input type="text" name="producto"/>
</form>


</form>
<script>
function mostrarFormulario()
{
	var valorActual=document.getElementById("principal").value;
		switch(valorActual){
			case "1":
				document.getElementById("pedidos").setAttribute("style","display:none");
				document.getElementById("contacto").setAttribute("style","display:block");
			break;
			case "2":
				document.getElementById("contacto").setAttribute("style","display:none");
				document.getElementById("pedidos").setAttribute("style","display:block");
			break;
		}
		
}
</script>
</body>

Si creo que con eso podré hacerlo, muchas gracias, a ver si lo pruebo.