HTML pass form inputs to javascript and reset form fields

Question

I am creating a form in HTML and then passing the input fields as a form object to javascript. I want my program to then reset all the input fields except one ( name ) after it has passed the object to JS, but it appears the fields are reset before they get passed to JS.

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.withSuccessHandler(FormSuccess()).EnterData(formObject); 
      }
      function FormSuccess() {
        var resets = document.getElementsByClassName("reset");
        for (var i = 0; i < resets.length; i++) {
          resets[i].value = "";
        }

        google.script.run.ProgramSuccess();
      }
    </script>
  </head>

  <body>
    <form id="entryForm" onsubmit="FormSubmit(this)">
      Name:<br>
      <input type="text" name="name">
      <br>
      Client Name:<br>
      <input class = "reset" type="text" name="clientName">
      <br>
      Project Type:<br>
      <input class = "reset" type="text" name="projectType">
      <br>
      Task:<br>
      <input class = "reset" type="text" name="task">
      <br>
      Hours:<br>
      <input class = "reset" type="number" name="hours" min="0">
      <br><br>
      <input type="submit" value="Submit">
      <input type="reset">
    </form>
  </body>
</html>

Javascript

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

  var entries = [[fObject.name, fObject.clientName, fObject.projectType, fObject.task, fObject.hours]];
  var range = sheet.getRange(sheet.getLastRow()+1, 2, 1, 5);
  range.setValues(entries);


  return;
}

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

Am I using the withSuccessHandler incorrectly? Or is there a different way to accomplish what I am trying to do?

Any and all help is appreciated.

Answer 1

The withSuccessHandler method accepts a function as its callback parameter.

https://developers.google.com/apps-script/guides/html/reference/run#withSuccessHandler(Function)

In your code withSuccessHandler(FormSuccess()) will invoke the FormSuccess method. FormSuccess has no return value so in actuality you calling withSuccessHandler(null) . By removing the () you are passing the reference to the function instead of invoking the function. withSuccessHandler will invoke the function itself using the reference you gave it adding the return value of the server side function you called as the first parameter.

HTML pass form inputs to javascript and reset form fields

Question

1 answers

solution1
2 ACCPTED 2017-02-06 18:26:00

HTML pass form inputs to javascript and reset form fields

Question

1 answers

solution1 2 ACCPTED 2017-02-06 18:26:00

solution1
2 ACCPTED 2017-02-06 18:26:00