从 HTML 组合框中提取值并传递给函数

Question

我正在使用 google 应用程序脚本在 google DOC 中创建一个自定义 ui。

UI 是 bui 和 HTMl。我正在尝试将 html 组合框的值传递给服务器端函数。

我缺少什么来获取组合框的值并传递它？

.html

<form id="cboPhase">
  <select id="cboPhase">
    <option>Sales</option>
    <option>Operation(Quote/ROM/BOM)</option>
    <option>Design Engineering</option>
    <option>Construction</option>
    <option>System Performance</option>
    <option>Maintenance</option>
  </select>
  <br>
  <br>
  <div>
    <input type="submit" class="button redButton" value="Submit" 
    onclick="google.script.run
   .withSuccessHandler(buttonClicker)
   .phaseName(document.getElementById('cboPhase').value )">
  </div>
</form>

.gs

function phaseName(formObject){
  showAlert();
  var cboName = formObject;
  var sheetToWriteTo = ss.getSheetByName('Project');
  var rowData = [docId,activeUser,cboName, new Date()];
  docBody.appendParagraph(cboName);
  sheetToWriteTo.appendRow(rowData);
  Logger.log(cboName);
}

我知道服务器函数被正确调用，因为 showAlert 函数是运行。 document.getElementByID() 的相同方法在带有文本框的 html 文件的另一部分中正常工作。组合框应该有什么不同吗？

Answer 1

如果你想避免使用 script 标签，你可以将 onsubmit 属性放入 FORM 标签中：

<form id="cboPhase" onsubmit="google.script.run
 .phaseName(this)">

请注意“this”关键字作为参数。从 INPUT 标记中删除 onclick 属性：

<input type="submit" class="button redButton" value="Submit">

在您的情况下，表单中只有一个 SELECT 框。如果表单中有更多输入元素，数组中就会有多个值。我在服务器中返回的是这样的：（假设我选择了 "Construction" 选项）：

{=Construction}

添加输入字段后，您将得到：

{=[Construction, test input]}

我认为您不能在 google.script.run.funcName() 中使用 document.getElementById('cboPhase').value 作为参数。它正在返回 NULL.

您传递的不是对象，而是值：

document.getElementById('cboPhase').value

如果您没有带有名为 buttonClicker() 的函数的 <script> 标签在其中，然后 HTML 在提供给浏览器时会出错。

Uncaught ReferenceError: buttonClicker is not defined

所以，如果你想要一个 withSuccessHandler，你需要一个 <script> 标签。如果你要有一个<script>，你不妨把google.script.run放到脚本标签中而不是Input标签的onClick属性。

<script>
  function fncCallServerCode() {
    var valueToPass = document.getElementById('cboPhase').value;

    google.script.run
     .withSuccessHandler(buttonClicker)
     .phaseName(valueToPass);
  };

  function buttonClicker(argReturnValue) {
    alert('The code ran: ' + argReturnValue);
  }
</script>

您的输入需要如下所示：

<div>
  <input type="submit" class="button redButton" value="Submit" onclick="fncCallServerCode()">
</div>

从 HTML 组合框中提取值并传递给函数

Pull value from HTML combo box and pass to a function

html

google-apps-script