Codice HTML per creare un form con input per i dati di consegna, la quantità e una select con le opzioni Si e No con libreria SweetAlert2 per visualizzare il form in un popup.
Questo codice creerà un pulsante che, quando cliccato, aprirà un popup con il form di consegna. L’utente potrà inserire la data di consegna, la quantità e selezionare una delle opzioni Si o No.
Quando l’utente conferma il form, i dati verranno restituiti come oggetto nella console. È possibile personalizzare ulteriormente il form aggiungendo attributi aggiuntivi o modificando lo stile 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>
Commenta per primo