andrea/leanwebclub
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add "Form Autosave Single Entry"

Browse source
This commit is contained in:
Andrea Fazzi 2024-08-13 07:20:56 +02:00
parent 66c3b896ba
commit a8fc357619
4 changed files with 65 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
js-essentials/form-autosave-single-entry/README.md Normal file
View file

@ -0,0 +1,9 @@
# Form Autosave
We're going to write a script that automatically saves form field data
as a user types.
# Reference
* https://leanwebclub.com/learn/js-essentials/project-form-autosave/

32
js-essentials/form-autosave-single-entry/index.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
<title>Form Autosave</title>
</head>
<body>
<h1>Form Autosave</h1>
<form id="save-me">
<label for="name">Name</label>
<input type="text" name="name" id="name">
<label for="address">Address</label>
<input type="text" id="address">
<label for="email">Email</label>
<input type="email" id="email">
<label for="more">Additional thoughts?</label>
<textarea name="more" id="more"></textarea>
<p>
<button type="submit">Submit</button>
</p>
</form>
<script src="script.js"></script>
</body>
</html>

23
js-essentials/form-autosave-single-entry/script.js Normal file
View file

@ -0,0 +1,23 @@
let selector = '#save-me input, #save-me textarea';
let form = document.querySelector('form#save-me');
let formElements = document.querySelectorAll(selector);
let prefix='autosave_';
let entryName = prefix+form.id;
let entry = JSON.parse(localStorage.getItem(entryName)) || {};
window.addEventListener('input', function (event) {
if (event.target.matches(selector)) {
entry[event.target.id] = event.target.value;
localStorage.setItem(entryName, JSON.stringify(entry));
}
});
form.addEventListener('submit', function () {
localStorage.removeItem(entryName);
});
formElements.forEach( function (element) {
let value = entry[element.id];
if (value != null) element.value = value;
});

1
js-essentials/main.go
View file

@ -24,6 +24,7 @@ func main() {
mux.Handle("GET /monster-game/", http.StripPrefix("/monster-game", http.FileServer(http.Dir("monster-game")))) mux.Handle("GET /monster-game/", http.StripPrefix("/monster-game", http.FileServer(http.Dir("monster-game"))))
mux.Handle("GET /monster-game-score/", http.StripPrefix("/monster-game-score", http.FileServer(http.Dir("monster-game-score")))) mux.Handle("GET /monster-game-score/", http.StripPrefix("/monster-game-score", http.FileServer(http.Dir("monster-game-score"))))
mux.Handle("GET /form-autosave/", http.StripPrefix("/form-autosave", http.FileServer(http.Dir("form-autosave")))) mux.Handle("GET /form-autosave/", http.StripPrefix("/form-autosave", http.FileServer(http.Dir("form-autosave"))))
mux.Handle("GET /form-autosave-single-entry/", http.StripPrefix("/form-autosave-single-entry", http.FileServer(http.Dir("form-autosave-single-entry"))))
log.Println("Start the web server...") log.Println("Start the web server...")
err := http.ListenAndServe(":8080", mux) err := http.ListenAndServe(":8080", mux)