从JavaScript变量添加HTML表单字段

时间:2017-02-19 21:30:13

标签: javascript html google-apps-script google-sheets

使用Google Apps脚本,我创建了一个HTML页面,其中的表单使用其输入来填充Google表格。这一切都很好,但我想现在使用一种不同的形式(取决于存在的数据)将动态创建表单中的字段。到目前为止我的代码:

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>
      Task:<br>
      <input class = "reset" type="text" name="task">
      <br>
      Hours:<br>
      <input class = "reset" type="number" name="hours" min="0" step="0.01">
      <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 lastRow = sheet.getLastRow();

  var timestamp = Utilities.formatDate(new Date(), "GMT-5", "MM/dd/yyyy' 'HH:mm:ss");
  var entries = [[timestamp, fObject.name, fObject.clientName, fObject.projectType, fObject.task, fObject.hours]];
  var range = sheet.getRange(sheet.getLastRow()+1, 1, 1, 6);

  if ((lastRow % 2) == 0) {
    range.setValues(entries).setBackground("#d9d9d9");
  }
  else  {
    range.setValues(entries);
  }

  return;
}

function ProgramSuccess() {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  ss.toast("Data Entry Successful");
}

例如,是否可以将对象传递给包含表单标记及其选项/类的HTML,并让HTML根据该信息自动创建表单?

感谢所有帮助。

0 个答案:

没有答案