CODEWITHSUNDEEP
javascripthtmlformsgoogle-apps-scriptgoogle-sheets
Dean
Dean

Reputation: 13

Google Script : HTML form navigates through the records on Spreadsheet - Not working

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.

enter image description here

Upvotes: 1

Views: 64

Answers (1)

Adarsh
Adarsh

Reputation: 3641

There are a few errors in your javascript code.

  1. document.getElementById is the correct usage. you have an upper case 'D' in ID.
  2. 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.

Upvotes: 1

Related Questions