Recorrer campos de un formulario con JQuery: Ejemplo práctico

por

Introducción

En la programación web, es común utilizar formularios para recopilar información de los usuarios. En este artículo, veremos cómo recorrer los campos de un formulario utilizando la biblioteca JQuery, una herramienta popular para simplificar el desarrollo web.

¿Qué es JQuery?

JQuery es una biblioteca de JavaScript que facilita la manipulación de HTML y la interacción con el usuario. Se utiliza ampliamente en el desarrollo web para crear animaciones, manipular formularios y mejorar la experiencia del usuario.

¿Cómo recorrer los campos de un formulario con JQuery?

Para recorrer los campos de un formulario con JQuery, primero debemos seleccionar el formulario utilizando su ID y luego utilizar la función each() para iterar sobre cada elemento del formulario.

Ejemplo práctico

En este ejemplo, tenemos un formulario con varios tipos de campos: texto, casillas de verificación, botones de radio y un campo oculto. Para recorrer estos campos y obtener su ID y valor, utilizaremos el siguiente código:

<!DOCTYPE html>
<html lang=«en»>

<head>
    <meta charset=«UTF-8»>
    <meta http-equiv=«X-UA-Compatible» content=«IE=edge»>
    <meta name=«viewport» content=«width=device-width, initial-scale=1.0»>
    <title>Ejemplo</title>
    <script language=«JavaScript» type=«text/javascript» src=«jquery.js» charset=«utf-8»></script>
    <script>
        $(document).ready(function () {
            $(«#frmDatos»).find(‘:input’).each(function () {
                var elemento = this;
                alert(«elemento.id=» + elemento.id + «, elemento.value=» + elemento.value);
            });
        });
    </script>
</head>

<body>
    <form id=«frmDatos»>
        <table width=«100%» border=«1» cellspacing=«0» cellpadding=«0»>
            <tr>
                <td>Input 1</td>
                <td><input name=«txtinp1» id=«txtinp1» type=«text» value=«Hola Mundo» /></td>
            </tr>
            <tr>
                <td>Input 2</td>
                <td><input name=«chkInp2» type=«checkbox» id=«chkInp2» value=«valor del check» checked /></td>
            </tr>
            <tr>
                <td>Input 3</td>
                <td><input name=«optInp3» type=«radio» id=«optInp3» value=«valor 123» checked /></td>
            </tr>
            <tr>
                <td>Input 4 (Oculto)</td>
                <td><input name=«hidden_inp4» type=«hidden» id=«hidden_inp4» value=«valor oculto» /></td>
            </tr>
            <tr>
                <td>Input 5 </td>
                <td><select id=«cboLista» name=«cboLista»>
                        <option value=«1»>1</option>
                        <option value=«2»>2</option>
                    </select></td>
            </tr>
        </table>
        </table>
    </form>
</body>

</html>

En resumen, utilizamos la función $(document).ready() para asegurarnos de que el formulario se haya cargado completamente antes de manipularlo. Luego, utilizamos la función find(‘:input’) para seleccionar todos los elementos del formulario. Finalmente, utilizamos la función each() para iterar sobre cada elemento del formulario y mostrar su ID y valor mediante una alerta.

Conclusión

Recorrer los campos de un formulario con JQuery es una tarea sencilla y útil en el desarrollo web. Al utilizar la función each(), podemos iterar sobre cada elemento del formulario y manipularlo según nuestras necesidades. Esperamos que este ejemplo práctico te haya ayudado a comprender mejor cómo utilizar JQuery en tus proyectos web.

Deja un comentario