在应用程序脚本中提交后显示表单结果计算

Question

我正在尝试创建一个 html 表单，将数据加载到 google sheet 中，在提交并将其加载到 sheet 之后，我想在 html 中显示计算字段的结果。根据所选分支，计算在 google sheet 中的特定单元格中。点击提交后如何显示结果？

Code.gs:

    function doGet(request) {
  return HtmlService.createTemplateFromFile('Index').evaluate();
}

function include(filename){
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

function processForm(formObject){
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();

  var branch = formObject.branch;
  var participants = formObject.participants;
  var engagment = formObject.engagment;
  var predictedValue = 0;


  if (branch == "On") {sheet.getRange('B2').setValue(participants), sheet.getRange('F2').setValue(engagment), predictedValue = sheet.getRange('G2').getValue();}
  else if (branch == "Barak") {sheet.getRange('B3').setValue(participants), sheet.getRange('F3').setValue(engagment), predictedValue = sheet.getRange('G2').getValue();}
  else if (branch == "Giv'atayim") {sheet.getRange('B4').setValue(participants), sheet.getRange('F4').setValue, predictedValue = sheet.getRange('G2').getValue();}
  else if (branch == "Gilad") {sheet.getRange('B5').setValue(participants), sheet.getRange('F5').setValue(engagment), predictedValue = sheet.getRange('G2').getValue();}
  else if (branch == "Ganim") {sheet.getRange('B6').setValue(participants), sheet.getRange('F6').setValue(engagment), predictedValue = sheet.getRange('G2').getValue();}
  else if (branch == "Lahav") {sheet.getRange('B7').setValue(participants), sheet.getRange('F7').setValue(engagment), predictedValue = sheet.getRange('G2').getValue();}
  else if (branch == "Magen") {sheet.getRange('B8').setValue(participants), sheet.getRange('F8').setValue(engagment), predictedValue = sheet.getRange('G2').getValue();}
  else if (branch == "Oz") {sheet.getRange('B9').setValue(participants), sheet.getRange('F9').setValue(engagment), predictedValue = sheet.getRange('G2').getValue();}
  else if (branch == "Rishonim") {sheet.getRange('B10').setValue(participants), sheet.getRange('F10').setValue(engagment), predictedValue = sheet.getRange('G2').getValue();}

}

Index.html:

    <!DOCTYPE html>
<html>
  <head>

  <?!= include('JavaScript'); ?>
  </head>
  
  <body>
    <h1>Enter your details</h1>
<form id="myForm" onsubmit="handleFormSubmit(this)">
  <label for="branch">Choose your branch:</label>
    <input list="magicHouses" id="branch" name="branch" placeholder="click here to choose" />
    <datalist id="magicHouses">
  <option value="On">
  <option value="Barak">
  <option value="Giv'atayim">
  <option value="Gilad">
  <option value="Ganim">
  <option value="Lahav">
    <option value="Magen">
  <option value="Ogen">
  <option value="Oz">
  <option value="Rishonim">
  </datalist>

  <label for="participants">Number of participants last year</label>
  <input type="text" class="form-control" id="participants" name="participants" placeholder="Enter the number">

  <label for="engagment">Parents Engagment</label>
  <input type="text" class="form-control" id="engagment" name="engagment" placeholder="Enter the number">



<button type="submit">Submit</button>

</form>


  </body>
</html>

JavaScript:

    <script>

  function preventFormSubmit(){
    var forms=document.querySelectorAll('form');
    for (var i=0;i<forms.length;i++){
      forms[i].addEventListener('submit',function(event){
        event.preventDefault();
      });
    }
  }
window.addEventListener('load',preventFormSubmit);

function handleFormSubmit(formObject){
  google.script.run.processForm(formObject);
  document.getElementById("myForm").reset();

}



</script>

我要显示的字段是 predictedValue。它可以是弹出消息等或在另一个网页上

Answer 1

在你的脚本中，做如下修改怎么样？

Google Apps 脚本端：`Code.gs`

发件人：

  else if (branch == "Rishonim") {sheet.getRange('B10').setValue(participants), sheet.getRange('F10').setValue(engagment), predictedValue = sheet.getRange('G2').getValue();}

}

收件人：

  else if (branch == "Rishonim") {sheet.getRange('B10').setValue(participants), sheet.getRange('F10').setValue(engagment), predictedValue = sheet.getRange('G2').getValue();}

  return predictedValue; // Added. This is important.
}

Javascript方：`JavaScript.html`

发件人：

google.script.run.processForm(formObject);

收件人：

google.script.run.withSuccessHandler(e => { // Here, you can use the returned value from Google Apps Script side.
  alert(e);
}).processForm(formObject);

在此修改中，Google Apps 脚本端的返回值可由 withSuccessHandler 检索。这里，作为示例，使用 alert。请根据实际情况修改。

备注

当您修改 Google Apps 脚本时，请将部署修改为新版本。这样，修改后的脚本就会反映在 Web Apps 中。请注意这一点。
您可以在“Redeploying Web Apps without Changing URL of Web Apps for new IDE”的报告中看到详细信息。

参考：

withSuccessHandler(function)

Answer 2

正如 Tanaike 所说，您需要使用 success handler. One potential issue with your code is that it does not handle possible multiple simultaneous form submissions. See the Web App Demo 作为示例来说明如何做到这一点。

在应用程序脚本中提交后显示表单结果计算

Show form result calculation after submit in apps script

google-apps-script

Google Apps 脚本端：`Code.gs`

发件人：

收件人：

Javascript方：`JavaScript.html`

发件人：

收件人：

备注

参考：

在应用程序脚本中提交后显示表单结果计算

Show form result calculation after submit in apps script

google-apps-script

Google Apps 脚本端：Code.gs

发件人：

收件人：

Javascript方：JavaScript.html

发件人：

收件人：

备注

参考：

Google Apps 脚本端：`Code.gs`

Javascript方：`JavaScript.html`