HTML - Activar cajas de texto con radio button

   
Vista:
Imágen de perfil de Erick

Activar cajas de texto con radio button

Publicado por Erick (6 intervenciones) el 28/03/2018 02:49:34
Hola.
Estoy creando un formulario donde puedas recuperar tu contraseña por medio de 2 opciones, ya sea via telefonica o al correo electronico registrado. Dentro de ello tengo 1 radio button para cada opcion y junto a estos, su respectiva caja de texto para ingresar el dato solicitado. Dichas cajas las tengo desactivadas al momento de cargar la pagina, y la idea es activarlas dependiendo del radio button seleccionado a su izquierda.

Quisiera saber cómo hacerlo y que camino tomar.

Les dejo parte del codigo que he empleado dentro de un FORM.

Saludos cordiales.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div>
	<input type="radio" name="radio" id="correo" value="1" onclick="habilitar(this)">
	<label for="correo">Correo Electrónico</label>
	<input type="text" name="correo" placeholder="correo electrónico" disabled="true">
</div>
 
<div>
	<input type="radio" name="radio" id="telefono" value="2" onclick="habilitar(this)">
	<label for="telefono">Número Telefónico</label>
	<input type="text" name="telefono" placeholder="número móvil" disabled="true">
</div>
 
<div>
	<input type="submit" value="Aceptar" class="btn_aceptar">
	<!-- <a href="javascript:window.history.go(-1);">Regresar</a> -->
	<input type="button" value="Regresar" onclick="history.back(-1)" />
</div>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Erick

Activar cajas de texto con radio button

Publicado por Erick (6 intervenciones) el 28/03/2018 02:52:23
En el input radio añadí el parametro onclick ya que habia estado probando una funcion llamda habilitar pero no me anda.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

Activar cajas de texto con radio button

Publicado por xve (1448 intervenciones) el 28/03/2018 09:36:41
Hola Erick, haber si te sirve de esta manera...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<div>
	<input type="radio" name="radio" id="correo" value="1" onclick="habilitar(this)">
	<label for="correo">Correo Electrónico</label>
	<input type="text" name="correo" placeholder="correo electrónico" disabled="true">
</div>
 
<div>
	<input type="radio" name="radio" id="telefono" value="2" onclick="habilitar(this)">
	<label for="telefono">Número Telefónico</label>
	<input type="text" name="telefono" placeholder="número móvil" disabled="true">
</div>
 
<div>
	<input type="submit" value="Aceptar" class="btn_aceptar">
	<!-- <a href="javascript:window.history.go(-1);">Regresar</a> -->
	<input type="button" value="Regresar" onclick="history.back(-1)" />
</div>
 
<script>
function habilitar(e) {
	// los deshabilitamos todos
	var inputs=document.querySelectorAll("input[type=text]");
	for(var i=0;i<inputs.length;i++)
	{
		inputs[i].disabled=true;
	}
 
	// habilitamos el seleccionado
	document.getElementsByName(e.id)[0].disabled=false;
}
</script>

Coméntanos, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Erick

Activar cajas de texto con radio button

Publicado por Erick (6 intervenciones) el 28/03/2018 14:12:25
Agradecido amigo. Me funciono prefectamente.

Una ultima consulta. Y si en vez de usar DISABLED elijo VISIBILITY?? El codigo seria similar?

Saludos
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Erick

Activar cajas de texto con radio button

Publicado por Erick (6 intervenciones) el 28/03/2018 14:16:48
Tambien quisiera añadir la opcion del focus para que al seleccionar el radio button, el focus se vaya automaticamente a la caja de texto relacionada.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Erick

Activar cajas de texto con radio button

Publicado por Erick (6 intervenciones) el 28/03/2018 14:28:15
Lo del FOCUS ya lo hice. Solo añadi otra linea mas al final del codigo.

1
2
document.getElementsByName(e.id)[0].disabled=false;
document.getElementsByName(e.id)[0].focus();
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de xve

Activar cajas de texto con radio button

Publicado por xve (1448 intervenciones) el 28/03/2018 18:02:40
cuando dices visibility, te refieres al estilo?
https://www.w3schools.com/CSSref/pr_class_visibility.asp
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Erick

Activar cajas de texto con radio button

Publicado por Erick (6 intervenciones) el 29/03/2018 02:29:03
Exacto. La idea es poner predeterminadamente invisible los textbox y que estos aparezcas al seleccionar un radio button.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

Activar cajas de texto con radio button

Publicado por xve (1448 intervenciones) el 29/03/2018 12:03:24
Seria lo mismo, pero en vez de modificar el atributo, añades o eliminas elementos de estilo.. algo así:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<div>
	<input type="radio" name="radio" id="correo" value="1" onclick="habilitar(this)">
	<label for="correo">Correo Electrónico</label>
	<input type="text" name="correo" placeholder="correo electrónico" class="oculto">
</div>
 
<div>
	<input type="radio" name="radio" id="telefono" value="2" onclick="habilitar(this)">
	<label for="telefono">Número Telefónico</label>
	<input type="text" name="telefono" placeholder="número móvil" class="oculto">
</div>
 
<div>
	<input type="submit" value="Aceptar" class="btn_aceptar">
	<!-- <a href="javascript:window.history.go(-1);">Regresar</a> -->
	<input type="button" value="Regresar" onclick="history.back(-1)" />
</div>
 
<style>
.oculto {visibility:hidden;}
</style>
 
<script>
function habilitar(e) {
	// los deshabilitamos todos
	var inputs=document.querySelectorAll("input[type=text]");
	for(var i=0;i<inputs.length;i++)
	{
		inputs[i].className="oculto";
	}
 
	// habilitamos el seleccionado
	document.getElementsByName(e.id)[0].className="";
}
</script>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Revisar política de publicidad