URL 表单预填

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?

Answer 1

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

Answer 2

Can I refresh this question lacking understanding how the script answer above refers to form fields "txt1" and "txt2" getting completed and refer to detail found in Form Field Does Not Complete By URL In Iframe or Google Site - but does as independent web app

Thanks