How should I get the data from google sheet using html code

222 Views Asked by At

I am trying to make mobile app using Phonegap. I am writing a code using HTML to search an ID in google sheet and give the complete row in return. Following is my HTML code.

    <!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  </head>
  <body>
     <div class="form-row">
      <div class="form-group col-md-2">  
        <label for="idNum">ID Number</label>
        <input type="text" class="form-control" id="idNum">
        <output id="rnum"></output>
      </div>
     <button type="button" class="btn btn-outline-info" id="searchbtn" onclick="search_ID()">Search Profile</button>
   </div>
 <p id="demo"></p>
 <form class="google_script" method="POST"  
 action="https://script.google.com/macros/s/AKfycbwlHuXwW1fEDfeer1ot6Ltb9cqT83VRZfQQQdTqZSgPvpYapUs/exec">

 <script data-cfasync="false" src="index.js"></script>

   </body>
</html>

and index.js file is:

function search_ID() {
    var input = document.getElementById("idNum").value;

    if (isNaN(input)) {
    voteable = "Input is not a number";
      } else {
    voteable = (input.length ==6 ) ? "Correct Value" : "Wrong Value";
  }
  document.getElementById("demo").innerHTML = voteable;
    google.script.run.doSomething();
}   

I want to call function in Google Script from local HTML file to get the data from google sheet (Given public view). Please help.

1

There are 1 best solutions below

0
Cooper On

I think you want to do something like this:

function search_ID() {
  var input = document.getElementById("idNum").value;

  if (isNaN(input)) {
    voteable = "Input is not a number";
  } else {
    voteable = (input.length ==6 ) ? "Correct Value" : "Wrong Value";
  }
  document.getElementById("demo").innerHTML = voteable;
  google.script.run.
  .witSuccessHandler(function(obj){
    window.alert(obj.msg);
  })
  doSomething();
}   

You can also do it like this:

google.script.run
.withSuccessHandler(functionname) 
.doSomething()

function functionname() {
  window.alert('obj.msg');
}

gs:

function doSomething() {
  //
  return {msg:"I did something and returned;"}
}

client to server communication