radio buttons, ocultar y mostra elementos de formulario

Sr.Zzz · #1 (**permalink**) 03/10/2007, 08:25

Hola, soy nuevo en javascritp, necesito algo muy simple.
Tengo 3 radio buttons, y necesito hacer que cuando se seleccione uno cualquiera abajo se muestre( aparezca ) algún elemento de formulario como textarea o campo input, y cuando se selecciona otro radio, primero se oculte el que estaba y se muestre los elementos de formualrio asignados a este ultimo.

Espero que me puedan ayudar, gracias

caricatos · #2 (**permalink**) 03/10/2007, 08:53

Hola:

Lo de hacer que se oculte primero una capa y "luego" se muestre otra añade a tu script (al que pides) una complicación no deseada, ya que son cosas casi imperceptibles, pero si lo quieres así se puede hacer (dilo expresamente...

)

Simplemente debes hacer un bucle y hacer coincidir (de alguna manera) el valor del radio y la capa...

var capas = ["capa1", capa2", capa3"];
function mostrar(capa) {
for (i = 0, total = capas.length; i < total; i ++)
document.getElemetById(capas[i]).style.display = (capas[i] == capa) ? "block":"none";
}

En este caso las capas deben tener el id como el array capas y el value de los radios el mismo nombre, y en cada radio debes poner onclick="mostrar(this.id)"

Lo puse "a pelo" así que puede tener errores... pruébalo y nos cuentas.

Saludos

Sr.Zzz · #3 (**permalink**) 03/10/2007, 08:53

Cita:

Iniciado por Sr.Zzz

Hola, soy nuevo en javascritp, necesito algo muy simple.
Tengo 3 radio buttons, y necesito hacer que cuando se seleccione uno cualquiera abajo se muestre( aparezca ) algún elemento de formulario como textarea o campo input, y cuando se selecciona otro radio, primero se oculte el que estaba y se muestre los elementos de formualrio asignados a este ultimo.

Espero que me puedan ayudar, gracias

¿Porque no buscas bien?
Me respondo: eso lo que voy hacer, ya encontre.

Pueden borrar este POST.

caricatos · #4 (**permalink**) 03/10/2007, 08:55

Cita:

Iniciado por Sr.Zzz

¿Porque no buscas bien?
Me respondo: eso lo que voy hacer, ya encontre.

Pueden borrar este POST.

¡Qué tal!

Puedes mostrar la referencia...

Saludos

Sr.Zzz · #5 (**permalink**) 03/10/2007, 09:02

Gracias por responder caricatos,
Disculpa, el mensaje anterior mio salio cuando ya habias enviado tu un mensaje.

Era algo tan simple, como esto.

Código HTML:

<html>
<head>
<script>
function Pregunta1(){
document.getElementById('pregunta').innerHTML = "Cual es la pregunta 1?<br>"
}
function Pregunta2(){
document.getElementById('pregunta').innerHTML = "Cual es la pregunta 2?<br>"
}
function Pregunta3(){
document.getElementById('pregunta').innerHTML = "Cual es la pregunta 3?<br>"
}
</script>
</head>
<body>
<form name=form>
<input type="radio" name="Radio" value="Uno" Onfocus="Pregunta1()">Uno<br>
<input type="radio" name="Radio" value="Dos" Onfocus="Pregunta2()">Dos<br>
<input type="radio" name="Radio" value="Tres" Onfocus="Pregunta3()">Tres<br>
<div id="pregunta">Seleccione una Opción</div></form>
</body>
</html>

Txumai · #6 (**permalink**) 03/10/2007, 09:26

Juararía que mandé un ejemplo ( en respuesta rápida??? )
Bueno hay muchos ejemplos en el foro, es mejor que antes busques
>>>

Código:

<html><head><title>Display por Radio</title>
<script>
function selec1(){
	document.getElementById('idB1').style.display = "block";
	document.getElementById('idB2').style.display = "none";
	document.getElementById('idB3').style.display = "none";
}
function selec2(){
	document.getElementById('idB1').style.display = "none";
	document.getElementById('idB2').style.display = "block";
	document.getElementById('idB3').style.display = "none";
}
function selec3(){
	document.getElementById('idB1').style.display = "none";
	document.getElementById('idB2').style.display = "none";
	document.getElementById('idB3').style.display = "block";
}
</script>
</head>
<body>
<h3>Display por Radio</h3>
Radio selec.<br>
<input type=radio name=nradio onclick=selec1() checked> Primero
<input type=radio name=nradio onclick=selec2()> Segundo 
<input type=radio name=nradio onclick=selec3()> Tercero 
<p>
<div id=idB1>Primer bloque <input type=text name=primero size=10 maxlength=10></div>
<div id=idB2 style=display:none>Segundo bloque <textarea name=segundo cols=80 rows=10></textarea></div>
<div id=idB3 style=display:none>Tercer bloque <input type=text name=primero value="Este no tiene límites"></div>
</body>
</html>

Sr.Zzz · #7 (**permalink**) 03/10/2007, 09:34

Gracias Txumai, eso es mas precisamente los que estaba buscando.
Con lo que encontré no me quede conforme.
Saludos

Edito: ahora, no se porque me pasa que las palabras acentuadas se ven mal, en el ejemplo se ve el siguiente texto "Este no tiene lÃ*mites", donde se ve mal la " í ".

desingsstar · #8 (**permalink**) 03/10/2007, 09:54

eso de que te sale la i acentudad mal es porque tienes que ponerla en html con el codigo para que al verlas en internet salgan bien, por ejemplo, la i acentuada en la palabra límete, deberias escribir en html, l&iacutemite

Sr.Zzz · #9 (**permalink**) 03/10/2007, 10:35

Cita:

Iniciado por desingsstar

eso de que te sale la i acentudad mal es porque tienes que ponerla en html con el codigo para que al verlas en internet salgan bien, por ejemplo, la i acentuada en la palabra límete, deberias escribir en html, l&iacutemite

Genial, gracias.

caricatos · #10 (**permalink**) 03/10/2007, 10:58

Hola:

Cita:

Iniciado por Sr.Zzz

Gracias Txumai, eso es mas precisamente los que estaba buscando.
Con lo que encontré no me quede conforme.
...

Con poco que hubieras "tocado" mi código, te hubiera servido:

Código:

<html>
<head>
<!--
Simplemente debes hacer un bucle y hacer coincidir (de alguna manera) el valor del radio y la capa...
-->
<script>
var capas = ["capa1", "capa2", "capa3"];
function mostrar(capa) {
for (i = 0, total = capas.length; i < total; i ++)
document.getElementById(capas[i]).style.display = (capas[i] == capa) ? "block":"none";
}
</script>
</head>
<body>

<p>
En este caso las capas deben tener el id como el array capas y el value de los radios el mismo nombre, y en cada radio debes poner onclick="mostrar(this.value)"
</p>
<form>
<input type="radio" name="r" value="capa1" onclick="mostrar(this.value)" />
<input type="radio" name="r" value="capa2" onclick="mostrar(this.value)" />
<input type="radio" name="r" value="capa3" onclick="mostrar(this.value)" />
</form>
<div id="capa1" style="display: none">capa 1</div>
<div id="capa2" style="display: none">capa 2</div>
<div id="capa3" style="display: none">capa 3</div>
</body>
</head>

Saludos