javascript - Google 应用程序脚本不会记录提交

标签 javascript html google-apps-script web-applications

下面是我根据研究和自己添加的一些内容整理的程序,我在使用它时遇到了很多问题。 record_submission 函数无法正常工作。每次我测试有人提交他们的名字时,它都不会正确记录信息,然后影响下一个功能,我写的通知功能会在有人提交回复后自动向我发送电子邮件。非常感谢您的帮助。

随附的是我希望在有人提交回复时更新的 Google 电子表格的图像,以及人们将从中提交信息的网站的外观。记录功能应该这样做。它给我一个错误,说变量没有正确分配或类似的东西,通知电子邮件也不能正常工作。

Google sheets image

Website image

这是完整的 JavaScript 代码:

 //* This function handles the get request from the web browsers */
 function doGet(e)
 { 
     //return form.html as the response return
     HtmlService.createHtmlOutputFromFile('form.html');
 }

 // Record all the information entered into the form into a Google Sheet.
 function record_submission(form)
 {
     Logger.log(form);
     var ss = SpreadsheetApp.openById("1dQQ1b3NjeYgVEOLIaSNB-XCZwAPAQr6C85Wdqj-sBM8");
     var sheet = ss.getSheets()[0]; // Assume first sheet collects responses

     // Build a row of data with timestamp + posted response
     var row = [ new Date(), // Timestamp 
                 form.last_name[0], // last name
               ]; // Make sure we are the only people adding rows to the spreadsheet
     var lock = LockService.getPublicLock(); // Wait for up to 30 seconds for other processes to finish. 
     var locked = lock.tryLock(30000);
     if (locked)
     {
         // Save response to spreadsheet 
         var rowNum = sheet.getLastRow() + 1;
        sheet.getRange(rowNum, 1, 1, row.length).setValues([row]);

        // Release the lock so that other processes can continue.
        lock.releaseLock(); 
        var result = "Response Recorded: \n 
 "+row.join('\n  ');
    }
    else
    {
        // Failed to get lock
        result =
 "System busy, please try again.";
    }
    // Report result of POST, in plain text
    return ContentService.createTextOutput(result).setMimeType(ContentService.MimeType.TEXT);
}

 // Send an email to yourself notifying you when someone made a submission.
function notification(last_name, assignment_name)
{
   var subject = "New Submission"; MailApp.sendEmail("*my email*@gmail.com",
 subject, 'New submission received from ' + last_name + ' for the
 assignment: ' + assignment_name );
}

 /* This function will process the form when the submit button is
 clicked */
 function uploadFiles(form)
 {
     try
     {
         notification('test','test'); //Retrieve a reference to the folder in Google Drive 
         var folder_name = "Test_Folder"
         var folder =
 DriveApp.getFolderById("0By69oDzO6OluTm9KNGVuaUZZdE0");

         // Create a new folder if the folder does not exist 
         if (!folder)
         {
             folder = folder.createFolder(folder_name);
         }

         //Get the file uploaded through the form as a blob
         var blob = form.myFile;
         var file = folder.createFile(blob);

         //Set the file description as the name of the uploader
         file.setDescription("Uploaded by " + form.LastName);     

         //Set the file name as the name of the uploader
         file.setName(form.LastName + "_" + form.AssignmentName); 

         //This function should store the information of the submission to a Google Sheet

         record_submission(form);

         //This function should notify you when there has been a submission 
         notification(form.LastName, form.AssignmentName);

         // Return the download URL of the file once its on Google Drive
         return "File uploaded successfully " + file.getUr1();
   }
   catch(error)
   { 
       // If there's an error, show the error mesage   return
       error.toString();
   }
}

这是整个HTML代码

File Upload

<!--User inputs --> 
<h4>First name</h4> 
<input type="text" name="FirstName" placeholder = "Type your first name.." > 


<h4> Last Name </h4> 
<input type="text" name = "LastName" placeholder="Your last name...">

<h4> Assignment Name </h4>
<input type="text" name="Course" placeholder="Course number"> 

<!--File upload--> 
<h4>Upload</h4> 
<input type="file" id="file" name="myFile" style="display:block; margin: 20px;" value = "myFile"> 

<!-- Submit button --> 
<input type="submit" value="Submit" 
    onclick= "this.value='Uploading..';
         google.script.run.withsuccessHandler(fileUploaded)
         .uploadFiles(this.parentNode);
         return false;">
           </form>    <div id="output">  </div>     <script>
 function fileUploaded(status) { 
     document.getElementById('myForm').style.display = 'none'; 
     document.getElementById('output').innerHTML = status;
     }


     /*check to see if the user's first name input is empty. 
     If it is empty alert the user to fill in his/her first name */ 


     </script>

     <style> 
          input {display:block; margin: 20px; }
          </style>

 </body> </html>

最佳答案

我看到您的“input”标签没有包含在“form”标签中,因此作为参数传递给“onclick”函数的实际上可能是整个 标签。您的输入是否嵌套在

标签内?如果不是,则 this.parentNode 将是 HTML 文档的整个主体。

我整理了说明整个过程的快速示例。在客户端,我们正在监听表单提交事件。事件触发后,我们通过 google.script.run 调用服务器端函数并将表单对象作为参数传递给该函数。

代码.gs

function onOpen(){

var ui = SpreadsheetApp.getUi();

ui.showSidebar(HtmlService.createHtmlOutputFromFile('sidebar')
  .setTitle('siderbar'));

}


function logFormObject(form){

Logger.log(form); //check the logs by pressing Ctrl + Return
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getSheets()[0]; // get the 1st sheet in the spreadsheet
sheet.appendRow([form.name, form.lastName, form.age]); //create row contents array from the form object and pass it to the appendRow() method


}

HTML

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <form id="myForm">

      Name <br>  
      <input name="name" /> <br>
      Last Name: <br>  
      <input name="lastName" /> <br>
      Age: <br>  
      <input name="age" /> <br>

      <input type="submit" value="send">

    </form>
    <script>

      window.onload = function(){

        var form = document.getElementById('myForm');
        form.addEventListener('submit', function(event) {

          event.preventDefault(); //prevents redirect to another page
          google.script.run.logFormObject(this); // calling the server function in Code.gs

        }); 


      }

    </script>
  </body>
</html>

关于javascript - Google 应用程序脚本不会记录提交,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45625615/

相关文章:

javascript - JQuery 获取所选选项卡的 id 不起作用

google-apps-script - 一次在 Gmail 线程中搜索多个未读标签的脚本

javascript - 如何在 TinyMCE 4.0.10 版本中使用 importcss 插件? (无法加载 content_css 并查看样式下拉列表)

javascript - jQuery - 下载 Textarea 内容

javascript - JavaScript 表单中的密码验证

javascript - 如何从 javascript 调用 angularjs 函数?

javascript - 将 html 传递给 polymer 元素

css - HTML&CSS3*JavaScript 高级滚动

google-apps-script - 如何复制模板并插入另一个文档中的内容?

javascript - Google 脚本错误 - UrlFetchApp 与 Facebook Graph Api 带来许多 urlfetch