I have this code is done just need the javascript part to save the data into the
ID: 3731482 • Letter: I
Question
I have this code is done just need the javascript part to save the data into the website by using local storage getItme and setItem
HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/main.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<div class="tab">
<button class="tablinks">Forms</button>
<button class="tablinks">Record(s)</button>
</div>
<div id="Forms" class="tabcontent">
<h3>Forms</h3>
<form>
<div class="container">
<label for="fname"><b></b></label>
<input type="text" placeholder="First Name" name="fname" required><br><br>
<label for="lname"><b></b></label>
<input type="text" placeholder="Last Name" name="lname" required><br><br>
<label for="uname"><b></b></label>
<input type="text" placeholder="Email@address.com" name="uname" required><br><br>
<label for="psw"><b></b></label>
<input type="text" placeholder="www.website.com" name="psw" required><br><br>
<h4>Terms & Conditions</h4>
<label>
<input type="checkbox" checked="checked" name="condtion"> I accept the Terms and Conditions<br>
</label><br>
<button type="submit">Submit Form</button><br>
<button type="button" class="cancelbtn">Clear Form</button>
</div>
</form>
</div>
<div id="Record" class="tabcontent">
<h3></h3>
<p></p>
</div>
</body>
</html>
CSS:
body {font-family: Arial;}
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
.tab button:hover {
background-color: #ddd;
}
.tab button.active {
background-color: #ccc;
}
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
Explanation / Answer
i have created a js file with the function savedata()
function saveData() {
if(typeof(Storage) !== "undefined") {
var firstname = document.getElementsByName("fname")[0].value;
var lastname = document.getElementsByName("lname")[0].value;
var emailid = document.getElementsByName("uname")[0].value;
localStorage.setItem("firstname", firstname);
localStorage.setItem("lastname", lastname);
localStorage.setItem("emailID", emailid);
var string ="";
document.getElementById("Record").innerHTML = string.concat("FirstName: ", localStorage.getItem("firstname"), " LastName: ", localStorage.getItem("lastname"), " EmailID: ",localStorage.getItem("emailID"));
} else {
document.getElementById("Record").innerHTML = "Sorry, your browser does not support web storage...";
}
}
the function will reteive the value enetetrd for firtname, lastname and emaiid and will print all the data in the div with id ="Record" created in the html page at end