Question

我正在尝试将数据从表单传递到Google Apps脚本中，但是当我按下“提交”时，我会被空白屏幕打招呼。

表格：

<div id="nameDiv">
  <form action="https://script.google.com/a/umbc.edu/macros/s/AKfycbztum1ImJZeXXYt0fFhwOAMUsB5zCsJQohrum4W7qiH/dev">
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname">

    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lastname" >

    <input type="submit" value="Submit" onclick="google.script.run.nameSearch()">
  </form>
</div>

脚本：

function nameSearch(){
  try {
    var firstName = document.getElementById("fname").value
    var lastName = document.getElementById("lname").value
    var inputSheet = SpreadsheetApp.openByUrl("https://docs.google.com/spreadsheets/d/1z3j7wxMLsXilyKDIH7XnE7VNQqF66fIH4B-mmuWwCJ8/edit#gid=1235654559");
    var inputData = inputSheet.getDataRange().getValues();
    for (var i = 1; i < inputData.length; i++) {
      if (inputData[i][10] == firstName && inputData[i][11] == lastName) {
        var result = inputData[i][14] + ": " + inputData[i][15]
      }
    }
    document.getElementById('nameDiv').innerHTML = 
                "<center>Last Name:" + lastName + "</center>" +
                "</br><center>First Name:" + firstName + "</center>"
  } catch(e) {
    alert(e)
  }
}

我正在尝试将此数据传递给脚本，以便它可以使用它搜索Google表格，因此我不能仅将脚本作为客户端脚本放在html中。有什么想法吗？

Answer 1

所有与HTML相关的方法（getElementById，innerHTML等）应位于客户端脚本中，而Apps Script方法应位于服务器端。

如果我对您的理解正确，则需要执行以下操作：

提交此表单时，查找其K列和L列与输入字段（来自inputData数组的索引10和11）匹配的行。
对于此行，从O和P列返回数据（inputData数组的索引14和15）。
将此返回的数据写入HTML。

如果这一切正确，那么您可以这样做：

在Submit输入中添加一个onclick事件，该事件将触发客户端功能（该功能在HTML的标记内声明）。无需为此使用。 HTML主体可能是这样的：

<div id="nameDiv">
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="firstname">

  <label for="lname">Last Name</label>
  <input type="text" id="lname" name="lastname" >

  <input type="submit" value="Submit" onclick="clientNameSearch()">
</div>

从此名为clientNameSearch()的客户端函数中，从fname和lname中检索值，并在调用名为{{1}的服务器端函数时将它们用作参数。 }）：

nameSearch

此服务器端函数在电子表格中的所有行中进行迭代，并为K和L列与输入数据匹配的第一行返回function clientNameSearch() { var firstName = document.getElementById("fname").value; var lastName = document.getElementById("lname").value; google.script.run.withSuccessHandler(onSuccess).nameSearch(firstName, lastName); }：

result

然后将此function nameSearch(firstName, lastName){ try { var inputSheet = SpreadsheetApp.openByUrl("https://docs.google.com/spreadsheets/d/1z3j7wxMLsXilyKDIH7XnE7VNQqF66fIH4B-mmuWwCJ8/edit#gid=1235654559"); var inputData = inputSheet.getDataRange().getValues(); for (var i = 1; i < inputData.length; i++) { if (inputData[i][10] == firstName && inputData[i][11] == lastName) { var result = inputData[i][14] + ": " + inputData[i][15]; return result; } } } catch(e) { alert(e) } }作为参数通过a success handler传递给名为result的客户端函数。这是必要的，因为onSuccess调用的服务器端函数不会直接返回任何内容，如here所指定。然后google.script.run将onSuccess写入HTML：

result

完整代码：

function onSuccess(result) {
  document.getElementById('nameDiv').innerHTML = "<div>" + result + "</div>";
}

<!DOCTYPE html> <html> <head> <base target="_top"> </head> <body> <div id="nameDiv"> <label for="fname">First Name</label> <input type="text" id="fname" name="firstname"> <label for="lname">Last Name</label> <input type="text" id="lname" name="lastname" > <input type="submit" value="Submit" onclick="clientNameSearch()"> </div> </body> <script> function clientNameSearch() { var firstName = document.getElementById("fname").value; var lastName = document.getElementById("lname").value; google.script.run.withSuccessHandler(onSuccess).nameSearch(firstName, lastName); } function onSuccess(result) { document.getElementById('nameDiv').innerHTML = "<div>" + result + "</div>"; } </script> </html>如下：

Code.gs

我不确定您是否想将function nameSearch(firstName, lastName){ try { var inputSheet = SpreadsheetApp.openByUrl("https://docs.google.com/spreadsheets/d/1z3j7wxMLsXilyKDIH7XnE7VNQqF66fIH4B-mmuWwCJ8/edit#gid=1235654559"); var inputData = inputSheet.getDataRange().getValues(); for (var i = 1; i < inputData.length; i++) { if (inputData[i][10] == firstName && inputData[i][11] == lastName) { var result = inputData[i][14] + ": " + inputData[i][15]; return result; } } } catch(e) { alert(e) } } function doGet(e) { return HtmlService.createHtmlOutputFromFile("your-html-name"); }写入HTML，但是在任何情况下，在这一点上修改它都应该很容易，这样它就可以准确地写出您想要的内容以及在您的位置想要。

参考：

我希望这会有所帮助。

Answer 2

尝试一下：

启动对话框，填充文本框，然后单击“提交”。该视图记录并查看下一个对话框。

function launchADialog() {
  var html='<form><br /><input type="text" name="Name" /> Name: <br /><input type="text" name="Age" /> Age: <br />';
  html+='<select name="Children" ><option value="0">None</option><option value="1">One</option><option value="2">Two</option></select> Children:<br />';
  html+='<input type="button" value="Submit" onClick="google.script.run.processForm(this.parentNode);" /></form>';
  var userInterface=HtmlService.createHtmlOutput(html);
  SpreadsheetApp.getUi().showModelessDialog(userInterface, "The Form");
}

function processForm(form) {
  Logger.log(JSON.stringify(form));
  var s=Utilities.formatString('<br />Name: %s <br />Age:%s <br />Number Of Children: %s', form.Name, form.Age, form.Children);
  s+='<br /><input type="button" value="Close" onClick="google.script.host.close();" />';
  var userInterface=HtmlService.createHtmlOutput(s);
  SpreadsheetApp.getUi().showModelessDialog(userInterface, "Form Data")
}

如何将表单数据传递到GAS

2 个答案:

完整代码：

参考：