使用谷歌工作表脚本编辑器将数据提交到不同的标签

Question

In my spreadsheet script editor, I have the below codes:在我的电子表格脚本编辑器中，我有以下代码：

Code.gs代码.gs

function doGet() {
    return HtmlService.createTemplateFromFile('checkForm.html')
}

function doPost1(e) {

  Logger.log(JSON.stringify(e))
  if (!e || !e.parameter) {
    return;
  }
  var lock = LockService.getScriptLock();
  lock.tryLock(10 * 1000);
  var scriptProp = PropertiesService.getScriptProperties();

  try {
    var ss = SpreadsheetApp.getActiveSpreadsheet();
    var checkForm = ss.getSheetByName("checkForm");
    var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
    var nextRow = sheet.getLastRow() + 1;
    var newRow = headers.map(function(header) {
      return header === 'Timestamp' ? new Date() : e.parameter[header]
    });
    sheet.getRange(nextRow, 1, 1, newRow.length).setValues([newRow]);

    var startTime = newRow[1];
    var endTime = newRow[2];
    var cal = CalendarApp.getCalendarById("ID");
    var allEvents = cal.getEvents(new Date(startTime), new Date(endTime));
    if (allEvents.length > 0) {
    return HtmlService.createTemplateFromFile('calendarAgenda.html')
    }else {
    return HtmlService.createTemplateFromFile('bookingForm.html')
    };

  }

  catch (e) {
    return ContentService
      .createTextOutput(JSON.stringify({ 'result': 'error', 'error': e }))
      .setMimeType(ContentService.MimeType.JSON)
  }

  finally {
    lock.releaseLock()
  }
}

function doPost2(e) {

  Logger.log(JSON.stringify(e))
  if (!e || !e.parameter) {
    return;
  }
  var lock = LockService.getScriptLock();
  lock.tryLock(10 * 1000);
  var scriptProp = PropertiesService.getScriptProperties();

  try {
    var ss = SpreadsheetApp.getActiveSpreadsheet();
    var bookForm = ss.getSheetByName("bookForm");
    var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
    var nextRow = sheet.getLastRow() + 1;
    var newRow = headers.map(function(header) {
      return header === 'Timestamp' ? new Date() : e.parameter[header]
    });
    sheet.getRange(nextRow, 1, 1, newRow.length).setValues([newRow]);    

    return ContentService
    .createTextOutput(JSON.stringify('Successfully received. Thank you!'))
      .setMimeType(ContentService.MimeType.JSON)
  }

  catch (e) {
    return ContentService
      .createTextOutput(JSON.stringify({ 'result': 'error', 'error': e }))
      .setMimeType(ContentService.MimeType.JSON)
  }

  finally {
    lock.releaseLock()
  }
}

checkForm.html checkForm.html

<!DOCTYPE html>
<body>
<form name="class1Check" id="class1Check" action="ScriptURL" target="_self" method="POST">
Start Date & Time
<input class="w3-input w3-border" type="datetime-local" required name="Start Date & Time">
<br><br>
End Date & Time
<input class="w3-input w3-border" type="datetime-local" required name="End Date & Time">
<button type="submit" onclick="google.script.run.doPost1(this.parentNode)">Check</button>
</form>
<script>
function postData(form) {
  google.script.run.withSuccessHandler(postData).doPost1(e);
}
</script>
</body>
</html>

bookingForm.html预订表格.html

<!DOCTYPE html>
<body>
<form name="class1Booking" id="class1Booking" action="ScriptURL" target="_self" method="POST">
<inputs> ..
<button type="submit" onclick="google.script.run.doPost1(this.parentNode)">Check</button>
</form>
<script>
function postData(form) {
  google.script.run.withSuccessHandler(postData).doPost2(e);
}
</script>
</body>
</html>

The goGet function returns the "checkForm.html" page that when submitted is supposed to run the doPost1 function to send the data to tab "checkForm" in the spreadsheet and then returns the second page "bookingForm.html" that when submitted is supposed to run the doPost2 function to send the data to tab "bookForm" and then returns a certain text output goGet 函数返回“checkForm.html”页面，提交时应该运行 doPost1 函数将数据发送到电子表格中的选项卡“checkForm”，然后返回第二个页面“bookingForm.html”，提交时应该运行 doPost2 函数将数据发送到选项卡“bookForm”，然后返回某个文本输出

When I submit the check form, I receive the error "Script function not found: doPost" and I think I might have some issues with google.script.run that I tried to modify several times with no luck.当我提交检查表单时，我收到错误“找不到脚本函数：doPost”，我想我可能在 google.script.run 方面遇到了一些问题，我尝试多次修改但没有成功。 Any help and thanks in advance任何帮助和提前致谢

Answer 1

Forget about the doPost().忘记 doPost()。 Try something like this.尝试这样的事情。

HTML: HTML：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <style>#msg{display:none;}</style>
  </head>
  <body>
    <form>
      <!--><inputs type="text" name="name1">--> 
      <button type="button"  value="Submit" onclick="processForm(this.parentNode);" />
      </form>
 <div id="msg"></div>
 <script>
   $(function(){
     //You can get stuff from the server after the dom has loaded.  I know it takes some time but it's a simple way to intialize.  Personally for my own sutff Id rather do this that use templated html
   });

  function processFormC(form) {
    //input validation
    google.script.run
    .withSuccessHandler(function(obj){
      $('#msg').css("display","block");
      $('#msg').html(obj.msg);
    })
    .processFormS(form);
  }
</script>
  </body>
</html>

GS: GS：

function processFormS(obj) {
  //obj.name1...
  return {msg:'Got it.'}
}

function doGet() {
    return HtmlService.createHtmlOutputFromFile('whatever file name')
}

And personally I prefer putting all of the javascript and css in the same file because it's easier to find later on.我个人更喜欢将所有的 javascript 和 css 放在同一个文件中，因为以后更容易找到。 Yes I know it can get large but again that's my choice it doesn't have to be your choice.是的，我知道它会变大，但同样是我的选择，它不一定是您的选择。

Answer 2

You're not using google.script.run functions correctly, as it's stated in the documentation you can only return values of types:您没有正确使用google.script.run函数，正如文档中所述，您只能返回以下类型的值：

Number, Boolean, String, or null, as well as JavaScript objects and arrays that are composed of primitives, objects and arrays.数字、布尔值、字符串或空值，以及由基元、对象和数组组成的 JavaScript 对象和数组。

An in your case, you're trying to return a textOutput object, which is not allowed, this class is intended for Web Apps functions (doGet(e) or doPost(e)).在您的情况下，您试图返回一个不允许的 textOutput对象，此类用于Web Apps函数（doGet(e) 或 doPost(e)）。

In the documentation about [Client-to-Server communication] ( https://developers.google.com/apps-script/guides/html/communication ) it's explained how to work with google.script.run.在有关 [客户端到服务器通信] ( https://developers.google.com/apps-script/guides/html/communication ) 的文档中，解释了如何使用 google.script.run。 Here is an example applied to your case so you can understand better how it works:这是一个适用于您的案例的示例，以便您可以更好地了解它的工作原理：

checkForm.html checkForm.html

<!DOCTYPE html>
<body>
<form name="class1Check" id="class1Check" target="_self" method="POST">
Start Date & Time
<input class="w3-input w3-border" type="datetime-local" required name="Start Date & Time">
<br><br>
End Date & Time
<input class="w3-input w3-border" type="datetime-local" required name="End Date & Time">
<button onclick="postData(this.parentNode)">Check</button>
</form>
<script>
//It’s run when form button is clicked 
function postData(form) {
   //Calls doSomething function in code.gs with form parameter
  google.script.run.withSuccessHandler(handlerFunction).doSomething(form);
}

//Handles the response from doSomething function
function handlerFunction(responseData) {
  //Logs ‘It worked!’ in developer console
  console.log(responseData);
}
</script>
</body>
</html>

code.gs代码.gs

//Web App function
function doGet() {
    return HtmlService.createTemplateFromFile('checkForm.html')
}

//Apps script function to receive form object and return response
function doSomething(form) {
//Do something
  return ‘It worked!’;
}

Apps Script's Web Apps are designed to be a single page application (one HTML page) and not a multi-page application, although there are different workaround examples you could guide from to achieve a multi-page behavior: Apps Script 的 Web 应用程序被设计为单页应用程序（一个 HTML 页面）而不是多页应用程序，尽管您可以参考不同的解决方法示例来实现多页行为：

[1] Linking to another HTML page in Google Apps Script [1] 在 Google Apps 脚本中链接到另一个 HTML 页面

[2] https://sites.google.com/corp/view/googlappsscript/recent-scripts/multiple-page-webapp-example [2] https://sites.google.com/corp/view/googlappsscript/recent-scripts/multiple-page-webapp-example

使用谷歌工作表脚本编辑器将数据提交到不同的标签

问题描述

2 个解决方案

解决方案1
0 2020-02-17 16:56:31

解决方案2
0 已采纳 2020-02-18 10:20:52

使用谷歌工作表脚本编辑器将数据提交到不同的标签

问题描述

2 个解决方案

解决方案1 0 2020-02-17 16:56:31

解决方案2 0 已采纳 2020-02-18 10:20:52

解决方案1
0 2020-02-17 16:56:31

解决方案2
0 已采纳 2020-02-18 10:20:52