HTML 将表单输入传递给 javascript 并重置表单字段

Question

I am creating a form in HTML and then passing the input fields as a form object to javascript.我正在用 HTML 创建一个表单，然后将输入字段作为表单对象传递给 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.我希望我的程序在将对象传递给 JS 后重置除一个（ name ）之外的所有输入字段，但似乎这些字段在传递给 JS 之前已重置。

HTML 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 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?我withSuccessHandler错误地使用了withSuccessHandler ？ 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. withSuccessHandler 方法接受一个函数作为其回调参数。

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

In your code withSuccessHandler(FormSuccess()) will invoke the FormSuccess method.在您的代码中withSuccessHandler(FormSuccess())将调用 FormSuccess 方法。 FormSuccess has no return value so in actuality you calling withSuccessHandler(null) . FormSuccess 没有返回值，因此实际上您调用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. withSuccessHandler将使用您给它的引用调用函数本身，并添加您调用的服务器端函数的返回值作为第一个参数。

HTML 将表单输入传递给 javascript 并重置表单字段

问题描述

1 个解决方案

解决方案1
2 已采纳 2017-02-06 18:26:00

HTML 将表单输入传递给 javascript 并重置表单字段

问题描述

1 个解决方案

解决方案1 2 已采纳 2017-02-06 18:26:00

解决方案1
2 已采纳 2017-02-06 18:26:00