HTML code to create a form with input for delivery data, quantity, and a select with Yes and No options, using the SweetAlert2 library to display the form in a popup.
This code will create a button that, when clicked, will open a popup with the delivery form. The user can enter the delivery date, quantity, and select one of the Yes or No options.
When the user confirms the form, the data will be returned as an object in the console. You can further customize the form by adding additional attributes or modifying the CSS style.
<!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>
Â
Â
Be the first to comment