CODEWITHSUNDEEP
formspostgoogle-apps-script
Employee
Employee

Reputation: 2401

Google Apps Script HTMLService display confirmation page after form submit

I created a web app form using Google Apps Script and the HTMLService.

It is a one-page form with a submit button at the bottom.

When submitted, the form validates whether the data input into the form is valid, and if valid, it logs the form data to a spreadsheet.

That all works so far.

I now need the user to be sent to a confirmation page, and the confirmation page needs to be able to have parameters passed to it (to display certain information on the confirmation page).

main.gs:

function doGet(e) {

  var template = HtmlService.createTemplateFromFile('form');
  return template.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);

}

function processFormSubmission(formData) {

  Logger.log('starting processPoRequest');
  Logger.log('po: ' + JSON.stringify(formData, null, 2));
  // code for appending data to sheet here

}

form.html:

<!DOCTYPE html>

<form id="form1" name="form1">

  <label for="info" id="info_label">Info</label>
  <input id="info" name="info" type="text">

  <input class="btn" id="button" onclick="onClickFunctions(document.getElementById('form1'))" type="submit" value="Submit">

</form> 

<script>

function onClickFunctions(formData) {

  console.log('starting onClickFunctions');

  var allDataValid = validateForm(formData);

  if (allDataValid === true) {

    google.script.run.withSuccessHandler().processFormSubmission(formData);

  }

}

function validateForm(form) {

  console.log('starting validateForm');

  var errors = 0;

  var element = document.getElementById('info');
  if (!form.info) { element.classList.add("validation_error"); errors++; if (errors === 1) element.focus(); }
  else element.classList.remove("validation_error");

  if (errors > 0) return false;
  else            return true;

}

</script>

confirmation.html:

<!DOCTYPE html>

<?!= confirmationMessage ?>

I don't know what to put in .withSuccessHandler() to make it so that the user is brought to the confirmation page.

I've Googled this extensively and found these results on Stack Overflow, and each one suggests a different solution, but none of them actually include complete working code for a solution:

Possible solutions using doPost:

Send form by email and track responses in spreadsheet

HtmlService doPost With Google Docs Form

HtmlService doPost

I messed around with doPost but I couldn't figure out how to get it to be invoked, and I couldn't find any official documentation in the HTMLService docs.

Possible solution using the link to the web app in an a href:

href in HtmlService

If my button was a link that looked like a button, I'm not sure how I would execute the form validation function when the link is clicked.

Upvotes: 0

Views: 2218

Answers (1)

Bjorn Behrendt
Bjorn Behrendt

Reputation: 1264

I have done this two different ways.

  1. had a hidden statement that gets shown, and the form gets hidden.

or

  1. use .withSuccessHandler(google.script.host.close()), but have the processFormSubmission function open a new dialogue.

Upvotes: 0

Related Questions