Any update with Google apps, because script has stopped working?

0
votes

Can anyone help with a script which has stopped working:

It's a html/css form created (last year) to get the responses on a google spreadsheet alongside the the files uploaded within a folder. It was working fine until beginning of this year, but it doesn't anymore. I mean as usual, I run a function + deploy app, I get the link and the form appears, but upon submission I get nothing, blank page and the spreasheets doesn't contain anything. Thanks a lot for your guidance.

Here are my codes:

Form.html

<script>
  // Javascript function called by "submit" button handler,
  // to show results.
  function updateOutput(resultHtml) {
    toggle_visibility('inProgress');
    var outputDiv = document.getElementById('output');
    outputDiv.innerHTML = resultHtml;
  }

  // From blog.movalog.com/a/javascript-toggle-visibility/
  function toggle_visibility(id) {
    var e = document.getElementById(id);
    if(e.style.display == 'block')
      e.style.display = 'none';
    else
      e.style.display = 'block';
  }
</script>


<link href='http://fonts.googleapis.com/css?family=Bitter' rel='stylesheet' type='text/css'>
<style type="text/css">

img {
      display: block;
      margin-left: auto;
      margin-right: auto;
      width:500px;
      height:170px;
     ;
}

form {
    width:450px;
    padding:30px;
    margin: auto;
    background: #FFF;
    border-radius: 10px;
    -webkit-border-radius:10px;
    -moz-border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13);
    -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13);
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13);
}

h2 {
    width:450px;
    padding:30px;
    margin: auto;
    margin-top: 5px;
    margin-bottom: 10px;
    text-align: center;
    border-radius: 10px;
    background: #FF8500;
    color: #fff;
    box-shadow: 1px 1px 4px #DADADA;
    -moz-box-shadow: 1px 1px 4px #DADADA;
    -webkit-box-shadow: 1px 1px 4px #DADADA;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

h1 {
    background: #2A88AD;
    padding: 20px 30px 15px 30px;
    margin: -30px -30px 30px -30px;
    border-radius: 10px 10px 0 0;
    -webkit-border-radius: 10px 10px 0 0;
    -moz-border-radius: 10px 10px 0 0;
    color: #fff;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.12);
    font: normal 30px 'Bitter', serif;
    -moz-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
    -webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
    box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
    border: 1px solid #257C9E;
}

h1 > span {
    display: block;
    margin-top: 2px;
    font: 13px Arial, Helvetica, sans-serif;
}

label {
    display: block;
    font: 13px Arial, Helvetica, sans-serif;
    color: #888;
    margin-bottom: 15px;
}

input[type="text"],
input[type="email"],
input[type="file"],
textarea,
select {
    display: block;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 100%;
    padding: 8px;
    outline: none;
    border: 1px solid #B0CFE0;
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
}

section{
    font: normal 20px 'Bitter', serif;
    color: #2A88AD;
    margin-bottom: 5px;
}

section span {
    background: #2A88AD;
    padding: 5px 10px 5px 10px;
    position: absolute;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border: 4px solid #fff;
    font-size: 14px;
    margin-left: -45px;
    color: #fff;
    margin-top: -3px;
}

input[type="button"], 
input[type="submit"]{
    background: #2A88AD;
    padding: 8px 20px 8px 20px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    color: #fff;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.12);
    font: normal 30px 'Bitter', serif;
    -moz-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
    -webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
    box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
    border: 1px solid #257C9E;
    font-size: 15px;
}
input[type="button"]:hover, 
input[type="submit"]:hover{
    background: #2A6881;
    -moz-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.28);
    -webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.28);
    box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.28);
}


</style>

<div id="formDiv">
<!-- Form div will be hidden after form submission -->
<img src="http://www.greenman-advertising.com/wp-content/uploads/2013/08/header_problemSolving_03.jpg">
<form id="myForm" runat="server">
<h1>Job application<span>Apply now and get the opportunity to join us!</span></h1>
<section> <span>1</span>Personal details</section>
    Full name: <input type="text" name="name" placeholder="First name & Last name"/><br/>
    Date of birth: <input type="text" name="birth" placeholder="dd/mm/yyyy"/><br/>
    Nationality:  <select name="nationality">
    <option>Test1</option>
    <option>Test2</option>
    <option>Test3</option>
     </select><br/>
     Marital status:  <select name="marital">
    <option>...</option>
    <option>Married</option>
    <option>Single</option>
         </select><br/>
    Please state the age of your children who will be registered in our school: <input type="text" name="children" placeholder="Example: 5;9;12 or 0"/><br/>

    <section> <span>2</span>Experiences and qualifications</section>
    Years of experience:  <select name="years">
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>10+</option>
    </select><br/>
    Highest qualification obtained: <input type="text" name="qualification" placeholder="Example: Degree, Master, .."/><br/>
    Educational qualification obtained: <input type="text" name="educational" placeholder="Example: QTS,PGCE,CELTA, .."/><br/>
    English language level:  <select name="profiency">
    <option>...</option>
    <option>Fluent English proficient</option>
    <option>Advanced</option>
     <option>Intermediate</option>
    <option>Early intermediate</option>
    <option>Beginner</option>
    </select><br/>
    <section> <span>3</span>Position applied for</section>
    Subject:  <select name="subject">
    <optgroup label="Teaching">
    <option>...</option>
    <option>Arts</option>
    <option>Biology</option>
    <option>Chemistry</option>
    <option>Computer Science</option>
    <option>English</option>
    <option>Math</option>
    <option>Physics</option>
    <option>Science</option>
    <option>Social Studies</option>
    </optgroup>
    <optgroup label="Other">
    <option>...</option>
    <option>Principal</option>
    <option>Deputy principal</option>
    <option>Educational spervisor</option>
    </optgroup>
    </select><br/>
    Grade level ( or Section):  <select name="grade">
    <option>...</option>
    <option>Higher grades</option>
    <option>Lower grades</option>
    <option>IGCSE</option>
    <option>AS</option>
    <option>A2</option>
    <option>SAT</option>
    </select><br/>
<section> <span>4</span>Contact details</section>
    Email: <input type="email" name="email" placeholder="[email protected]"/><br/>
    Phone number: <input type="text" name="phone" placeholder="[+]code country/phone number"/><br/>
    Skype: <input type="text" name="skype" placeholder="username"/><br/>
<section> <span>5</span>Attachments</section>
    CV (pdf/doc/docx only): <input type="file" name="myFile"/><br/>
    Qualification (scan): <input type="file" name="myFile2"/><br/>
    Other qualification (scan): <input type="file" name="myFile3"/><br/>
    Passport (scan): <input type="file" name="myFile4"/><br/>
    <input type="submit" value="Apply"
      onclick="toggle_visibility('formDiv'); toggle_visibility('inProgress');
        google.script.run
          .withSuccessHandler(updateOutput)
          .processForm(this.parentNode)" /><br/>
</form>
</div>

<div id="inProgress" style="display: none;">
<!-- Progress starts hidden, but will be shown after form submission. -->
Uploading. Please wait...
</div>

<div id="output">
  <!-- Blank div will be filled with "Thanks.html" after form submission. -->
</div>

Code.gs 

var submissionSSKey = '1urIXPV2NdsqTJ5zXJb1_t_EdsY7Kuh3VcSBJ4cnPIEg';
var folderId = "0B0lYW3YSUvX2ZDc0WnhJdFhkQk0";

function doGet(e) {
  var template = HtmlService.createTemplateFromFile('Form.html');
  template.action = ScriptApp.getService().getUrl();
  return template.evaluate();
}


function processForm(theForm) {
  var fileBlob = theForm.myFile;
  var fileBlob2 = theForm.myFile2;
  var fileBlob3 = theForm.myFile3;
  var fileBlob4 = theForm.myFile4;
  
  var folder = DriveApp.getFolderById(folderId);
  var doc = folder.createFile(fileBlob);
  var doc2 = folder.createFile(fileBlob2);
  var doc3 = folder.createFile(fileBlob3);
  var doc4 = folder.createFile(fileBlob4);


  // Fill in response template
  var template = HtmlService.createTemplateFromFile('Thanks.html');
  var name = template.name = theForm.name;
  var birth = template.birth = theForm.birth;
  var nationality = template.nationality = theForm.nationality;
  var marital = template.marital = theForm.marital;
  var children = template.children = theForm.children;
  var years = template.years = theForm.years;
  var profiency = template.profiency = theForm.profiency;
  var qualification = template.qualification = theForm.qualification;
  var educational = template.educational = theForm.educational;
  var subject = template.subject = theForm.subject;
  
  var grade = template.grade = theForm.grade;
  var email = template.email = theForm.email;
  var phone = template.phone = theForm.phone;
  var skype = template.skype = theForm.skype;

  var fileUrl = template.fileUrl = doc.getUrl();
  var fileUrl2 = template.fileUrl = doc2.getUrl();
  var fileUrl3 = template.fileUrl = doc3.getUrl();
  var fileUrl4 = template.fileUrl = doc4.getUrl();

  // Record submission in spreadsheet
  var sheet = SpreadsheetApp.openById(submissionSSKey).getSheets()[0];
  var lastRow = sheet.getLastRow();
  var targetRange = sheet.getRange(lastRow+1, 1, 1, 18).setValues([[name,birth,nationality,marital,children,profiency,years,qualification,educational,subject,grade,email,phone,skype,fileUrl,fileUrl2,fileUrl3,fileUrl4]]);

  // Return HTML text for display in page.
  return template.evaluate().getContent();
}

Thanks.html

<div>
    <h2>Thank you <?= name ?>, <br>your application has been received.</h2>
</div>
2
javascripthtmlgoogle-apps-script
I'm not sure that you need this: template.action = ScriptApp.getService().getUrl(); That could be causing an error. Plus, you don't need the e in doGet(e). You can remove that. – Alan Wells
I would remove runat="server" from the form tag. – Alan Wells
Nitpick: a huge chunk of your pasted code is irrelevant to the question. Much easier in future Stack Overflow posts to edit it down to be just the function/code in question. – JSDBroughton

2 Answers

1
votes

Yes, something has recently changed. The default sandbox mode is now IFRAME. Your doGet() function does not designate a sandbox mode, so it now defaults to IFRAME. This has changed the behavior of your form. You have an <input> tag that is a button of the submit type. This causes the form to issue either a GET or POST request when the form is submitted. That causes the screen to go blank, and is probably interfering with the google.script.run.myfunction() call to the server. Change the input button type from submit to button.

Currently:

<input type="submit" value="Apply"

Change to:

<input type="button" value="Apply"

I modified the code for the function named toggle_visibility

if(e.style.display !== 'none')//Modified this line

Was:

if(e.style.display === 'block')

The style could be many different settings. If it's inline for example, then that would break the code. But if it's !== "none", then if it's anything but none, then it's obviously being displayed.

Here is a link to a shared Apps Script file:

Link to Shared Apps Script File

0
votes

Following your advice, I've visited this page Migrating to IFRAME Sandbox Mode

and made the following change:

function doGet() {
var template = HtmlService.createTemplateFromFile('Form.html');
template.action = ScriptApp.getService().getUrl();
return template.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

and I changed the type to "button" but nothing is happening: it keeps at "Uploading. Please wait..." for ever