Google apps Script won't record submissions

Question

Below is a program that I put together, from research and some of my own adding, and I'm having many issues with it. The record_submission function isn't working properly. Every time I test with someone submitting their name, it won't properly record the information which then effects the next function, the notification function which I wrote to automatically send me an email once someone submits a response. Would appreciate some help.

Attached are the images of the Google spreadsheet that I want updated whenever someone submits a response as well as the face of the website people will be submitting information from. The record function is supposed to do that. It's giving me a error saying that the variable isn't properly assigned or something of the sort and the notification email doesn't work properly either.

This is the whole JavaScript code:

 //* 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();
   }
}

This is the whole HTML code

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>

Answer 1

I see that your 'input' tags are not wrapped in a 'form' tag, so what gets passed to the 'onclick' function as parameter might actually be the entire <body> tag. Are your inputs nested inside the <form> tag? If not, then this.parentNode would be the entire body of the HTML document.

I put together the quick example illustrating the entire process. On the client side, we are listening for the form submit event. Once the event fires, we call the server-side function via google.script.run and pass the form object to that function as an argument.

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