I have a HTML table and with 6 input boxes that requires user to enter data and as the user clicks on the input box it show save so when the the user the user refresh/reloads or closes the web-page and opens the web-page back up the data must show on what he entered previously.
I tried the simple method using local storage to get data entered by user to save and display for the first input box ("FY") but doesn't work because it get into conflict when i try to get and save the data from same place. so just to see if it work made the line of code to show under the FY box if when the user enters any data it will save and show but not working. Any help will appreciated
function startTime() {
var today = new Date();
// 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
var suffixes = ['', 'st', 'nd', 'rd', 'th', 'th', 'th', 'th', 'th', 'th', 'th', 'th', 'th', 'th', 'th', 'th', 'th', 'th', 'th', 'th', 'th', 'st', 'nd', 'rd', 'th', 'th', 'th', 'th', 'th', 'th', 'th', 'st', 'nd', 'rd'];
var weekday = new Array(7);
weekday[0] = "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";
weekday[3] = "Wednesday";
weekday[4] = "Thursday";
weekday[5] = "Friday";
weekday[6] = "Saturday";
var month = new Array(12);
month[0] = "January";
month[1] = "February";
month[2] = "March";
month[3] = "April";
month[4] = "May";
month[5] = "June";
month[6] = "July";
month[7] = "August";
month[8] = "September";
month[9] = "October";
month[10] = "November";
month[11] = "December";
document.getElementById('txt').innerHTML = (weekday[today.getDay()] + ',' + " " + today.getDate() + '<sup>' + suffixes[today.getDate()] + '</sup>' + " " + month[today.getMonth()] + " " + today.getFullYear() + " Time: " + today.toLocaleTimeString());
t = setTimeout(function() {
startTime()
}, 500);
}
// Check browser support
if (typeof(Storage) !== "undefined") {
// Store
localStorage.setItem("FY", document.getElementById("FY"));
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("FY");
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
}.center {
margin-left: auto;
margin-right: auto;
}
.aligned {
display: flex;
align-items: center;
}
span {
padding: 10px;
}
.image {
display: flex;
align-items: center;
}
span {
padding: 10px;
}
.corner {
display: flex;
align-items: right;
}
span {
padding: 10px;
}
* {
box-sizing: border-box;
}
.row {
display: flex;
margin-left: 320px;
margin-right: 770px;
margin-top: -748px;
}
th,
td {
border: 1.5px solid black;
border-collapse: collapse;
text-align: center;
padding: 1.5px
}
.html2canvas {
width: 1700px !important;
height: 1700px !important;
}
table tr {
background: #ffdead;
}
table tr:nth-of-type(2) {
background: white;
}
text-align: center;
body {
background-color: #66b032;
}
h1,
th,
td {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
sup {
vertical-align: super;
font-size: smaller;
}<div class="section">
<form name="apSafety" id="" apSafety "" method="post" action="" enctype="multipart/form-data" onsubmit="return validateChecklistForm()">
<div class="aligned">
<span>   <img src="Wal.png" width="120" height="130" alt=""></span>                  
<b><h1>      
        Woodland DC </h1></b><b><h1 style="font-size:70px;"> Safety Stats</h1></b>
</div>
<table class="center">
<thead>
<tr>
<th style="text-align:center;font-weight: bold;font-size:25px;"><br>April Daily<br>Stats<br> <br></th>
<th style="text-align:center;font-weight: bold;font-size:25px;"><br>FY Goal %  <br></th>
<th style="text-align:center;font-weight: bold;font-size:25px;"><br>OIR  <br></th>
<th style="text-align:center;font-weight: bold;font-size:25px;"><br>Recordable Incidents  <br></th>
<th style="text-align:center;font-weight: bold;font-size:25px;"><br>PIT Incidents  <br></th>
<th style="text-align:center;font-weight: bold;font-size:25px;"><br>Total Incidents  <br></th>
<th style="text-align:center;font-weight: bold;font-size:25px;"><br>Days OIR Free  <br></th>
</tr>
</thead>
<tr>
<td>
<!-- Today's Date is : <label id="text"></label>-->
<div id="txt" style="text-align:center;font-weight: bold;font-size:27px;"></div>
 
</td>
<td>
 
<label for="FY"></label><br><input style="background-color: #151313;text-align:center;height:80px;width:250px;color: #FFFFFF;font-weight: bold;font-size:65px;" type="text" id="FY" name="FY" value=" "><br>
<div id="result"></div>
 
</td>
<td>
 
<label for="OIR"></label><br><input style="background-color: #339214;text-align:center;height:80px;width:250px;color: ##151313;font-weight: bold;font-size:65px;" type="text" id="OIR" name="OIR" value=" "><br>  
</td>
<td>
 
<label for="RI"></label><br><input style="text-align:center;height:80px;width:250px;font-weight: bold;font-size:65px;" type="text" id="RI" name="RI" value=" "><br>  
</td>
<td>
 
<label for="PIT"></label><br><input style="text-align:center;height:80px;width:250px;font-weight: bold;font-size:65px;" type="text" id="PIT" name="PIT" value=" "><br>  
</td>
<td>
 
<label for="TI"></label><br><input style="text-align:center;height:80px;width:250px;font-weight: bold;font-size:65px;" type="text" id="TI" name="TI" value=" "><br>  
</td>
<td>
 
<label for="daysFree"></label><br><input style="text-align:center;height:80px;width:250px;font-weight: bold;font-size:65px;" type="text" id="daysFree" name="daysFree" value=" "><br>  
</td>
</tr>
</table>
<b><h1 style="font-size:50px;">              Push instead of Pull</h1></b>
<div class="image">
<span>
        <img src="Safety1.png" width="450" height="500" alt="">           
     <img src="Safety2.png" width="850" height="450" alt=""></span>
</div>
<div class="corner">
<span>
            
            
            
            
            
            
            
            
 <img src="Walls.png" width="255" height="75" alt=""></span>
</div>
</form>
</div>
