如何更改表单提交中Web应用程序的外观?

时间:2019-03-04 22:42:09

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

好的,所以我有您的组件,脚本,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页面?还是在运行时?理想情况下,单击时将显示处理页面,完成时将显示输出页面?

1 个答案:

答案 0 :(得分: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;
}