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.
Congratulations @codehell! You received a personal award!
You can view your badges on your Steem Board and compare to others on the Steem Ranking
Vote for @Steemitboard as a witness to get one more award and increased upvotes!
Downvoting a post can decrease pending rewards and make it less visible. Common reasons:
Submit