HTML-Code zur Erstellung eines Formulars mit Eingabefeldern für Lieferdaten, Menge und einer Auswahlmöglichkeit mit den Optionen Ja und Nein, unter Verwendung der SweetAlert2-Bibliothek zur Anzeige des Formulars in einem Popup.
Dieser Code erstellt einen Button, der beim Klicken ein Popup mit dem Lieferformular öffnet. Der Benutzer kann das Lieferdatum, die Menge eingeben und eine der Optionen Ja oder Nein auswählen.
Wenn der Benutzer das Formular bestätigt, werden die Daten als Objekt in der Konsole zurückgegeben. Sie können das Formular weiter anpassen, indem Sie zusätzliche Attribute hinzufügen oder den CSS-Stil ändern.
<!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>
Hinterlasse jetzt einen Kommentar