如何在表单提交时更改 Web 应用程序的外观？答案

【问题标题】：How do I change the appearance of my web app on form submit?如何在表单提交时更改 Web 应用程序的外观？
【发布时间】：2019-07-26 07:48:46
【问题描述】：

好的，我已经有了组件、脚本、doget 函数和输入 html 表单。

doget 调用表单：

function doGet() {
  return HtmlService.createHtmlOutputFromFile("inputHtml.html");

}

提交时的表单调用测试脚本

<input 
     type="button" 
     value="SPLIT gSheet" 
     onclick="google.script.run
      .withSuccessHandler(function(response){console.log(response);})
      .test(this.parentNode);" 
      style="background-color:#1a73e8;border-radius:10px;padding:5px;color: #fff; border-color: white;"
  />

代码将响应返回到控制台日志。

function test(e){

  var string = e.original + e.location + e.prefix;

var gDrive = e.original;
var filePrefix = e.prefix;
var destination = getIdFromUrl(e.location);
// do something with input
  return string;    

}//*****************************************************************************

我的问题本身有点基本，我很高兴有人指出一个好的教程。

如何让脚本在运行后自行清除/调用新的 html 页面？还是在运行时？理想情况下，它会在单击时显示一个处理页面，并在完成时显示一个输出页面？

【问题讨论】：

在withSuccessHandler()怎么样；您可以隐藏一个 div 并显示另一个。

标签： html forms google-apps-script web-applications

【解决方案1】：

这是我用于上传文件的表单：

<!DOCTYPE html>
<html>
  <head>
  <script>

  function fileUploadJs(frmData) 
  {
    document.getElementById('status').style.display ='inline';
    google.script.run
      .withSuccessHandler(updateOutput)
      .uploadTheFile(frmData)
  };
  function updateOutput(info) 
  {
    var br='<br />';
    var outputDiv = document.getElementById('status');
    outputDiv.innerHTML = br + 'File Upload Successful.' + br + 'File Name: ' + info.name + br + 'Content Type: ' + info.type + br + 'Folder Name: ' + info.folder;
  }
</script>
<style>
  body {background-color:#ffffff;}
  input{padding:2px;margin:2px;}
</style>
  </head>
  <body>
    <h1 id="main-heading">Main Heading</h1>
    <div id="formDiv">
      <form id="myForm">
        <input name="fileToLoad" type="file" /><br/>
        <input type="button" value="Submit" onclick="fileUploadJs(this.parentNode)" />
      </form>
    </div>
  <div id="status" style="display: none">
  <!-- div will be filled with innerHTML after form submission. -->
  Uploading. Please wait...
  </div>  
  <div id="controls">
      <input type="button" value="Close" onClick="google.script.host.close();" />
  </div>
</body>
</html>

这是gs：

function uploadTheFile(theForm) {
  var fileBlob=theForm.fileToLoad;
  var fldr = DriveApp.getFolderById(getGlobal('ExportsFolderId'));
  var file=fldr.createFile(fileBlob);
  var fi=formatFileName(file);
  var fileInfo={'name':fi.getName(),'type':fileBlob.getContentType(),'folder':fldr.getName()};
  return fileInfo;
}

【讨论】：

非常感谢！这有助于我看到多种可以让我从这里扩展我的 web 应用程序的东西（隐藏显示区域、脚本可以工作的不同方式等）。