URL 表单预填答案

【问题标题】：URL form pre-fillURL 表单预填
【发布时间】：2019-02-24 13:06:14
【问题描述】：

我正在使用以下代码使用 Google Apps 脚本创建自定义 HTML 表单（部署为网络应用程序）：

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>

代码按预期工作，正在电子表格中收集响应，但是我想使用 URL 预先填写一些字段。我知道您可以使用常规的 Google 表单系统来做到这一点。

Web 应用程序 URL 可以做到这一点吗？

【问题讨论】：

您可以从某处检索数据并以两种基本方式填写字段。在将其发送到浏览器之前将其添加到 html，或者在提供 html 之后调用服务器，如果成功，则将答案添加到表单中。对于第一种方法，您可以使用 scriptlet 和模板化 HTML。 Link to official documentation 如果要在加载原始页面后添加答案，可以使用window.onload() 方法在页面加载后立即运行代码。或者为 documentContentLoaded 添加一个事件监听器。
谢谢桑迪。问题是这些表格要发送给多个人，我需要使用存储在其他地方（在电子表格上）的特定 ID 预先填写第一个字段。所以通过 URL 预填充似乎是唯一的选择？

标签： html forms google-apps-script web-applications google-sheets

【解决方案1】：

您可以通过发送 url 查询参数来做到这一点：

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

然后，onload，检索查询参数并在您的表单中更新它。

示例 Index.html sn-p:

<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])})
      });
    });

参考资料：

google.script.url
Working Sample检索查询参数

【讨论】：