繁体   English   中英

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

[英]HTML pass form inputs to javascript and reset form fields

我正在用 HTML 创建一个表单,然后将输入字段作为表单对象传递给 javascript。 我希望我的程序在将对象传递给 JS 后重置除一个( name )之外的所有输入字段,但似乎这些字段在传递给 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");
}

withSuccessHandler错误地使用了withSuccessHandler 或者有没有不同的方法来完成我想要做的事情?

任何和所有的帮助表示赞赏。

withSuccessHandler 方法接受一个函数作为其回调参数。

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

在您的代码中withSuccessHandler(FormSuccess())将调用 FormSuccess 方法。 FormSuccess 没有返回值,因此实际上您调用withSuccessHandler(null) 通过删除()您将引用传递给函数而不是调用函数。 withSuccessHandler将使用您给它的引用调用函数本身,并添加您调用的服务器端函数的返回值作为第一个参数。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM