Código HTML para crear un formulario con campos para los datos de envío, la cantidad y un menú desplegable con las opciones Sí y No, utilizando la librería SweetAlert2 para mostrar el formulario en una ventana emergente.
Este código creará un botón que, al hacer clic, abrirá una ventana emergente con el formulario de entrega. El usuario podrá introducir la fecha de entrega, la cantidad y seleccionar una de las opciones Sí o No.
Cuando el usuario confirme el formulario, los datos se devolverán como un objeto en la consola. Es posible personalizar aún más el formulario añadiendo atributos adicionales o modificando el estilo CSS.
<!DOCTYPE html>
<html>
<head>
<title>Form di consegna</title>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.1.5/dist/sweetalert2.min.css">
</head>
<body>
<button onclick="showForm()">Apri form</button>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.1.5/dist/sweetalert2.all.min.js"></script>
<script>
function showForm() {
Swal.fire({
title: 'Inserisci i dati di consegna',
html: `
<form id="delivery-form">
<label for="data-consegna">Data consegna:</label>
<input type="date" id="data-consegna" name="data-consegna" required><br><br>
<label for="quantita">Quantità:</label>
<input type="number" id="quantita" name="quantita" required><br><br>
<label for="conferma">Conferma:</label>
<select id="conferma" name="conferma" required>
<option value="si">Si</option>
<option value="no">No</option>
</select><br><br>
<input type="submit" value="Conferma">
</form>
`,
showCancelButton: true,
focusConfirm: false,
preConfirm: () => {
const form = document.getElementById('delivery-form');
const dataConsegna = form.elements['data-consegna'].value;
const quantita = form.elements['quantita'].value;
const conferma = form.elements['conferma'].value;
return {
dataConsegna: dataConsegna,
quantita: quantita,
conferma: conferma
};
}
}).then((result) => {
if (result.isConfirmed) {
// Esegui azione con i dati inseriti
console.log(result.value);
}
});
}
</script>
</body>
</html>
Sé el primero en comentar