Question

我的网站基于wordpress，我正在尝试创建html表单，该表单可以将用户填写的数据发送到Google电子表格。提到中篇文章（https://medium.com/@dmccoy/how-to-submit-an-html-form-to-google-sheets-without-google-forms-b833952cc175）中提到的过程，我没有收到任何错误，但是它也没有在电子表格中写入数据。我研究了有关堆栈溢出的其他帖子，但找不到解决方案。请帮助纠正代码。以下是参考代码：

HTML：

  <!DOCTYPE html>
    <html>
    <head>
     <base target="_top">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
     </head>
    <body>
    <form id="test-form">

      <div>
        <label>Name</label>
        <input type="text" name="Name" placeholder="Field 1"/>
      </div>

      <div>
        <label>Phone Number</label>
        <input type="text" name="Phone" placeholder="Field 2"/>
      </div>

      <div>
        <label>Email address</label>
        <input type="text" name="Email" placeholder="Field 3"/>
      </div>


      <div>
        <button type="submit"id="submit-form">Submit</button>
      </div>
    </form>
    <script>
    var $form = $('form#test-form')
    $('#submit-form').on('click', function(e) {
      e.preventDefault();
      var jqxhr = $.ajax({
        url: 'https://script.google.com/macros/s/Abvcasashjj90U/exec', 
// sheet link as saved during publish
        method: "GET",
        dataType: "json",
        data: $form.serializeObject()
      }).success(
        // do something
      );
    })
    </script>
    </body>
    </html>

Google脚本编辑器

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

//  Enter sheet name where data is to be written below
        var SHEET_NAME = "Sheet1";

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

function handleResponse(e) {
  // shortly after my original solution Google announced the LockService[1]
  // this prevents concurrent access overwritting data
  // [1] http://googleappsdeveloper.blogspot.co.uk/2011/10/concurrency-and-google-apps-script.html
  // we want a public lock, one that locks for all invocations
  var lock = LockService.getPublicLock();
  lock.waitLock(30000);  // wait 30 seconds before conceding defeat.

  try {
    // next set where we write the data - you could write to multiple/alternate destinations
    var doc = SpreadsheetApp.openById(SCRIPT_PROP.getProperty("key"));
    var sheet = doc.getSheetByName(SHEET_NAME);

    // we'll assume header is in row 1 but you can override with header_row in GET/POST data
    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 ContentService
          .createTextOutput(JSON.stringify({"result":"success", "row": nextRow}))
          .setMimeType(ContentService.MimeType.JSON);
  } 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表单发送到Google电子表格

0 个答案: