Daniel Hazeley Daniel Hazeley - 4 years ago 260
HTML Question

Google Apps Script HTML Form Won't Submit

First I will provide you with the code and briefly explain what it is I am trying to accomplish.

Code.gs

function onOpen() {
SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
.createMenu("Custom Menu")
.addItem("Show sidebar", "showSidebar")
.addToUi();
}

function doGet() {
return HtmlService.createHtmlOutputFromFile("entry");
}

function showSidebar() {
var html = HtmlService.createHtmlOutputFromFile("entry")
.setTitle("My custom sidebar")
.setWidth(300);
SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
.showSidebar(html);
}

function EnterData(fobject) {
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getSheetByName("Sheet1");
sheet.activate();

ss.toast("Something Happened");

var range = sheet.getRange(1, 1);
range.setValue("It worked");
}

function ProgramSuccess() {
var ss = SpreadsheetApp.getActiveSpreadsheet();
ss.toast("Program Run Complete");
}


entry.html

<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
// Prevent form from submitting
function preventFormSubmit() {
var forms = document.querySelectorAll('form');
for (var i = 0; i < forms.length; i++) {
forms[i].addEventListener('submit', function(event) {
event.preventDefault();
});
}
}
window.addEventListener('load', preventFormSubmit);

function FormSubmit(formObject) {
google.script.run.withSucessHandler(FormSuccess).EnterData(formObject);
}
function FormSuccess() {
google.script.run.ProgramSuccess;
google.script.host.close();
}
</script>
</head>

<body>
<form id="entryForm" onsubmit="FormSubmit(this)">
Name:<br>
<input type="text" name="name">
<br>
Client Name:<br>
<input type="text" name="clientname">
<br><br>
<input type="submit" value="Submit">
<input type="reset">
</form>
</body>
</html>


The purpose of this program is to open a sidebar in a google sheet that displays an html page that has a form (tag). Then when you click submit in the html sidebar, it should run the
EnterData
function in Code.gs. My problem is that this function is not being ran and nothing happens when I click the submit button.

Any help on this would be greatly appreciated.

Answer Source

Try this:

entry.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script>
      // Prevent form from submitting
      function preventFormSubmit() {
        var forms = document.querySelectorAll('form');
        for (var i = 0; i < forms.length; i++) {
          forms[i].addEventListener('submit', function(event) {
            event.preventDefault();
          });
        }
      }
      window.addEventListener('load', preventFormSubmit);

      function FormSubmit() {
        google.script.run.withSucessHandler(FormSuccess).EnterData(document.getElementById("entryForm"));
      }
      function FormSuccess() {
        google.script.run.ProgramSuccess;
        google.script.host.close();
      }
    </script>
  </head>

  <body>
    <form id="entryForm">
      Name:<br>
      <input type="text" name="name">
      <br>
      Client Name:<br>
      <input type="text" name="clientname">
      <br><br>
      <input type="submit" value="Submit" onclick="FormSubmit()">
      <input type="reset">
    </form>
  </body>
</html>

Also, i did not understand why are you passing the "entryForm" object to the EnterData function because you don't seem to be making use of it.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download