I have a HTML table and with question and 8 SELECT ROW OR SELECT from user that requires user to select data and as the user selects on the selection it should save so when the the user refresh/reloads or closes the web-page and opens the web-page back up the data must show on what he selected previously.
I tried the simple method using local storage to get data selected by user to save and display for the first select_row 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 what i did on my work i made the line of code to show under scripts if when the user selects
let doc, htm, bod, nav, M, I, S, Q, hC, aC, rC, tC; // for use on other loads
addEventListener('load', () => {
doc = document;
htm = doc.documentElement;
bod = doc.body;
nav = navigator;
M = tag => doc.createElement(tag);
I = id => doc.getElementById(id);
mobile = /Mobi/i.test(nav.userAgent);
S = (selector, within) => {
let w = within || doc;
return w.querySelector(selector);
}
Q = (selector, within) => {
let w = within || doc;
return w.querySelectorAll(selector);
}
hC = (node, className) => {
return node.classList.contains(className);
}
aC = (node, ...classNames) => {
node.classList.add(...classNames);
return aC;
}
rC = (node, ...classNames) => {
node.classList.remove(...classNames);
return rC;
}
tC = (node, className) => {
node.classList.toggle(className);
return tC;
}
// small Library above - magic below can be put on another page using a load Event *(except // end load line)*
const trs = Q('tbody>tr'),
trsL = trs.length,
prs = Q('tfoot>tr>td+td'),
prsM = prs.length - 1,
ya = [];
function showAverages() {
let total = 0;
for (let p = 0, c, t, l = ya.length; p < prsM; p++) {
c = 0;
for (let i = 0; i < l; i++) {
c += ya[i][p];
}
t = (c / l * 100).toFixed(2);
prs[p].textContent = t;
total += (+t);
}
$("#element").html((total / prsM).toFixed(2) + "%");
}
for (let i = 0, r, sels, y; i < trsL; i++) {
r = trs[i];
sels = Q('select', r);
ya.push([]);
for (let n = 0, s, q = sels.length; n < q; n++) {
s = sels[n];
s.value = 'Yes';
y = s.value === 'Yes' ? 1 : 0;
ya[i].push(y);
s.oninput = () => {
ya[i][n] = s.value === 'Yes' ? 1 : 0;
showAverages();
}
}
}
showAverages();
});
//Local Storage Script
let select_row = document.getElementById('select_row');
select_row.addEventListener('input', function() {
localStorage.setItem('select_row', select_row.value); // Use .value to get and set text of input but use .textContent to get and set text of other elements (textareas, divs, etc.)
})
// This should run on script load
select_row.value = localStorage.getItem('select_row');thead *,
tfoot * {
font: bold 16px Arial, san-serif;
}
tfoot>tr>td:not(:last-child):after {
content: '%';
font-weight: bold;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content-page">
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="page-title-box">
<h4 class="page-title"> WebForms                                            
                    Total Percent Complete = <span id="element"></span></h4>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<div class="table-responsive">
<h5 class="mt-0"> WebForm Tasks <br></h5>
<table id="datatable-buttons" class="table table-striped dt-responsive nowrap w-100" name="table">
<thead>
<tr>
<th class="th-sm">Tasks</th>
<th class="th-sm">Avi - Lead</th>
<th class="th-sm">Benito</th>
<th class="th-sm">Carlos</th>
<th class="th-sm">Greg</th>
<th class="th-sm">Krish</th>
<th class="th-sm">Roy</th>
<th class="th-sm">Dee</th>
<th class="th-sm">Notes</th>
</tr>
</thead>
<tbody>
<tr class="select_row">
<td>CR Service Request Form</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td> </td>
</tr>
<tr class="select_row">
<td>CR Pallet Reuqest Form</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td> </td>
</tr>
</tbody>
<tfoot>
<tr class="percent_row">
<td>Percent Complete </td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</tfoot>
</table>
</div>
<!-- end .table-responsive-->
</div>
<!-- end card-body -->
</div>
<!-- end card -->
</div>
<!-- end col -->
</div>
<!-- end row -->
</div>
<!-- container -->
</div>
</div>any data it will save and show but not working. Any help will appreciated
id="select_row"in the HTML, what islet select_row = document.getElementById('select_row');supposed to get?