3E e 3I Sia: inserimento dati in un modulo form e visualizzazione in un'altra pagina con Local Storage
Un esempio base di un modulo HTML con JavaScript. Al submit del modulo, i dati verranno visualizzati su un'altra pagina. Useremo `localStorage` per memorizzare i dati temporaneamente e poi li mostreremo nella seconda pagina.
### Modulo HTML
**index.html** (la pagina con il modulo):
```html
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modulo di Inserimento</title>
</head>
<body>
<h1>Compila il Modulo</h1>
<form id="dataForm" onsubmit="saveData(event)">
<label for="name">Nome:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<input type="submit" value="Invia">
</form>
<script>
function saveData(event) {
event.preventDefault(); // Previene il comportamento di default del modulo
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
// Salva i dati in localStorage
localStorage.setItem('name', name);
localStorage.setItem('email', email);
// Redirige alla pagina di visualizzazione
window.location.href = 'display.html';
}
</script>
</body>
</html>
```
### Pagina di Visualizzazione
**display.html** (la pagina che visualizza i dati):
```html
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Visualizza Dati</title>
</head>
<body>
<h1>Dati Inseriti</h1>
<p id="output"></p>
<script>
// Recupera i dati da localStorage
const name = localStorage.getItem('name');
const email = localStorage.getItem('email');
// Mostra i dati nella pagina
document.getElementById('output').innerText = `Nome: ${name}, Email: ${email}`;
</script>
</body>
</html>
```
### Spiegazione delle Istruzioni Utilizzate
1. **HTML Form**:
- Utilizziamo un elemento `<form>` per creare un modulo con due campi di input: "Nome" e "Email".
2. **onSubmit**:
- La funzione `saveData(event)` è chiamata quando il modulo viene inviato. L’attributo `onsubmit` nel tag `<form>` ci permette di eseguire il JavaScript invece di inviare il modulo in modo tradizionale.
3. **event.preventDefault()**:
- Questo metodo è usato per prevenire che il modulo venga inviato in modo normale e la pagina venga ricaricata. Vogliamo gestire noi stessi il salvataggio dei dati.
4. **localStorage**:
- Utilizziamo `localStorage.setItem()` per memorizzare i dati del modulo che sono stati inseriti. `localStorage` ci consente di salvare dati in modo persistente nel browser.
5. **Redirezione alla Pagina di Visualizzazione**:
- `window.location.href = 'display.html';` cambia la pagina corrente a `display.html`.
6. **Recupero Dati**:
- Nella pagina `display.html`, usiamo `localStorage.getItem()` per recuperare i dati memorizzati e mostrarli all'utente.
### Modulo HTML
**index.html** (la pagina con il modulo):
```html
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modulo di Inserimento</title>
</head>
<body>
<h1>Compila il Modulo</h1>
<form id="dataForm" onsubmit="saveData(event)">
<label for="name">Nome:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<input type="submit" value="Invia">
</form>
<script>
function saveData(event) {
event.preventDefault(); // Previene il comportamento di default del modulo
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
// Salva i dati in localStorage
localStorage.setItem('name', name);
localStorage.setItem('email', email);
// Redirige alla pagina di visualizzazione
window.location.href = 'display.html';
}
</script>
</body>
</html>
```
### Pagina di Visualizzazione
**display.html** (la pagina che visualizza i dati):
```html
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Visualizza Dati</title>
</head>
<body>
<h1>Dati Inseriti</h1>
<p id="output"></p>
<script>
// Recupera i dati da localStorage
const name = localStorage.getItem('name');
const email = localStorage.getItem('email');
// Mostra i dati nella pagina
document.getElementById('output').innerText = `Nome: ${name}, Email: ${email}`;
</script>
</body>
</html>
```
### Spiegazione delle Istruzioni Utilizzate
1. **HTML Form**:
- Utilizziamo un elemento `<form>` per creare un modulo con due campi di input: "Nome" e "Email".
2. **onSubmit**:
- La funzione `saveData(event)` è chiamata quando il modulo viene inviato. L’attributo `onsubmit` nel tag `<form>` ci permette di eseguire il JavaScript invece di inviare il modulo in modo tradizionale.
3. **event.preventDefault()**:
- Questo metodo è usato per prevenire che il modulo venga inviato in modo normale e la pagina venga ricaricata. Vogliamo gestire noi stessi il salvataggio dei dati.
4. **localStorage**:
- Utilizziamo `localStorage.setItem()` per memorizzare i dati del modulo che sono stati inseriti. `localStorage` ci consente di salvare dati in modo persistente nel browser.
5. **Redirezione alla Pagina di Visualizzazione**:
- `window.location.href = 'display.html';` cambia la pagina corrente a `display.html`.
6. **Recupero Dati**:
- Nella pagina `display.html`, usiamo `localStorage.getItem()` per recuperare i dati memorizzati e mostrarli all'utente.
Commenti
Posta un commento