Google HTML 服务：将表单中多项选择的值写入电子表格

Question

在过去的几天里，我一直在为此苦苦挣扎，最终崩溃并承认失败。这是我使用 Google HTML 服务的第一个项目，我想做的事情看起来很简单，但我无法让它工作。这就是我想要发生的事情......

1. 用户与电子表格交互，需要添加额外的数据行
2. 用户从自定义菜单项中选择一个选项（让它工作）
3. 此选择会启动一个 HTML 服务表单（使其正常工作）
4. 用户从两个下拉列表中选择值并点击提交
5. 选择的选项读取读取（工作种类...）并传递给 .js（这是我卡住的地方），它将创建行并放置数据。

下面是我的代码：

启动 HTML 服务的函数

    function AddAdditionalApplicant() {
  var ss = SpreadsheetApp.getActiveSpreadsheet(),
      html = HtmlService.createHtmlOutputFromFile('index');
  ss.show(html);
}

index.html

<form name="AddApplicant" onsubmit="formSubmit()">

<p><b>What Type?</b></p>
    <select name="NumOfApp" id="NumOfApp">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="Cosigner">Cosigner</option>
    </select>

<p><b>How Many?</b></p>
    <select name="TypeOfApp" id="TypeOfApp">
      <option value="Roommate">Roommate</option>
      <option value="Cosigner">Cosigner</option>
    </select>

<p></p>
<div>
  <!--<input type="submit" class="button redButton" value="Submit" onclick="formSubmit()">-->
  <input type="submit" class="button redButton" value="Submit">
</div>

</form>

<script type="text/javascript">
function formSubmit() {

//var a=document.getElementById('NumOfApp').selectedIndex;
//var b=document.getElementById('NumOfApp').options;
//alert("Index: " + b[a].index + " is " + b[a].text);

//var x=document.getElementById('TypeOfApp').selectedIndex;
//var y=document.getElementById('TypeOfApp').options;
//alert("Index: " + y[x].index + " is " + y[x].text);

    google.script.run.getValuesFromForm(document.forms[0]);
}
</script>

如果您取消注释被注释掉的行，您将看到值被正确读取。现在，这里是失败的地方......我尝试将表单作为对象传递给函数“getValuesFromFrom”使用

google.script.run.getValuesFromForm(document.forms[0]);

函数 getValuesFromFrom

function getValuesFromForm(AppForm){

Browser.msgbox("success")  /attempt to test and see if the execution gets this far...no go
//var a=AppForm['NumOfApp'].selectedIndex;
//var b=AppForm['NumOfApp'].options;
//Logger.log(b[a])
//
//var x=AppForm.TypeOfApp.selectedIndex;
var type = AppForm.TypeOfApp.options[AppForm.TypeOfApp.selectedIndex].value;
Logger.log(type)

}

什么都没有发生...浏览器 msgBox 没有弹出。我错过了什么？另外，当按下“提交”按钮时，如何让表单自动关闭。非常感谢任何帮助。

编辑： 在与@Sandy Good 反复讨论之后，我意识到 getValuesFromForm 函数中的“AppForm”变量是未定义的，这意味着表单对象没有从 html 传递给函数。我尝试了另一种方法，只是尝试通过像这样更改 html 代码的脚本部分来将字符串变量传递给函数

var x=document.getElementById('TypeOfApp').selectedIndex;
var y=document.getElementById('TypeOfApp').options;
//alert("Index: " + y[x].index + " is " + y[x].text);
var type=y[x].value
//    google.script.run.getValuesFromForm(y[x], b[a]);
  google.script.run.withFailureHandler(google.script.host.close)
    .getValuesFromForm(type);

这是成功的，而这...

var x=document.getElementById('TypeOfApp').selectedIndex;
var y=document.getElementById('TypeOfApp').options;
//alert("Index: " + y[x].index + " is " + y[x].text);
var type=y[x]
//    google.script.run.getValuesFromForm(y[x], b[a]);
  google.script.run.withFailureHandler(google.script.host.close)
    .getValuesFromForm(type);

不是！

所以问题仍然存在，我之前做错了什么？

编辑：7 月 10 日...工作代码

启动 HTML 服务的函数

    function AddAdditionalApplicant() {
  var ss = SpreadsheetApp.getActiveSpreadsheet(),
      html = HtmlService.createHtmlOutputFromFile('index');
  ss.show(html);
}

index.html

<form name="AddApplicant" onsubmit="formSubmit(this)">

<p><b>How Many?</b></p>
    <select name="NumOfApp" id="NumOfApp">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
    </select>

<p><b>What Type?</b></p>
    <select name="TypeOfApp" id="TypeOfApp">
      <option value="Roommate">Roommate</option>
      <option value="Cosigner">Cosigner</option>
    </select>

<p></p>
<div>
  <!--<input type="submit" class="button redButton" value="Submit" onclick="formSubmit()">-->
  <input type="submit" class="button redButton" value="Submit">
</div>

</form>

<script type="text/javascript">
function formSubmit(argTheFormElement) {

  google.script.run
    .withFailureHandler(myFailureFunction)
    .withSuccessHandler(google.script.host.close)
    .getValuesFromForm(argTheFormElement);

}
function myFailureFunction(argError) {
  alert("There was an error: " + argError.message);
  google.script.host.close();
  }

</script>

接收表单元素的函数

function getValuesFromForm(AppFormElement){
var ss = SpreadsheetApp.getActive();
var s = ss.getActiveSheet();
var sname = s.getName();

var num = AppFormElement.NumOfApp
var type =  AppFormElement.TypeOfApp

var activeRow = s.getActiveCell().getRow();
var addCell = s.getRange(activeRow,2);

  if (type == "Roommate") {
  for(var i = 0; i < num; ++i){
    AddRoommate(activeRow,addCell,sname,s);
    }
  }else if (type == "Cosigner"){
  for(var i = 0; i < num; ++i){
    AddCosigner(activeRow,addCell,sname,s);
    }
  }
  s.setActiveRange(addCell.offset(1,1));
}

希望这对某人有所帮助！！！

Answer 1

更改表单标签，并将this 添加到函数中：

onsubmit="formSubmit(this)"

然后修改你的函数：

function formSubmit(argTheFormElement) {

然后将变量argTheFormElement放入google.script.run.function(parameter);

google.script.run.getValuesFromForm(argTheFormElement);

这会将所有输入值传递给服务器。要取出值，您必须使用 name 标记的名称。

var type = AppForm.NumOfApp; //Get NumOfApp value

要关闭对话框，请使用：

google.script.host.close;

google.script.host.close