Esercizi Form in JavaScript
Codegrind Team•Jul 12 2024
Ecco degli esercizi con soluzione per praticare la gestione dei form in JavaScript.
Esercizio 1: Validazione di un Form
Validare che tutti i campi di input di un form siano riempiti prima di inviarlo.
<!DOCTYPE html>
<html>
<head>
<title>Validazione di un Form</title>
</head>
<body>
<form id="form1">
<input type="text" id="nome" placeholder="Nome" />
<input type="text" id="email" placeholder="Email" />
<button type="submit">Invia</button>
</form>
<p id="messaggio"></p>
<script>
document
.getElementById("form1")
.addEventListener("submit", function (event) {
var nome = document.getElementById("nome").value;
var email = document.getElementById("email").value;
var messaggio = document.getElementById("messaggio");
if (nome === "" || email === "") {
messaggio.textContent = "Tutti i campi devono essere riempiti.";
event.preventDefault();
} else {
messaggio.textContent = "";
}
});
</script>
</body>
</html>
Esercizio 2: Mostrare un Messaggio di Successo
Mostrare un messaggio di successo dopo che un form è stato inviato correttamente.
<!DOCTYPE html>
<html>
<head>
<title>Messaggio di Successo</title>
</head>
<body>
<form id="form2">
<input type="text" id="username" placeholder="Username" />
<input type="password" id="password" placeholder="Password" />
<button type="submit">Login</button>
</form>
<p id="successo"></p>
<script>
document
.getElementById("form2")
.addEventListener("submit", function (event) {
event.preventDefault();
var successo = document.getElementById("successo");
successo.textContent = "Login effettuato con successo!";
});
</script>
</body>
</html>
Esercizio 3: Abilitare/Disabilitare il Pulsante di Invio
Abilitare o disabilitare il pulsante di invio in base alla validitĂ dei campi del form.
<!DOCTYPE html>
<html>
<head>
<title>Abilitare/Disabilitare il Pulsante di Invio</title>
</head>
<body>
<form id="form3">
<input type="text" id="firstName" placeholder="Nome" />
<input type="text" id="lastName" placeholder="Cognome" />
<button type="submit" id="submitBtn" disabled>Invia</button>
</form>
<script>
var form = document.getElementById("form3");
var firstName = document.getElementById("firstName");
var lastName = document.getElementById("lastName");
var submitBtn = document.getElementById("submitBtn");
form.addEventListener("input", function () {
if (firstName.value !== "" && lastName.value !== "") {
submitBtn.disabled = false;
} else {
submitBtn.disabled = true;
}
});
</script>
</body>
</html>
Esercizio 4: Formattazione di un Numero di Telefono
Formattare automaticamente un numero di telefono durante l'input.
<!DOCTYPE html>
<html>
<head>
<title>Formattazione di un Numero di Telefono</title>
</head>
<body>
<form id="form4">
<input type="text" id="telefono" placeholder="Numero di telefono" />
</form>
<script>
document
.getElementById("telefono")
.addEventListener("input", function (event) {
var input = event.target;
var value = input.value.replace(/\D/g, "");
var formattedValue = value;
if (value.length > 3 && value.length <= 6) {
formattedValue = value.slice(0, 3) + "-" + value.slice(3);
} else if (value.length > 6) {
formattedValue =
value.slice(0, 3) +
"-" +
value.slice(3, 6) +
"-" +
value.slice(6);
}
input.value = formattedValue;
});
</script>
</body>
</html>
Esercizio 5: Calcolo in Tempo Reale
Calcolare e mostrare il risultato di un'operazione aritmetica in tempo reale mentre l'utente inserisce i dati.
<!DOCTYPE html>
<html>
<head>
<title>Calcolo in Tempo Reale</title>
</head>
<body>
<form id="form5">
<input type="number" id="num1" placeholder="Numero 1" />
<input type="number" id="num2" placeholder="Numero 2" />
<p>Risultato: <span id="risultato">0</span></p>
</form>
<script>
var num1 = document.getElementById("num1");
var num2 = document.getElementById("num2");
var risultato = document.getElementById("risultato");
function aggiornaRisultato() {
var valore1 = parseFloat(num1.value) || 0;
var valore2 = parseFloat(num2.value) || 0;
risultato.textContent = valore1 + valore2;
}
num1.addEventListener("input", aggiornaRisultato);
num2.addEventListener("input", aggiornaRisultato);
</script>
</body>
</html>
Esercizio 6: Form Dinamico
Aggiungere dinamicamente campi di input a un form al clic di un pulsante.
<!DOCTYPE html>
<html>
<head>
<title>Form Dinamico</title>
</head>
<body>
<form id="form6">
<div id="campi"></div>
<button type="button" onclick="aggiungiCampo()">Aggiungi Campo</button>
<button type="submit">Invia</button>
</form>
<script>
function aggiungiCampo() {
var campi = document.getElementById("campi");
var nuovoCampo = document.createElement("input");
nuovoCampo.type = "text";
nuovoCampo.placeholder = "Campo aggiunto";
campi.appendChild(nuovoCampo);
}
</script>
</body>
</html>
Esercizio 7: Mostrare/Nascondere Campi di Input
Mostrare o nascondere campi di input basati sulla selezione di un'opzione.
<!DOCTYPE html>
<html>
<head>
<title>Mostrare/Nascondere Campi di Input</title>
</head>
<body>
<form id="form7">
<select id="selezione" onchange="mostraNascondiCampi()">
<option value="none">Seleziona un'opzione</option>
<option value="opzione1">Opzione 1</option>
<option value="opzione2">Opzione 2</option>
</select>
<div id="campoOpzione1" style="display:none;">
<input type="text" placeholder="Campo Opzione 1" />
</div>
<div id="campoOpzione2" style="display:none;">
<input type="text" placeholder="Campo Opzione 2" />
</div>
</form>
<script>
function mostraNascondiCampi() {
var selezione = document.getElementById("selezione").value;
var campoOpzione1 = document.getElementById("campoOpzione1");
var campoOpzione2 = document.getElementById("campoOpzione2");
campoOpzione1.style.display =
selezione === "opzione1" ? "block" : "none";
campoOpzione2.style.display =
selezione === "opzione2" ? "block" : "none";
}
</script>
</body>
</html>
Esercizio 8: Popolare un Form con Dati Predefiniti
Popolare un form con dati predefiniti al caricamento della pagina.
<!DOCTYPE html>
<html>
<head>
<title>Popolare un Form con Dati Predefiniti</title>
</head>
<body>
<form id="form8">
<input type="text" id="nome" placeholder="Nome" />
<input type="email" id="email" placeholder="Email" />
<button type="submit">Invia</button>
</form>
<script>
window.onload = function () {
document.getElementById("nome").value = "Mario Rossi";
document.getElementById("email").value = "mario.rossi@example.com";
};
</script>
</body>
</html>