Posts
Step 1: Create 3 file in the name of
index.html
form.js
form.css
Step 2: below are the code for 3 files
Step 3: once created, open index.html in browser.
Type some thing in field. CLICK SAVE. close the browser, open the browser again and type the index.html url. you can see the previous typed msg.
index.html
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="form.css" />
<title>Save Later</title>
</head>
<body>
<div class="alert"></div>
<form id="save-later-form">
<h3>Simple Save Later Form</h3>
<label for="full-name">Full Name</label>
<input type="text" name="full-name" id="full-name" />
<label for="email">Email</label>
<input type="email" name="email" id="email" />
<label for="phone">Phone Number</label>
<input type="tel" name="phone" id="phone" maxlength="11" />
<label for="dob">Date Of Birth</label>
<input type="date" name="dob" id="dob" />
<label for="security">Security Question</label>
<select name="security" id="security" tabindex="0">
<option value="">Select a question</option>
<option value="best-friend">What's your best friend's name?</option>
<option value="pet">What's the name of your first pet?</option>
<option value="spouse">Where did you meet your spouse?</option>
</select>
<label for="security-answer">Answer</label>
<input type="text" name="security-answer" id="security-answer" />
<label for="description">Description</label>
<textarea
name="description"
id="description"
placeholder="Describe yourself in 100 words"
></textarea>
<button type="submit" id="submit">SUBMIT</button>
<button type="submit" id="save">SAVE</button>
</form>
</body>
<script src="form.js"></script>
</html>
form.js
// form.js
const formId = "save-later-form"; // ID of the form
const url = location.href; // href for the page
const formIdentifier = `${url} ${formId}`; // Identifier used to identify the form
const saveButton = document.querySelector("#save"); // select save button
const alertBox = document.querySelector(".alert"); // select alert display div
let form = document.querySelector(`#${formId}`); // select form
let formElements = form.elements; // get the elements in the form
/**
* This function gets the values in the form
* and returns them as an object with the
* [formIdentifier] as the object key
* @returns {Object}
*/
const getFormData = () => {
let data = { [formIdentifier]: {} };
for (const element of formElements) {
if (element.name.length > 0) {
data[formIdentifier][element.name] = element.value;
}
}
return data;
};
saveButton.onclick = event => {
event.preventDefault();
data = getFormData();
localStorage.setItem(formIdentifier, JSON.stringify(data[formIdentifier]));
const message = "Form draft has been saved!";
displayAlert(message);
};
/**
* This function displays a message
* on the page for 1 second
*
* @param {String} message
*/
const displayAlert = message => {
alertBox.innerText = message;
alertBox.style.display = "block";
setTimeout(function() {
alertBox.style.display = "none";
}, 1000);
};
/**
* This function populates the form
* with data from localStorage
*
*/
const populateForm = () => {
if (localStorage.key(formIdentifier)) {
const savedData = JSON.parse(localStorage.getItem(formIdentifier)); // get and parse the saved data from localStorage
for (const element of formElements) {
if (element.name in savedData) {
element.value = savedData[element.name];
}
}
const message = "Form has been refilled with saved data!";
displayAlert(message);
}
};
document.onload = populateForm(); // populate the form when the document is loadedd
form.css
/* form.css */
@import url("https://fonts.googleapis.com/css?family=Nunito");
*,
*:before,
*:after {
box-sizing: border-box;
}
body {
background-color: whitesmoke;
font-family: "Nunito", sans-serif;
}
h3,
label {
text-transform: uppercase;
}
.alert {
width: 80vw;
margin: 2rem auto;
background-color: #d4edda;
color: #155724;
padding: 0.75rem 1.25rem;
border-radius: 0.25rem;
display: none;
}
#save-later-form {
position: relative;
width: 80vw;
margin: 3rem auto;
background-color: white;
padding: 1rem 2rem;
border-radius: 3px;
}
label {
margin: 1rem 0 0;
display: block;
}
input {
font-size: 0.875em;
width: 100%;
height: 40px;
padding: 0px 15px 0px 15px;
background: whitesmoke;
outline: none;
color: #000;
border: none;
border-radius: 3px;
}
input:hover {
background: whitesmoke;
color: black;
}
button[type="submit"] {
background-color: #349bab;
width: calc((100% / 2) - 3px);
display: inline-block;
color: white;
font-weight: 600;
height: 2.8rem;
border: none;
font-family: Nunito;
font-size: 1rem;
cursor: pointer;
outline: none;
}
#save {
background-color: #30383f;
}
select {
width: 100%;
height: 40px;
background: whitesmoke;
border: none;
padding: 0 0 0 0.5rem;
outline: none;
}
select:focus,
input:focus,
textarea:focus {
outline: #349bab solid 1px;
}
textarea {
width: 100%;
max-width: 100%;
height: 110px;
max-height: 110px;
padding: 15px;
margin: 0 0 1rem 0;
background: whitesmoke;
outline: none;
color: black;
font-size: 0.875em;
border: none;
}
/* ========MEDIA QUERIES======== */
@media screen and (min-width: 768px) {
#save-later-form,
.alert {
width: 60vw;
}
}
@media screen and (min-width: 992px) {
#save-later-form,
.alert {
width: 40vw;
}
}
Sample Output
Sample Content2
