Duda con campos ocultos al seleccionar radio buttons

[Chuqui]

Hola a tod@s,

En esta página, al seleccionar la opción "Yes", me aparece un campo de texto oculto para añadir información adicional.

Mi pregunta es: ¿cómo lo hago para agregarle un campo oculto a la segunda opción, es decir, "No"?

En resumen, me gustaría tener varios radio buttons, cada uno con un campo oculto, pero no me resulta.

Espero vuestras ayudas. Saludos,

Chuqui

[Corneja]

Tienes que crear un div oculto para cada uno de los radios y modificar un poco tu función de java para pasarle dos parámetros, por un lado el nombre de la capa que quieras mostrar y por otro el estado

function toggle(capa, status)
{

element = document.getElementById(capa);
idStatus = status;

if(idStatus==0){
element.style.display='none';
} else {
element.style.display='block';
}
}

Ya me contarás

Corneja

[Chuqui]

Hola @corneja

Gracias por la respuesta. me di el tiempo de probar con el script que me diste, pero como mis conocimientos de Javascript son muy escasos, no logro hacerlo funcionar.

Tal vez si me dieras el ejemplo de cómo quedaría el HTML para que funcionara UN radio, yo podría hacer el resto.

Muchas gracias.

[Corneja]

Bueno a ver si te ayudo...

Si quieres que se pueda mostrar más de un texto (no tiene mucho sentido pero bueno) el HTML te quedaría así

<label><input type="radio" name="newsletter" value="1" id="newsletter-1" onclick="javascript:toggle('email-field','1')" /> Yes</label>
<label><input type="radio" name="newsletter" value="0" id="newsletter-2" onclick="javascript:toggle('name-field','2')"/> No</label>
<br />
<div id="email-field" style="display:none;">
<input type="text" id="email" />
<strong>Add your Email</strong>
</div>
<div id="name-field" style="display:none;">
<input type="text" id="name" />
<strong>Add your Name</strong>
</div>
</body>
</html>

y el java así

function toggle(capa, status)
{
element = document.getElementById(capa);
element.style.display='block';
}

Esto no tiene mucho sentido ya que usas radio buttons (que sirven para que al seleccionar uno se anule el otro), por lo que mejor deberías usar algo así

<form action="" name="formulario" id="formulario">
<label><input type="radio" name="newsletter" value="1" onclick="javascript:toggle(1)" /> Yes</label>
<label><input type="radio" name="newsletter" value="0" onclick="javascript:toggle(2)"/> No</label>
<br />
<div id="capa1" style="display:none;">
<input type="text" id="email" />
<strong>Add your Email</strong>
</div>
<div id="capa2" style="display:none;">
<input type="text" id="name" />
<strong>Add your Name</strong>
</div>
</form>


Y el java sería algo así donde oculta() oculta todas la capas y toogle() muestra solo la que quieras

function oculta()
{
for (i=1;i<=document.formulario.newsletter.length;i++)
{
nombrecapa="capa"+i;
element = document.getElementById(nombrecapa);
element.style.display='none';
}
}

function toggle(status)
{
oculta();
nombrecapa="capa"+status;
element = document.getElementById(nombrecapa);
element.style.display='block';
}

[Chuqui]

Te pasaste!! Eso era lo que buscaba. Claramente la segunda alternativa es más lógica, de hecho la hice con checkbox en vez de radio buttons. Te agradezco un montón.

[Corneja]

un placer ayudarte. Suerte con la página