URL form pre-fill

Question

I am using the following code to create a custom HTML form (deployed as a web app) with Google Apps Script:

function getData(a)
{
  var ts = Utilities.formatDate(new Date(), "GMT-6", "yyyy-MM-dd' 'HH:mm:ss");
  a.push(ts);
  SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Login').appendRow(a);
  return true;
}

function doGet()
{
  var html = HtmlService.createHtmlOutputFromFile('index');
  return html.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)

}

index.html

  <div id="data">
    <br />Text 1<input type="text" size="15" id="txt1" />
    <br />Text 2<input type="text" size="15" id="txt2" />
    <br />Text 3<input type="text" size="15" id="txt3" />
    <br />Text 4<input type="text" size="15" id="txt4" />
    <br /><input type="button" value="submit" id="btn1" />
  </div>
  <div id="resp" style="display:none;">
    <h1>Response</h1>
    <p>Your data has been received.</p>
  </div>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
      $(function() {
        $('#btn1').click(validate);
        $('#txt4').val('');
        $('#txt3').val('');
        $('#txt2').val('');
        $('#txt1').val('')
      });

      function setResponse(a)
      {
        if(a)
        {
          $('#data').css('display','none');
          $('#resp').css('display','block');
        }
      }

      function validate()
      {
        var txt1 = document.getElementById('txt1').value || ' ';
        var txt2 = document.getElementById('txt2').value || ' ';
        var txt3 = document.getElementById('txt3').value || ' ';
        var txt4 = document.getElementById('txt4').value || ' ';
        var a = [txt1,txt2,txt3,txt4];
        if(txt1 && txt2 && txt3 && txt4)
        {
          google.script.run
            .withSuccessHandler(setResponse)
            .getData(a);
            return true;
        }
        else
        {
          alert('All fields must be completed.');
        }
      }

      function loadTxt(from,to)
      {
          document.getElementById(to).value = document.getElementById(from).value;
      }

     console.log('My Code');
   </script>

The code works as expected and is collecting responses in the spreadsheet however I would like to pre-fill some fields using the URL. I know you can do this with the regular Google Forms system.

Is this possible with the web app URLs?

You can retrieve data from somewhere and fill in fields in two basic ways. Add it the to the html before it's sent to the browser, or after the html is served make a call to the server and if there is success, add the answers to the form. For the first method you can use scriptlets and templated HTML. [Link to official documentation](https://developers.google.com/apps-script/guides/html/templates) If you want to add answer after the original page is loaded, you can use a `window.onload()` method to run code as soon as the page loads. Or add an event listener for documentContentLoaded. — Alan Wells, Feb 24 '19 at 13:42
thanks Sandy. Problem is these forms are going out to multiple people and I need to pre-fill the first field with a specific ID that is stored elsewhere (on spreadsheet). So pre-filling by URL seems like the only option? — herman, Feb 24 '19 at 13:49

TheMaster · Accepted Answer · 2019-02-24T14:22:17.663

You can do this by sending url query parameters:

https://script.google.com/macros/[ID]?txt1=value1&txt2=value2

Then, onload, retrieve the query parameters and update it in your form.

Sample Index.html snippet:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script>
    $(function() {
      google.script.url.getLocation(function(location) {
        var locObj = location.parameter;
        $('#btn1').click(validate);
        Object.keys(locObj).forEach((key) => {$("#"+key).val(locObj[key])})
      });
    });

References:

google.script.url
Working Sample to retrieve query parameter

URL form pre-fill

1 Answers1

Sample Index.html snippet:

References: