I try to made a google web application with multipage where user has to tick or untick on checkboxes based on applicable. I need to save those checkboxes status on HTML page using local storage during page navigation. If he navigate between pages then can see his selection. But unable to store and retrieve the data. As i am learning apps script so please guide me. Also if i return back to my first page then also can load my filled checkbox. In my case localStorage.getItem() always return false even after the checkbox is on ticked condition.
HTML First Page with JavaScript
<!DOCTYPE html>
<html>
<head>
<style>
.container {
design: flex;
flex-direction: column;
justify-items: center;
font-size: 30px;
}
</style>
<base target="_top">
</head>
<body>
<h1>1st Page of sheet</h1>
<div class="container">
<div>
<label>Cricket</label>
<input id="cb1" type="checkbox">
</div>
<div>
<label>Football</label>
<input id="cb2" type="checkbox">
</div>
</div>
<a style="font-size:24px" href="<?= ScriptApp.getService().getUrl() ?>?view=trial">Next page</a>
<script>
let cricketCheckbox = document.getElementById("cb1");
let footballCheckbox = document.getElementById("cb2");
cricketCheckbox.addEventListener('change', function () {
localStorage.setItem("checkbox1",cricketCheckbox.checked);
});
footballCheckbox.addEventListener('change', e => {
if(e.target.checked){
localStorage.setItem("checkbox2",footballCheckbox.checked);
}
});
</script>
</body>
</html>
HTML Second Page with JavaScript
<!DOCTYPE html>
<html>
<head>
<style>
.container {
design: flex;
justify-items: center;
font-size: 30px;
}
</style>
<base target="_top">
</head>
<body>
<h1>2nd Page of sheet</h1>
<div class="container">
<div>
<label>Mobile Required</label>
</div>
<div>
<input id="cb3" type="checkbox">
</div>
<div>
<input type="button" id="btn1" value="Save">
</div>
<div>
<a href="<?= ScriptApp.getService().getUrl() ?>" >First Page</a>
</div>
</div>
<script>
document.getElementById("btn1").addEventListener("click",eventFirst);
function eventFirst() {
let trial = {};
trial.cbox1 = localStorage.getItem("checkbox1");
trial.cbox2 = localStorage.getItem("checkbox2");
trial.cbox3 = document.getElementById("cb3").checked;
google.script.run.datasave(trial);
alert("Data saved");
localStorage.clear()
}
</script>
</body>
</html>
Server side function (gs)
function doGet(e) {
if(e.parameters.view == "trial") {
return executeSecondPage();
} else {
return executeFirstPage();
}
}
function executeFirstPage() {
let htmlSheet = HtmlService.createTemplateFromFile("firstPage").evaluate();
let htmloutput = HtmlService.createHtmlOutput(htmlSheet);
return htmloutput;
}
function executeSecondPage() {
let htmlSheet = HtmlService.createTemplateFromFile("secondPage").evaluate();
let htmloutput = HtmlService.createHtmlOutput(htmlSheet);
return htmloutput;
}
function datasave(trial) {
sheet.appendRow([trial.cbox1,trial.cbox2,trial.cbox3,new Date])
}
Your web app requires two moments
When the user opens/loads a page, using or not a parameter in the web app URL, the web app should read the values from the local storage. Add the script tag below the checkboxes and localStorage.getItem(name, value).
When the user checks / unchecks any checkbox, the web app should save the checkbox state to local storage. Use an event listener to execute localStorage.setItem(name).
Please bear in mind that the checked property for checkboxes returns a boolean, but localStorage stores string values, so when getting the stored value, it should be converted to a boolean before updating the checkbox value.
Below is a minimal example of how this can be achieved. It uses the document.querySelectorAll(selector) to retrieve all the checkboxes and the element ID as the name of the localStorage item. It uses JSON.parse to convert the "false" and "true" to false and true respectively.
Server Side code (.gs file)
function doGet(e) {
const pageNumber = e.parameter.page ?? 1;
return HtmlService.createTemplateFromFile(`page${pageNumber}`).evaluate();
}
page1.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<fieldset>
<input type="checkbox" id="football"><label>Football</label>
<input type="checkbox" id="cricket"><label>Cricket</label>
</fieldset>
<a href="<?= ScriptApp.getService().getUrl() + '?page=2' ?>">Page 2</a>
<script>
document.querySelectorAll('input[type=checkbox]').forEach(checkbox => {
checkbox.checked = JSON.parse(localStorage.getItem(checkbox.id));
checkbox.addEventListener('change', checkHandler);
});
function checkHandler(e){
localStorage.setItem(e.target.id, e.target.checked);
}
</script>
</body>
</html>
page2.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<fieldset>
<input type="checkbox" id="baseball"><label>Baseball</label>
<input type="checkbox" id="basketball"><label>Basketball</label>
</fieldset>
<a href="<?= ScriptApp.getService().getUrl()?>">Page 1</a>
<script>
document.querySelectorAll('input[type=checkbox]').forEach(checkbox => {
checkbox.checked = JSON.parse(localStorage.getItem(checkbox.id));
checkbox.addEventListener('change', checkHandler);
});
function checkHandler(e){
localStorage.setItem(e.target.id, e.target.checked);
}
</script>
</body>
</html>