Pass URL Parameters to HTML Form Google Web App

Question

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 as a web app through google. I need to prefill an input box with that parameter.

code.gs

function doGet() {
return HtmlService
        .createTemplateFromFile('html')
        .evaluate();      
          }

html.html

<!DOCTYPE html>
<html>
<head>
</head>
<style>
</style>
<body>
<form>
  <h1><center>Verification</center></h1>
  Form ID:<input type="number" name="formid" id="formid" class="formid">
</form>
</body>
</html>

As I said, I've tried many suggestions in similiar questions, but can't seem to find one that works. The id is that I can type in my url + ?formid= and have that populate in the input. How can I make this happen as described?

Thank you!

Tanaike · Accepted Answer · 2019-11-07 22:55:44Z

4

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:<input type="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.

answered Nov 7, 2019 at 22:55

Tanaike

203k12 gold badges126 silver badges222 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

NMALM Over a year ago

That is perfect and elegantly simple! Thank you so much!

Tanaike Over a year ago

@NMALM Thank you for replying. I'm glad your issue was resolved.

Cooper · Accepted Answer · 2019-11-07 22:53:58Z

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.

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

Collectives™ on Stack Overflow

Pass URL Parameters to HTML Form Google Web App

2 Answers 2

Modification point:

Modified script:

Reference:

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Modification point:

Modified script:

Reference:

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related