Question

我需要帮助。我对此post有同样的需求。我按照说明操作但是找不到我的错误。我很沮丧。

当我使用空字段提交时，脚本会显示一个空白页面。
当我提交完整的字段时，脚本也会向我显示一个空白页面，并且永远不会上传文件。

这是我的最终代码：

code.gs

function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('form.html');
}

function uploadFiles(form) {

  try {

    var dropbox = "NHD Papers";
    var folder, folders = DriveApp.getFoldersByName(dropbox);

    if (folders.hasNext()) {
      folder = folders.next();
    } else {
      folder = DriveApp.createFolder(dropbox);
    }

    var blob = form.myFile;    
    var file = folder.createFile(blob);    
    file.setDescription("Uploaded by " + form.myName + ", Division: " + form.myDivision + ", School: " + form.mySchool + ", State: " + form.myState);

    return "<h2>File uploaded successfully!</h2><p>Copy and paste the following URL into registration:<br /><br /><strong>" + file.getUrl() + '</strong></p>';

  } catch (error) {

    return error.toString();
  }

}

form.html

<p>
<form id="myForm" onsubmit="validateForm();">
  <h1>NHD Paper Upload</h1>

  <label>Name</label>
  <input type="text" name="myName" class="required" placeholder="Enter your full name..">
  <label>Division</label>
  <input type="text" name="myDivision" class="required" placeholder="(ex. Junior or Senior)">
  <label>School</label>
  <input type="text" name="mySchool" class="required" placeholder="Enter your school..">
  <label>Affiliate</label>
  <input type="text" name="myAffiliate" class="required" placeholder="Enter your affiliate..">
  <label>Select file to upload. </label>
  <input type="file" name="myFile">
  <input type="submit" value="Submit File" >
  <br />

</form>
</p>

<div id="output"></div>

<script>
    function validateForm() {
      var x=document.getElementsByClassName('required');
      for(var i = 0; i <x.length; i++){
      if (x[i].value == null || x[i].value == "")
      {
         alert("All fields must be filled out.");
         return false;
         }
         this.value='Please be patient while your paper is uploading..';
         var myFormObject = document.getElementById('myForm');
         google.script.run.withSuccessHandler(fileUploaded)
         .uploadFiles(myFormObject);
      }
    }
    function fileUploaded(status) {
        document.getElementById('myForm').style.display = 'none';
        document.getElementById('output').innerHTML = status;
    }

</script>

<style>
 input { display:block; margin: 15px; }
 p {margin-left:20px;}
</style>

问候，

Answer 1

在IFRAME模式下，HTML表单可以提交，但如果表单没有action属性，则会提交到空白页。

official documentation建议的解决方案是添加以下JavaScript代码以防止加载所有表单子目录：

<script>
  // Prevent forms from submitting.
  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);
</script>

您还可以在return false;功能的末尾添加validateForm()或event.preventDefault()。

通过Apps脚本提交验证

1 个答案: