HTML e jQuery: Form per inserimento misure pacco
Questo codice crea un form HTML e jQuery che contiene cinque campi per la lunghezza, la larghezza, l’altezza, il peso e la quantità di ogni pacco, oltre a un pulsante “Aggiungi”. Quando l’utente clicca sul pulsante, il codice jQuery recupera i valori inseriti dall’utente, crea una nuova riga nella tabella e inserisce i valori nella nuova riga. Se la quantità inserita è maggiore di 1, il codice crea più righe.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form per inserimento misure pacco</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>Inserisci le misure</h1>
<form id="my-form">
<label for="lunghezza">Lunghezza:</label>
<input type="number" name="lunghezza" id="lunghezza" required>
<br>
<label for="larghezza">Larghezza:</label>
<input type="number" name="larghezza" id="larghezza" required>
<br>
<label for="altezza">Altezza:</label>
<input type="number" name="altezza" id="altezza" required>
<br>
<label for="peso">Peso:</label>
<input type="number" name="peso" id="peso" required>
<br>
<label for="quantita">Quantità:</label>
<input type="number" name="quantita" id="quantita" required>
<br>
<input type="button" value="Aggiungi" id="add-row">
</form>
<br>
<table id="my-table">
<tr>
<th>Lunghezza</th>
<th>Larghezza</th>
<th>Altezza</th>
<th>Peso</th>
<th>Quantità</th>
</tr>
</table>
<script>
$(document).ready(function() {
$("#add-row").click(function() {
// recupera i valori inseriti dall'utente
const lunghezza = $("#lunghezza").val();
const larghezza = $("#larghezza").val();
const altezza = $("#altezza").val();
const peso = $("#peso").val();
const quantita = $("#quantita").val();
// crea una nuova riga nella tabella con i valori inseriti
const table = $("#my-table");
for (let i = 0; i < quantita; i++) {
const row = $("<tr>");
const cell1 = $("<td>").text(lunghezza);
const cell2 = $("<td>").text(larghezza);
const cell3 = $("<td>").text(altezza);
const cell4 = $("<td>").text(peso);
const cell5 = $("<td>").text(quantita);
row.append(cell1, cell2, cell3, cell4, cell5);
table.append(row);
}
// resetta i campi del form
$("#my-form")[0].trigger("reset");
});
});
</script>
</body>
</html>
