javascript - 谷歌 HTML 服务 : write values from multiple selects in form to spreadsheet

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