HTML pour créer un formulaire avec des champs pour les informations de livraison, la quantité et un sélecteur avec les options Oui et Non, en utilisant la bibliothèque SweetAlert2 pour afficher le formulaire dans une fenêtre contextuelle.
Ce code créera un bouton qui, lorsqu’il est cliqué, ouvrira une fenêtre pop-up avec le formulaire de livraison. L’utilisateur pourra saisir la date de livraison, la quantité et sélectionner l’une des options Oui ou Non.
Lorsque l’utilisateur confirme le formulaire, les données seront renvoyées sous forme d’objet dans la console. Il est possible de personnaliser davantage le formulaire en ajoutant des attributs supplémentaires ou en modifiant le style 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>
Soyez le premier à commenter