Pass Url Parameters To Html Form Google Web App

August 30, 2023 Post a Comment

I've gone through most of the relating questions regarding this and haven't found a solution that helps me (I've applied them one by one). I have an HTML form that I am publishing

Solution 1:

When Web Apps is accessed with the URL of url + ?formid=###, you want to put the value of ### to the text box.
- The URL is like https://script.google.com/macros/s/###/exec?formid=###.

If my understanding is correct, how about this answer? Please think of this as just one of several answers.

Modification point:

In this modification, I used google.script.url.getLocation() for retrieving the query parameter.

Modified script:

Please modify html.html as follows.

<!DOCTYPE html><html><head></head><style></style><body><form><h1><center>Verification</center></h1>
  Form ID:<inputtype="number"name="formid"id="formid"class="formid"></form><script>
  google.script.url.getLocation(function(location) {
    document.getElementById("formid").value = location.parameters.formid[0];
  });
</script></body></html>

By above modification, when you accessed to Web Apps with https://script.google.com/macros/s/###/exec?formid=12345, 12345 is put to the text box.

Reference:

getLocation(function)

If I misunderstood your question and this was not the direction you want, I apologize.

Solution 2:

Using Jquery:

<script>
$(function(){
  google.script.run
  .withSuccessHandler(function(v){
    $('#formid').val(v);
   })
   .getTheValueOfV();
});
</scrip>

With Regular JavaScript

<script>window.onload=function(){
  google.script.run
  .withSuccessHandler(function(v){
     document.getElementById('formId').value=v;
   })
  .getTheValueOfV();
};
</script>

Code.gs:

function getTheValueOfV() {
  var ss=SpreadsheetApp.getActive();
  return ss.getRangeByName("TheRangeWhereYouFindtheValueofv").getValue();
}

You can put the script in the head or in the body your choice. If you use JQuery you need something like this in the head.

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><linkrel="stylesheet"href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"><scriptsrc="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Html5 Dictionary