Google Script : HTML form navigates through the records on Spreadsheet - Not working
Question
function getList() { var ss= SpreadsheetApp.getActiveSpreadsheet(); var recordSheet = ss.getSheetByName("CONTACTS"); var getLastRow = recordSheet.getLastRow(); return recordSheet.getRange(2,1,getLastRow - 1,6).getValues(); } function startForm(){ var form = HtmlService.createHtmlOutputFromFile('Records').setTitle('Records'); SpreadsheetApp.getUi().showSidebar(form); } function addMenu() { var menu = SpreadsheetApp.getUi().createMenu('Custom'); menu.addItem('Dropdown Form', 'startForm'); menu.addToUi(); } function onOpen(e) { addMenu(); }
<!DOCTYPE html> <html> <head> <base target="_top"> <script> function loadRecords(record){ google.script.run.withSuccessHandler (function(ar) { var record = document.getElementById ("record").value; consule.log(ar); consule.log(record); var recordCount = 0; ar.forEach(function(item,index) { if(index == record - 1) { document.getElementById("firstname").value = item[0]; document.getElementById("lastname").value = item[1]; document.getElementById("street").value = item[2]; document.getElementById("city").value = item[3]; document.getElementById("state").value = item[4]; document.getElementById("zip").value = item[5]; } recordCount++; }); console.log(recordCount); document.getElementById("maxRecord").value = recordCount; }).getList(); } function NextRecord() { var record = document.getElementById("record").value; var maxRecord = document.getElementByID("maxRecord").value; var nextRecord = Number(record) + 1; if(nextRecord <== maxRecord) { document.getElementById("record").value = nextRecord; loadRecords(); } } function PreviousRecord() { var record = document.getElementById("record").value; var previousRecord = Number(record) - 1; if (previousRecord >= 1) { document.getElementById("record").value = previousRecord; loadRecords(); } } </script> </head> <body> First Name: <input type="text" id="firstname" /><br> Last Name: <input type="text" id="lastname" /><br> Street: <input type="text" id="street" /><br> City: <input type="text" id="city" /><br> State: <input type="text" id="state" /><br> Zip: <input type="text" id="zip" /><br> <input type="button" value="<" onclick= "PreviousRecord()" /> <input type="text" value="1" id= "record" size = "2px" /> <input type="hidden" id="maxRecord" /> <input type="button" value=">" onclick="NextRecord()" /> <script> loadRecords();</script> </body> </html>
Hi all,
I tried to make a HTML form that can navigate through the records on google spreadsheet. I'm able to get the HTML form on the spreadsheet but the records on the spreadsheet aren't shown on the HTML form. Could you please help tell me what I did wrong. Really appreciated your help.
1 answers
solution1
1 ACCPTED 2020-10-03 08:00:54
There are a few errors in your javascript code.
- document.getElementById is the correct usage. you have an upper case 'D' in ID.
- Less than or equal to only needs one equal sign. '<=' is the correct usage. You can see a list of all the logical operators available with Javascript on this page .
In order to easily debug javascript issues, you can open your file in a browser and use the developer tools(F12). If there are any errors, they would be displayed on the console tab with the exact line numbers along with the details of the error.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.