Google Scripts HtmlService 返回未定义的表单数据

康纳

我正在尝试创建一个 Web 应用程序,用户可以通过该应用程序填写表单并将数据填充到 Google 表格中。我的问题是在我填写表格后,表格中填充了未定义的数据。

每次填写表单时,如何定义此数据并附加到新行。

示例取自此处

代码.gs

function doGet(e){
  return handleResponse(e);
}

var SHEET_NAME = "Sheet1";

var SCRIPT_PROP = PropertiesService.getScriptProperties(); // new property service

function handleResponse(e) {

  var lock = LockService.getPublicLock();
  lock.waitLock(30000);  // wait 30 seconds before conceding defeat.

  try {

    var doc = SpreadsheetApp.openById(SCRIPT_PROP.getProperty("key"));
    var sheet = doc.getSheetByName(SHEET_NAME);


    var headRow = e.parameter.header_row || 1;
    var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
    var nextRow = sheet.getLastRow()+1; // get next row
    var row = []; 

    // loop through the header columns
    for (i in headers){
      if (headers[i] == "Timestamp"){ // special case if you include a 'Timestamp' column
        row.push(new Date());
      } else { // else use header name to get data
        row.push(e.parameter[headers[i]]);
      }
    }
    // more efficient to set values as [][] array than individually
    sheet.getRange(nextRow, 1, 1, row.length).setValues([row]);
    // return json success results
    return HtmlService.createHtmlOutputFromFile('index');
  } catch(e){
    // if error return this
    return ContentService
          .createTextOutput(JSON.stringify({"result":"error", "error": e}))
          .setMimeType(ContentService.MimeType.JSON);
  } finally { //release lock
    lock.releaseLock();
  }
}

function setup() {
    var doc = SpreadsheetApp.getActiveSpreadsheet();
    SCRIPT_PROP.setProperty("key", doc.getId());
}

索引.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">

    <script>
    var $form = $('form#test'),
    url = 'https://...';

    $('#submit-form').on('click', function(e) {
     e.preventDefault();
     var jqxhr = $.ajax({
      url: url,
      method: "GET",
      dataType: "json",
      data: $form.serializeObject()
     }).success(
      // do something
     );
    })
    </script>
  </head>
  <body>

    <form id="test">
     <p><label>ID</label>
     <input type="number" name="ID"/></p>

     <p><label>Part Number</label>
     <input type="text" name="Part Number"/></p>

     <p><label>Description</label>
     <input type="text" name="Description"/></p>

     <p><label>Item Link</label>
     <input type="url" name="Item Link"/></p>

     <p><label>Supplier</label>
     <input type="text" name="Supplier"/></p>

     <p><label>Manufacturer</label>
     <input type="text" name="Manufacturer"/></p>

     <p><label>Pins</label>
     <input type="number" name="Pins"/></p>

     <p><label>Size</label>
     <input type="text" name="Size"/></p>

     <p><label>Order Number</label>
     <input type="number" name="Order Number"/></p>

     <p><label>Location</label>
     <input type="text" name="Location"/></p>

     <p><input type="submit" value="submit-form"/></p>

    </form>

  </body>
</html>
巫师

由于您从另一个站点借用了代码,因此对我来说似乎过于复杂。恕我直言,这是一个更简单的解决方案。我没有看到参数 e 在任何地方使用,所以我删除了。也不需要使用 html 表单,但我保持原样

代码.gs

function doGet(){
  try {
    return HtmlService.createHtmlOutputFromFile("HTML_Test");
  }
  catch(err) {
    return ContentService
      .createTextOutput(JSON.stringify({"result":"error", "error": err}))
      .setMimeType(ContentService.MimeType.JSON);
  }
}

function submitData(data) {
  var shid = "your spreadsheet id here";
  var ss = SpreadsheetApp.openById(shid);
  var sh = ss.getSheetByName("Sheet1");
  try {
    sh.getRange(sh.getLastRow()+1,1,1,data.length).setValues([data]);
    return "success"
  }
  catch(err) {
    sh.getRange(sh.getLastRow()+1,1).setValue(err);
    return err;
  }
}

HTML_Test.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>

    <form id="test">
     <p><label>ID</label>
     <input type="number" id="ID"/></p>

     <p><label>Part Number</label>
     <input type="text" id="Part Number"/></p>

     <p><label>Description</label>
     <input type="text" id="Description"/></p>

     <p><label>Item Link</label>
     <input type="url" id="Item Link"/></p>

     <p><label>Supplier</label>
     <input type="text" id="Supplier"/></p>

     <p><label>Manufacturer</label>
     <input type="text" id="Manufacturer"/></p>

     <p><label>Pins</label>
     <input type="number" id="Pins"/></p>

     <p><label>Size</label>
     <input type="text" id="Size"/></p>

     <p><label>Order Number</label>
     <input type="number" id="Order Number"/></p>

     <p><label>Location</label>
     <input type="text" id="Location"/></p>

     <p><input type="button" value="Submit" onclick="submitForm()"/></p>

    </form>
    <script>
      function submitForm() {
        try {
          var data = [];
          data.push(document.getElementById("ID").value);
          data.push(document.getElementById("Part Number").value);
          data.push(document.getElementById("Description").value);
          data.push(document.getElementById("Item Link").value);
          data.push(document.getElementById("Supplier").value);
          data.push(document.getElementById("Manufacturer").value);
          data.push(document.getElementById("Pins").value);
          data.push(document.getElementById("Size").value);
          data.push(document.getElementById("Order Number").value);
          data.push(document.getElementById("Location").value);
          google.script.run.withSuccessHandler(success).submitData(data);
        }
        catch(err) {
          alert(err);
        }
      }
      function success(msg) {
        alert(msg);
      }
    </script>
  </body>
</html>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

对HtmlService Webapp使用自定义URL

Google Firebase:snap.val()。username返回未定义

序列化表单数据返回未定义

Google Directory API用户列表orgDepartment返回未定义

在将数据作为表单数据发送时,req.body返回未定义

搜索Google表单数据

Google Geocoder-异步请求返回“未定义”值

使用Google HtmlService投放时,输入模式属性不起作用

如何使用HtmlService将值从Google电子表格检索到文本字段

在HTMLService / Google Apps脚本中使用日期选择器返回值

与Google Apps脚本的HtmlService一起使用

使用HtmlService HtmlTemplate时设置Google Apps脚本showModalDialog的高度

如何在HtmlService Javascript和Server Google Apps脚本之间进行通信

函数的Javascript(Google Scripts)值未返回

Google Apps脚本中带有HtmlService的本机vs IFrame沙箱

Google Maps API返回“未定义”

HTMLService将不显示返回值

将变量从HREF传递到Google HTMLSERVICE App

Google Maps-从未定义的函数返回getPosition

AJAX调用返回的标头/表单数据中未定义

Google Scripts 自定义函数 - 范围数组作为参数

在 HtmlService 中使用 gapi 的 Apps Scripts OAuth2 授权

Google Scripts 中的数组

Google App Script - 函数返回未定义

Jquery Closest 无法单独捕获表单数据返回未定义

Vuetify 表单数据未定义

Google Analytics Management API 和 Google App Scripts.: gapi 未定义

Google Scripts - 替换、转置和拆分数据

Google HtmlService 的 ToggleButton