2016-10-10 123 views
0

我需要帮助。我有这个post相同的需要。我遵循指示,但我找不到我的错误。我很沮丧。通过Apps脚本提交验证

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

这是我的最终代码:

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> 

问候,

回答

0

IFRAME模式HTML表单被允许提交,但如果表格没有action属性它将提交到一个空白页面。

official documentation提出的解决方案是添加下面的JavaScript代码,以防止对负载的所有形式submitions:

<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> 

你也可以在你的validateForm()函数的末尾添加return false;event.preventDefault()