El siguiente código incluye un formulario con un datalist y un script para manejar el evento de envío del formulario, obteniendo el valor seleccionado y mostrándolo en el HTML.
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Input con Datalist</<span class="hljs-name">title>
</<span class="hljs-name">head>
<body>
<formid="myForm">
<labelfor="category">Selecciona una categoría:</<span class="hljs-name">label>
<inputlist="category"id="category-input"name="category"placeholder="Elige o escribe una categoría">
<datalistid="category">
<optionvalue="Categoría_1"></<span class="hljs-name">option>
<optionvalue="Categoría_2"></<span class="hljs-name">option>
<optionvalue="Categoría_3"></<span class="hljs-name">option>
<optionvalue="Categoría_4"></<span class="hljs-name">option>
<optionvalue="Categoría_5"></<span class="hljs-name">option>
</<span class="hljs-name">datalist>
<buttontype="submit">Enviar</<span class="hljs-name">button>
</<span class="hljs-name">form>
<pid="output"></<span class="hljs-name">p>
<script>
// Añade un listener al evento de submit del formulario
document.getElementById('myForm').addEventListener('submit', function(event) {
event.preventDefault(); // Previene el envío del formulario
const categoryValue = document.getElementById('category-input').value; // Obtiene el valor del input
document.getElementById('output').textContent = `El valor seleccionado es: ${categoryValue}`; // Muestra el valor en el párrafo
});
</<span class="hljs-name">script>
</<span class="hljs-name">body>
</<span class="hljs-name">html>
Explicación del Código:
-
Estructura HTML Básica:
- Se define una estructura HTML básica con un
formque contiene unlabel, uninputcondatalisty un botón de envío.
- Se define una estructura HTML básica con un
-
Formulario y Datalist:
- El
inputconlist="category"está asociado aldatalistconid="category", que contiene varias opciones predefinidas.
- El
-
JavaScript:
- Se añade un event listener al formulario para interceptar el evento de envío (
submit). event.preventDefault()se usa para evitar que el formulario se envíe y recargue la página.- Se obtiene el valor seleccionado o escrito en el
inputcondocument.getElementById('category-input').value. - El valor obtenido se muestra en un párrafo (
) conid="output".
- Se añade un event listener al formulario para interceptar el evento de envío (
document.getElementById('myForm').addEventListener('submit', function (event) {
event.preventDefault(); // Previene el envío del formulario
const categoryValue = document.getElementById('category-input').value;
document.getElementById('output').textContent = `El valor seleccionado es: ${categoryValue}`;
});
Cómo Funciona:
- El usuario selecciona o escribe una categoría en el
inputasociado aldatalist.
- Al hacer clic en el botón “Enviar”, el evento de envío del formulario es interceptado por el script.
- El script obtiene el valor del
inputy lo muestra en el párrafo debajo del formulario.
Curso de Backend con Node.js: API REST con Express.js
0 Comentarios
para escribir tu comentario
