HTML - Activar cajas de texto con radio button

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.

<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 clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

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 clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Pos: 2

Val: 1.144

Activar cajas de texto con radio button

Publicado por xve (1543 intervenciones) el 28/03/2018 09:36:41

Hola Erick, haber si te sirve de esta manera...

<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

Comentar

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

Comentar

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

Comentar

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.

document.getElementsByName(e.id)[0].disabled=false;

document.getElementsByName(e.id)[0].focus();

Valora esta respuesta

Comentar

Activar cajas de texto con radio button

Publicado por marilyn (1 intervención) el 09/06/2020 16:39:40

Disculpe esto es con js o se puede aplicar solo html, si sepuede aplicar a html solito como seria?

Valora esta respuesta

Comentar

Pos: 1

Val: 1.453

Activar cajas de texto con radio button

Publicado por joel (460 intervenciones) el 10/06/2020 08:17:35

No se puede solo con HTML, tiene que ser con Javascript.

Valora esta respuesta

Comentar

Pos: 2

Val: 1.144

Activar cajas de texto con radio button

Publicado por xve (1543 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

Comentar

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

Comentar

Pos: 2

Val: 1.144

Activar cajas de texto con radio button

Publicado por xve (1543 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í:

<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

Comentar

Activar cajas de texto con radio button

Publicado por Mglcs (1 intervención) el 06/09/2022 00:28:58

Que tal y si en vez de que aparezca un textbox conforme al radio button se necesitara que conforme se seleccione radiobutton aparexcan 1 o mas textbox de acuerdo al valor que que tenga el Radiobutton, ejemplo

si se selecciona el radio button 4 que aparezcan 4 textbox etc.

SALUDOS

Valora esta respuesta

Comentar

Habilitacion para diseñar factura en html?

Cursos de HTML gratuitos?