mostrar/ocultar inputs segun boton

ananda · #1 (**permalink**) 04/01/2012, 11:30

Hola amigos, me acabo de registrar en el foro porqué he visto que normalmente la gente es muy amable con los nuevos en la programación.
esta es mi duda : Yo quería hacer un formulario en que salieran unos botones y tu le dieses por ejemplo al botón : nombre y te apareciera el input para poner el nombre.
He tratado de hacerlo, asignandóle unos valores a un input hidden según que botón pulsas (nombre, correo o informacion adicional). Pero no me funciona, alguien sabria decirme cual es el problema? Aqui dejo mi código completo :

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Vipefy invisible </title>
<head>
<script type="text/javascript">



function mostrarcampos(){
if (document.perfil.hidden.value = showname){
document.getElementById('nameformdiv').style.display='block';
}else if{
document.perfil.hidden.value = showmail){
document.getElementById('mailformdiv').style.display='block';
}else if{
document.perfil.hidden.value = showadicional){
document.getElementById('opcionalformdiv').style.display='block';
}
}
}
}

</script>
<style>	  

	  </style>
	  </head>


	 



<body>
<form action="<?=$_SERVER['PHP_SELF']?>" method="post" name="perfil" onload=>
<input type="button" value="Nombre" id="nombre" onclick="document.perfil.hidden.value=showname" /><br>
<input type="button" value="Correo electronico" id="mail" onclick="document.perfil.hidden.value=showmail" /><br>
<input type="button" value="Informacion adicional" id="opcional" onclick="document.perfil.hidden.value=showadicional" />
<input type="hidden" value="" name="hidden" id="hidden" />

</form>

<div id="nameformdiv" style="display.none;">
<p>Nombre </p>
<p><input type="text" id="nameformdiv.name" class="input" /></p>
<p>Apellidos </p>
<p><input type="text" id="nameformdiv.surname" class="input" /></p>
</div>


<div id="mailformdiv" style="display.none;">
<p>Correo Electronico</p>
<p><input type="text" id="mailformdiv.correo" class="input" /></p>
</div>


<div id="opcionalformdiv" style="display.none;">
<p>Ciudad de residencia</p>
<p><input type="text" id="opcionalformdiv.ciudad" class="input" /></p>
</div>

</body>
</html>

Si me pudieráis ayudar, os estaria realmente agradecido!

ocp001a · #2 (**permalink**) 04/01/2012, 12:51

Aunque me parece que asignar el valor a un hidden para luego evaluarlo con js es dar mucho rodeo, creo que no funciona por la manera en que asignas y comparas:

onclick="document.perfil.hidden.value=showname"
debe ser
onclick="document.perfil.hidden.value='showname'"

if (document.perfil.hidden.value = showname){
debería ser
if (document.perfil.hidden.value = 'showname'){

puesto que showname tal cual al momento de evaluar o asignar es una cadena, no una variable u objeto.

ananda · #3 (**permalink**) 04/01/2012, 13:16

Primero de todo, muchas gracias por el tiempo en analizar el código y ayudarme.

Después de esto, he hecho lo que me has dicho y sigue sin funcionar, en el código que he puesto antes hay una línea que está incompleta y es esta:
<form action="<?=$_SERVER['PHP_SELF']?>" method="post" name="perfil" onload="mostrarcampos()";>

El resto del código está igual pero corregido como me has dicho, sabes que podria ser? gracias :)

PD: He dado todo este rodeo porqué no he encontrado otra forma de validar los button para hacerlo con una sola función, pero si supieras una forma estaría abierto a nuevas posibilidades de escribir el código.

ocp001a · #4 (**permalink**) 04/01/2012, 13:48

Si lo que quieres es que al dar clic en un botón aparezca un campo, debería ser algo así:

<input type="button" onclick="muestra('nombre')"><input type="text" id="nombre" style="display:none;">

y en javascript la función muestra:

function muestra(id){
document.getElementById(id).style='block';
}

Igualmente puedes mostrar un div o cualquier elemento con id, ya sea un div o botón, y también es posible complicar algo el asunto con la opción de mostrar / ocultar con la misma función, pero por el momento con esto creo que te puedes dar una idea.

ananda · #5 (**permalink**) 04/01/2012, 14:12

De acuerdo, lo he hecho así pero ahora no me aparece el botón, este es el código entero para que puedas probarlo en el navegador (solo lo he aplicado en el Nombre, cuándo lo tenga solucionado lo aplicaré al correo y a la información adicional, este es el código completo tal y como está ahora :

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Vipefy invisible </title>
<head>
<script type="text/javascript">

function muestra(nombre){
document.getElementById(nombre).style='block';
}


</script>
<style>	  

	  </style>
	  </head>


	 



<body>
<form action="<?=$_SERVER['PHP_SELF']?>" method="post" name="perfil" onload="mostrarcampos()";>
<input type="button" onclick="muestra('nombre')" id="nombre" value="Nombre" style="display:none;">
<input type="button" value="Correo electronico" id="mail" onclick="document.perfil.hidden.value='showmail'" /><br>
<input type="button" value="Informacion adicional" id="opcional" onclick="document.perfil.hidden.value='showadicional'" />
<input type="hidden" value="" name="hidden" id="hidden" />

</form>

<div id="nameformdiv" style="display.none;">
<p>Nombre </p>
<p><input type="text" id="nameformdiv.name" class="input" /></p>
<p>Apellidos </p>
<p><input type="text" id="nameformdiv.surname" class="input" /></p>
</div>


<div id="mailformdiv" style="display.none;">
<p>Correo Electronico</p>
<p><input type="text" id="mailformdiv.correo" class="input" /></p>
</div>


<div id="opcionalformdiv" style="display.none;">
<p>Ciudad de residencia</p>
<p><input type="text" id="opcionalformdiv.ciudad" class="input" /></p>
</div>

</body>
</html>

nilburcion · #6 (**permalink**) 04/01/2012, 15:18

Me parece que esto es lo que buscas:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Vipefy invisible </title>
<head>

	  </head>

<body>
<style>

.no {
display:none;
}
.si {
display:block;
}
</style>

<form action="<?=$_SERVER['PHP_SELF']?>" method="post" name="perfil" >
<input type="button" value="Nombre" id="nombre" onclick="javascript:nameformdiv.className='si';" /><br>
<input type="button" value="Correo electronico" id="mail" onclick="javascript:mailformdiv.className='si';" /><br>
<input type="button" value="Informacion adicional" id="opcional" onclick="javascript:opcionalformdiv.className='si';" />
<input type="hidden" value="" name="hidden" id="hidden" />


<div id="nameformdiv" class="no" >
<p>Nombre </p>
<p><input type="text" id="nameformdiv.name" class="input" /></p>
<p>Apellidos </p>
<p><input type="text" id="nameformdiv.surname" class="input" /></p>
</div>


<div id="mailformdiv" class="no" >
<p>Correo Electronico</p>
<p><input type="text" id="mailformdiv.correo" class="input" /></p>
</div>

<div id="opcionalformdiv" class="no" >
<p>Ciudad de residencia</p>
<p><input type="text" id="opcionalformdiv.ciudad" class="input" /></p>
</div>

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

ananda · #7 (**permalink**) 04/01/2012, 15:24

Wow, no habia pensado esa posibilidad para hacerlo, me funciona a la perfección.
Muchisimas gracias! y muchas gracias también a ocp001a, ya está resuelto el tema :)