Multi-form html service app in apps script to test passing variables

benlcollins · May 4, 2016 · a7a5796 · a7a5796
1 parent 5188668
commit a7a5796
Show file tree

Hide file tree

Showing 3 changed files with 135 additions and 0 deletions.
diff --git a/two_forms/code.gs b/two_forms/code.gs
@@ -0,0 +1,49 @@
+// for publishing as web app
+function doGet(e) {
+  if (!e.parameter.page) {
+    // default for when no specific page requested
+    return HtmlService.createTemplateFromFile('index.html')
+      .evaluate()
+      .setSandboxMode(HtmlService.SandboxMode.IFRAME);
+  }
+  else {
+    var t = HtmlService.createTemplateFromFile(e.parameter.page);
+
+    // pushing variable to template
+    // more details here:
+    // https://developers.google.com/apps-script/guides/html/templates#calling_apps_script_apis_directly
+    t.data = e.parameter.value;
+
+    return t.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
+  }
+}
+
+// submit form
+function submitForm(form) {
+
+  // get the form data
+  var data = form.memberName;
+
+  // select addresses (make this auto-populate based on form entries)
+  var adminEmail = "xyz@xyz.com";
+
+  // subject and time of email
+  var subject = "Report " + (new Date()).toString();
+
+  // body of email
+  // includes link
+  // want this link to open up the other HTML page (step 1)
+  // and pre-populate with the relevant data from first form (step 2)
+  // Replace XXXXXXX with correct url for form
+  var htmlBody = "Email sent on " + (new Date()).toString() + "<br><br>" +
+                 "Submitted by: " + data + "<br><br>" +
+                 "<a href='https://script.google.com/macros/s/XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX/dev?page=supplierForm&value=" 
+                 + data + "'>Respond to RFP</a>";
+
+  Logger.log(htmlBody);
+
+  // send the email
+  MailApp.sendEmail(adminEmail, subject, htmlBody,{htmlBody:htmlBody});
+
+  return "Form submitted successfully";
+}
diff --git a/two_forms/index.html b/two_forms/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+
+<h1>First Form</h1>
+<div class="form">
+  <form class="form" id="first-form">
+      <!-- name details -->
+      <fieldset>
+          <legend>NAME</legend>
+          <input type="text" placeholder="Member Name" name="memberName"/>
+      </fieldset>
+
+    <input class="button" type="submit" value="Submit" id="Submit"
+         onclick="clicked(formUploaded,form);
+                  return false;">
+    <p class="message">Need help? <a href="http://www.benlcollins.com" target="_blank">Contact Ben</a></p>
+  </form>
+  <div id="message"></div>
+</div>
+
+
+<script>
+  // cofirm user intends to send form
+  function clicked(formUploaded,form) {
+     if (confirm('Do you want to submit?')) {
+       google.script.run.withSuccessHandler(formUploaded).submitForm(form);
+       document.getElementById('Submit').value = 'Uploading...';
+     } else {
+       return false;
+     }
+  }
+
+  // Form successfully submitted
+  function formUploaded(status) {
+    document.getElementById('first-form').style.display = 'none';
+    document.getElementById('message').innerHTML = status;
+  }
+
+</script>
+
+<!-- javascript -->
+<!-- any other javascript goes here -->
diff --git a/two_forms/supplierForm.html b/two_forms/supplierForm.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+
+<h1>Second Form</h1>
+<div class="form">
+  <form class="form" id="second-form">
+      <fieldset>
+          <legend>ORIGINAL FORM DETAILS</legend>
+
+          <!-- output the name from the original form here -->
+          <?!= data ?>
+      </fieldset>
+
+      <fieldset>
+          <legend>SECOND FORM DETAILS</legend>  
+          <input type="text" placeholder="Second Form Name" name="secondFormName"/>
+      </fieldset>
+
+    <input class="button" type="submit" value="Submit" id="Submit"
+         onclick="clicked(formUploaded,form);
+                  return false;">
+    <p class="message">Need help? <a href="http://www.benlcollins.com" target="_blank">Contact Ben</a></p>
+  </form>
+<div id="message"></div>
+</div>
+
+<script>
+  // cofirm user intends to send form
+  function clicked(formUploaded,form) {
+     if (confirm('Do you want to submit?')) {
+       // this is where I would run another function on the Google server side with apps script
+       // google.script.run.withSuccessHandler()....
+       document.getElementById('Submit').value = 'Uploading...';
+     } else {
+       return false;
+     }
+  }
+
+  // Form successfully submitted
+  function formUploaded(status) {
+    document.getElementById('second-form').style.display = 'none';
+    document.getElementById('message').innerHTML = status;
+  }
+
+</script>
+