Interaccionar con un grupo de radio buttons del formulario
Imaginemos el siguiente código html:
<body onload="alCargar();">
<form action="#">
<fieldset>
<legend>Interaccionar con un grupo de radio buttons del formulario</legend>
<label for="tipo">Tipo:</label>
<br/>
<input type="radio" name="Tipo" value="Numeros" onchange="alCambiar();" id="tipo" />Numeros
<br/>
<input type="radio" name="Tipo" value="Letras" onchange="alCambiar();" />Letras
<br/>
<input type="radio" name="Tipo" value="Mixto" onchange="alCambiar();" />Mixto
<br/>
<label for="entrada">Comentarios</label>
<input type="text" name="Entrada" id="entrada" placeholder="Ejija arriba ... " />
<input type="button" id="boton" onclick="Testear();" value="Realiza el test con las expresiones regulares" />
<div id="infoTexto"></div>
</br>
</fieldset>
</form>
</body>
La función Javascript alCargar() deshabilita el cuadro de texto y el botón, hasta que el usuario seleccione uno de los radio button:
function alCargar() {
document.getElementById("boton").disabled = true;
document.getElementById("entrada").disabled = true;
daFoco('entrada');
}
La función Javascript daFoco(‘entrada’) es un helper que simplemente da foco al elemento html con cierto id:
function daFoco(id) {
// da foco al elemento html con id='id'
document.getElementById(id).focus();
}
La función Javascript alCambiar():
function alCambiar() {
activarInterfaz();
daFoco('entrada');
seleccionaTXT('entrada');
}
La función Javascript que se utiliza en alCambiar() es seleccionaTXT(‘entrada’) y su código es el siguiente:
function seleccionaTXT(id) {
// selecciona el contenido del elemento html con id='id'
document.getElementById(id).focus();
document.getElementById(id).select();
}
Y daFoco(‘entrada’) es otro helper que da foco al elemento html con id=’id’:
function daFoco(id) {
// da foco al elemento html con id='id'
document.getElementById(id).focus();
}
Y la función Javascript activarInterfaz(), que modifica el placeholder del input de tipo texto con id = ‘entrada’ y habilita tanto la caja de texto como el botón para que el usuario pueda comenzar a interactuar tras la selección del tipo de entrada:
function activarInterfaz() {
var tipo = averiguarRadio('Tipo');
document.getElementById("entrada").placeholder = "Escriba " + tipo;
document.getElementById("boton").disabled = false;
document.getElementById("entrada").disabled = false;
}
Se trata de que el usuario elija un tipo de entrada para el input de tipo text, de id = ‘entrada’, de entre los posibles: Numeros, Letras y Mixto, que hará que la entrada en el input de tipo texto se evalúe según una expresión regular u otra:
patronNumeros=/^[0-9]*$/; patronLetras=/^[A-Za-z]*$/; patronMixto=/^[A-Za-z0-9]*$/;
Además existe un div, de id = ‘infoTexto’ para informar al usuario.
Para escribir se utiliza un helper llamado escribe(id,texto) que escribe el texto en el innerHTML del elemento html con id=’id’:
function escribe(id,texto) {
// escribe el texto en el innerHTML del elemento html con id='id'
document.getElementById(id).innerHTML = texto;
}
Cuando el usuario selecciona el tipo de Entrada se activa la interfaz (el cuadro de texto y el botón), además se da foco a la caja de texto. Cuando el usuario escribe y finalmente hace clic en el botón se llama a la función Test() cuyo código es el que sigue:
function Testear() {
// recupero el valor del input radio
var radios = averiguarRadio('Tipo'); //me apoyo en un helper
// recupero el valor del input text
var valor = document.getElementById('entrada').value;
//según tipo aplico una expresión regular u otra
switch (radios) {
case 'Numeros':
var patronNumeros = /^[0-9]*$/;
if (patronNumeros.test(valor)) {
escribe('infoTexto', "Parece que todo OK");
return true;
} else {
escribe('infoTexto', "Error no cumple \'" + radios + "\'");
return false;
}
break;
case 'Letras':
var patronLetras = /^[A-Za-z]*$/;
if (patronLetras.test(valor)) {
escribe('infoTexto', "Parece que todo OK");
return true;
} else {
escribe('infoTexto', "Error no cumple \'" + radios + "\'");
return false;
}
break;
case 'Mixto':
var patronMixto = /^[A-Za-z0-9]*$/;
if (patronMixto.test(valor)) {
escribe('infoTexto', "Parece que todo OK");
return true;
} else {
escribe('infoTexto', "Error no cumple \'" + radios + "\'");
return false;
}
break;
default:
escribe('infoTexto', "A qué estas jugando?");
return false;
break;
}
}
El código completo del ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Interaccionar con un grupo de radio buttons del formulario</title>
<script type="text/javascript">
function averiguarRadio(nombreGrupo, queRecuperar) {
//queRecuperar='value|text'
if (queRecuperar == undefined) queRecuperar = 'value';
var tipos = document.getElementsByName(nombreGrupo);
var valor = "Numeros";
for (var i = 0; i < tipos.length; i++) {
if (tipos[i].checked) {
if (queRecuperar == 'value')
valor = tipos[i].value;
else
valor = tipos[i].text;
break;
}
}
return valor;
}
function Testear() {
// recupero el valor del input radio
var radios = averiguarRadio('Tipo'); //me apoyo en un helper
// recupero el valor del input text
var valor = document.getElementById('entrada').value;
//según tipo aplico una expresión regular u otra
switch (radios) {
case 'Numeros':
var patronNumeros = /^[0-9]*$/;
if (patronNumeros.test(valor)) {
escribe('infoTexto', "Parece que todo OK");
return true;
} else {
escribe('infoTexto', "Error no cumple \'" + radios + "\'");
return false;
}
break;
case 'Letras':
var patronLetras = /^[A-Za-z]*$/;
if (patronLetras.test(valor)) {
escribe('infoTexto', "Parece que todo OK");
return true;
} else {
escribe('infoTexto', "Error no cumple \'" + radios + "\'");
return false;
}
break;
case 'Mixto':
var patronMixto = /^[A-Za-z0-9]*$/;
if (patronMixto.test(valor)) {
escribe('infoTexto', "Parece que todo OK");
return true;
} else {
escribe('infoTexto', "Error no cumple \'" + radios + "\'");
return false;
}
break;
default:
escribe('infoTexto', "A qué estas jugando?");
return false;
break;
}
}
/* helpers */
function daFoco(id) {
// da foco al elemento html con id='id'
document.getElementById(id).focus();
}
function seleccionaTXT(id) {
// selecciona el contenido del elemento html con id='id'
document.getElementById(id).focus();
document.getElementById(id).select();
}
function escribe(id, texto) {
// escribe el texto en el innerHTML del elemento html con id='id'
document.getElementById(id).innerHTML = texto;
}
function activarInterfaz() {
var tipo = averiguarRadio('Tipo');
document.getElementById("entrada").placeholder = "Escriba " + tipo;
document.getElementById("boton").disabled = false;
document.getElementById("entrada").disabled = false;
}
/* eventos */
function alCargar() {
document.getElementById("boton").disabled = true;
document.getElementById("entrada").disabled = true;
daFoco('entrada');
}
function alCambiar() {
activarInterfaz();
daFoco('entrada');
seleccionaTXT('entrada');
}
</script>
</head>
<body onload="alCargar();">
<form action="#">
<fieldset>
<legend>Interaccionar con un grupo de radio buttons del formulario</legend>
<label for="tipo">Tipo:</label>
<br/>
<input type="radio" name="Tipo" value="Numeros" onchange="alCambiar();" id="tipo" />Numeros
<br/>
<input type="radio" name="Tipo" value="Letras" onchange="alCambiar();" />Letras
<br/>
<input type="radio" name="Tipo" value="Mixto" onchange="alCambiar();" />Mixto
<br/>
<label for="entrada">Comentarios</label>
<input type="text" name="Entrada" id="entrada" placeholder="Ejija arriba ... " />
<input type="button" id="boton" onclick="Testear();" value="Realiza el test con las expresiones regulares" />
<div id="infoTexto"></div>
</br>
</fieldset>
</form>
</body>
</html>
Podéis verlo on-line haciendo clic aquí: Como “Interaccionar con un grupo de radio buttons del formulario”.
Espero que os sirva en vuestros desarrollos.
Hasta la próxima.
Pingback: Bonus Pack 2018: Recopilación de artículos de sospedia.net – jblanco.org
Pingback: Bonus Pack 2018: Recopilación de artículos de sospedia.net – Jose Blanco Vega