Interaccionar con un grupo de radio buttons del formulario

Impactos: 8318

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.

2 comentarios

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.