Obtención de campos de un formulario (Javascript)

codehell (25)in #tutoriales • 7 years ago

A veces, obtener los campos de un formulario no es una tarea tan obvia, sobre todo si se trata de checkboxes, radios o selects.

Aquí os traigo un ejercicio de ejemplo de como obtener los datos de manera sencilla con JavaScript:

Esté es el código de del HTML:

<!doctype html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 1em;
        }
    </style>
</head>
<body>
    <div id="main">

        <form name="test-form">

            Escribe un texto <input type="text" name="name">

            <br>

            <input type="checkbox" name="animal" value="cat" checked> Cat
            <input type="checkbox" name="animal" value="dog"> Dog
            <input type="checkbox" name="animal" value="bird"> Bird

            <br>

            <input type="radio" name="color" value="red"> Red
            <input type="radio" name="color" value="blue"> Blue
            <input type="radio" name="color" value="black"> Black

            <br>

            <select name="place">
                <option value="1">Mountain</option>
                <option value="2">Countryside</option>
                <option value="2">Beach</option>
            </select>

            <br>

            <button id="button" type="button">Submit</button>
        </form>

    </div>
    <script src="script.js"></script>
</body>
</html>

Y el archivo JavaScript script.js contendrá este codigo:

//Esperamos a que cargue la pagina con el evento onload
window.onload = function () {

  let button = document.getElementById('button')

  // Recoger el evento de click del boton
  button.addEventListener('click', action, false)

  function action () {

    let res = '' // Variable para almacenar el resultado del formulario

    let input = document['test-form'].name;
    let animal = document['test-form'].animal //Checkboxes
    let color = document['test-form'].color // Radio buttons
    let place = document['test-form'].place // Selects

    //Obtener el valor del campo input
    res += input.value + ' '

    // Obtener Chekboxes selecionados
    for (let i = 0; i <= animal.length - 1; i++) {
      if (animal[i].checked) {
        res += animal[i].value + ' '
      }
    }

    // Obtener Radio Buttons Seleccionados
    for (let i = 0; i <= color.length - 1; i++) {
      if (color[i].checked) {
        res += color[i].value + ' '
      }
    }

    // Obtener el Select seleccionado
    res += place.options[place.selectedIndex].text

    // Mostar por consola
    console.log(res);
  }
}

Espero que os sea de ayuda.

#programacion #javascript #formularios