Hoy, por ser sábado y porque actúa el Chikilicuatre esta noche, voy a escribir una función sencillita, así no me tiro mucho rato en el ordenador xD
Al tema, me han pedido un formulario de contacto en el que si el usuario elige una opción, aparezca un campo adicional.
Ej. Si en el grupo de opciones de “A través de donde nos ha conocido” elige la opción “Otros”, aparece un campo de texto para introducir la información.
Lo primero es crear el formulario:
//se le asigna un name al formulario de contacto. <form action="<?=$_SERVER['PHP_SELF']?>" method="post" name="fcontacto"> //inputs <p>A través de donde nos has conocido:<br /> //importante llamar a la función <input type="radio" name="Conocido" value="Google" id="Conocido_0" onclick="mostrarReferencia();" /> Google <input type="radio" name="Conocido" value="Otros" id="Conocido_1" onclick="mostrarReferencia();" /> Otros </p> //div oculto <div id="desdeotro" style="display:none;"> <p>Referencia de la oferta:</p> <p><input type="text" name="otro" class="input" /></p> </div>
Y la función que tenemos que agregar al head:
//funcion javascript en la cabecera del documento
<script type="text/javascript">
<!--
function mostrarReferencia(){
//Si la opcion con id Conocido_1 (dentro del documento > formulario con name fcontacto > y a la vez dentro del array de Conocido) esta activada
if (document.fcontacto.Conocido[1].checked == true) {
//muestra (cambiando la propiedad display del estilo) el div con id 'desdeotro'
document.getElementById('desdeotro').style.display='block';
//por el contrario, si no esta seleccionada
} else {
//oculta el div con id 'desdeotro'
document.getElementById('desdeotro').style.display='none';
}
}
-->
</script>
Atención: Hay que llamar a la función desde los campos apropiados, cambiar los id’s y name’s ajustándolos a tu formulario, colocar el script con la función en el <head> de tu documento.
Y listo! Fácil y sencillo.. xD
Entendiendo esto ya podéis adaptarlo a más situaciones, viene muy bien tenerlo a mano 
Twittea esto Guardalo en Delicious Compartelo en Facebook
octubre 28th, 2008 at 12:14 pm
Hola!!! n_n la verdad espectacular me salio!!!! PEEEEEEEROOO solo me funciona con el Chrome… no me funciona con el explorer.. porque sera? me dice que text1 es undefined.
aqui el codigo muy muy simple.
Accenture
function mostrarOcultar() {
text1.style.display=”none”;
}
octubre 28th, 2008 at 12:16 pm
octubre 29th, 2008 at 6:54 am
Hola max, pásame el código por email y te lo reviso
Sale tu mensaje en blanco porque has metido php y lo interpreta, a ver si esta semana lo miro y arreglo esto para que podáis comentar los problemas de vuestros códigos guay.
octubre 30th, 2008 at 6:36 am
Pero cual es tu mail? te mande un mensaje al facebook n_n.
febrero 10th, 2009 at 18:08 pm
Gracias amigos, pero hay un error de caracteres que tienes que corregir antes de echar a andar el codigo, cambien las comillas dobles….
febrero 10th, 2009 at 19:20 pm
Hola henry_valz! ¿Cúales comillas dobles? Sólo hay dobles en el form, no en el js, y que yo sepa deben ir ahí.
Un saludo!
marzo 26th, 2009 at 5:14 am
hola quisiera saber si se puede emplear con un 1
si select < 3 {
mostrar.campodetexto
if campodetexto = 0{
mensaje “llena campo de texto”
}
}
else {
enviar valores de select a database
no mostrar campo de texto
}
alguien sabe ayuda porfavor… se los agradezco mucho, si tienen alguna solucion, avisarme porfavor
marzo 26th, 2009 at 12:32 pm
Hola zamudio!
No entiendo muy bien que quieres decir con un 1, ¿Lo puedes explicar mejor, please?
Lo que entiendo que quieres es: Si el campo de texto está vacio que muestre un mensaje y si está lleno que lo envíe a la base de datos, ¿Puede ser?
marzo 27th, 2009 at 4:40 am
ok han cambiado las coas… logre hacer lo que antes no pude… vaya redundacia vdd… pero ahora os explico mejor ok… ha por sierto gracias por su pronta respuesta y felicidades por esl sitio esta genial…
sobre la cuestion anterior fue… ¿como se puede lograr?…
validar el valor de un select, con opciones de valor del 1 – 5, si select es mayor a 0, muestra un alert de que resta seleccionar opcion de pregunta ‘#X’, y si select es menor a 3, mostrar el campo oculto textarea este mismo validado de forma que si esta vacio muestre un msj de que ahun no se a ingresado caracter…
si value select es mayor a 4 ocultar textarea
de otra forma enviar datos del formualario a php…
ahora la pregunta ¿como puedo lograr lo anterior?, MUCHAS GRACIAS POR SU ATENCION Y ESPERO QUE SEA ALGO CLARO… SI NECESITA VER EL SCRIPT QUE LLEVO HASTA AHORA CON GUTO SE LO MOSTRARE OK… si es posible ponernos en contacto sería mas que genial, saludos y hasta pronto… denuevo gracias…
el codigo que presentan en este post es lo que buscaba… pero ahun no funca deacuerdo al plan…
marzo 27th, 2009 at 4:42 am
ho sobre lo anterior las validaciones y lo demas necesita estar en PHP language…
marzo 27th, 2009 at 12:40 pm
@zamudio te he mandado un email, que x aquí es un lío..! xD
abril 1st, 2009 at 0:19 am
nnatali te he mandado un email… como me se ha solicitado… gracias…
agosto 24th, 2009 at 16:04 pm
Soy nuevo en esto de los formularios e quiero disenyar un formulario de inscripción (validación + MySQL + email).
Me esta ayudando mucho tu web con los artículos publicados pero me atasco a cada momento.
Respecto a este ejemplo:
Me da un error de “Se esperaba un objeto”
He puesto todo el codigo en un ejemplo.html el script en el head y el form en el body pero me sale el erro descrito.
Alguna ayuda?
agosto 25th, 2009 at 0:06 am
genial, grax, interesante y muy útil, grax, seguimos en contacto
agosto 25th, 2009 at 12:44 pm
zamudio me alegra q te sirviera : )
DmmNet quitaste los comentarios y comprobaste las comillas q no te dieran problemas? son muy caprichosas ellas ^^
noviembre 24th, 2009 at 3:02 am
Hola, primero gracias por este codigo, muy util.
Ahora la pregunta(s)
Como podria aplicar esto para que me muestre por ejemplo
Teniendo solo dos opciones
1) empresa
2) universidad
Que segun seleccione empresa o universidad se muestren campos a llenar y que ademas pase el dato empresa o universidad a una base de datos?
Se entiende?
Gracias de ante mano!
noviembre 26th, 2009 at 11:00 am
Hola Gusi! El ejemplo lo hice con dos opciones, así que solo debes modificar los datos para que se adaptan a lo que te interesa. ¿En que parte no te aclaras?
Un saludo!
noviembre 27th, 2009 at 3:01 am
Hola natali, gracias por la rta. mira la idea es que las opciones sean empresa y universidad y que segun cual de las dos seleccione muestre una div determinada.No que esconda una o la muestre
Traducido:
Si selecciona empresa se muestra el div para empresa, y si selecciona universidad se muestra el div para universidad, obviamente cuando selecciono una esconde la otra
Tambien deberia pasar el dato de universidad o empresa como valor a la base de datos.
Se entiende?
Mis conocimientos de JS se limitan a modificar de oido lo que hacen otros, tengo la logica quizas, pero no la capacidad para escribir como corresponde la funcion para hacer esto.
Saludos!
enero 20th, 2010 at 18:32 pm
Muy útil la información, a veces las cosas tan sencillas parecen tan complicadas
febrero 21st, 2010 at 4:16 am
No funciona el codigo, entiendo lo que hace, pero no me funciona…
abril 27th, 2010 at 6:27 am
Hola! lo he probado y funciona de pelos! pero he aqui la cuestion toy usando un formulario que utiliza el niceforms 2.0 (que es como un template para formularios) el tiene un archivo niceforms-default.css y niceforms.js. Cuando aplico este “template” al form me deja de funcionar lo de ocultar/mostrar los campos. hasta aciendo pruebitas he descubierto que el niceforms.js es el que causa el problema.
A todo esto la pregunta es: HAY OTRA FORMA DE OCULTAR/MOSTRAR los campos????