Question

我创建了一个HTML表单，我希望将这些数据存储在我的Google电子表格中。

这是我的HTML表单

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.min.js"></script>

我的GOOGLE-SCRIPT.gs 我从martin hawksey那里获得了这部分

<div class="signup-header wow fadeInUp">
                            <h3 class="form-title text-center">GET STARTED</h3>
                            <form class="form-header" action="MY GOOGLE-SCRIPT URL HERE">

                                <div class="form-group">
                                    <input class="form-control input-lg" name="entry.1489833646" id="name" type="text" placeholder="First Name" required>
                                </div>
                                <div class="form-group">
                                    <input class="form-control input-lg" name="entry.990883496" id="name" type="text" placeholder="Last Name" required>
                                </div>
                                <div class="form-group">
                                    <input class="form-control input-lg" name="entry.632678420" id="email" type="email" placeholder="Email address" required>
                                </div>
                                <div class="form-group">
                                    <input class="form-control input-lg" name="entry.805782516" id="name" type="text" placeholder="Company" required>
                                </div><br>
                                <div class="form-group last">
                                    <input type="submit" class="btn btn-warning btn-block btn-lg" value="SUBMIT">
                                </div>
                                <p ></p>
                            </form>

                        </div>

现在我的问题是它将我的所有新条目显示为'undefined' Plz帮助

Answer 1

以下是您应切换到的代码：

var TO_ADDRESS = ""; // change this ...

function doPost(e) {

  try {
    Logger.log(e); // the Google Script version of console.log see: Class Logger
    MailApp.sendEmail(TO_ADDRESS, "Contact Form Submitted",
                      JSON.stringify(e.parameters));
    record_data(e);
    return ContentService    // return json success results
          .createTextOutput(
            JSON.stringify({"result":"success",
                            "data": JSON.stringify(e.parameters) }))
          .setMimeType(ContentService.MimeType.JSON);
  } catch(error) { // if error return this
    Logger.log(error);
    return ContentService
          .createTextOutput(JSON.stringify({"result":"error", "error": e}))
          .setMimeType(ContentService.MimeType.JSON);
  }
}

// new property service GLOBAL
var SCRIPT_PROP = PropertiesService.getScriptProperties();
// see: https://developers.google.com/apps-script/reference/properties/

/**
 * select the sheet
 */
function setup() {
    var doc = SpreadsheetApp.getActiveSpreadsheet();
    SCRIPT_PROP.setProperty("key", doc.getId());
}

/**
 * record_data inserts the data received from the html form submission
 * e is the data received from the POST
 */
function record_data(e) {
  Logger.log(JSON.stringify(e)); // log the POST data in case we need to debug it
  try {
    var doc     = SpreadsheetApp.openById(SCRIPT_PROP.getProperty("key"));
    var sheet   = doc.getSheetByName('EB Responses'); // select the responses sheet
    var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
    var nextRow = sheet.getLastRow()+1; // get next row
    var row     = [ new Date() ]; // first element in the row should always be a timestamp
    // loop through the header columns
    for (var i = 1; i < headers.length; i++) { // start at 1 to avoid Timestamp column
      if(headers[i].length > 0) {
        row.push(e.parameter[headers[i]]); // add data to row
      }
    }
    // more efficient to set values as [][] array than individually
    sheet.getRange(nextRow, 1, 1, row.length).setValues([row]);
  }
  catch(error) {
    Logger.log(e);
  }
  finally {
    return;
  }

}

至于用于发送表单的脚本：

function handleFormSubmit(event) { // handles form submit withtout any jquery
    event.preventDefault(); // we are submitting via xhr below
    var data = getFormData(); // get the values submitted in the form
    var url = event.target.action; //
    var xhr = new XMLHttpRequest();
    xhr.open('POST', url);
    // xhr.withCredentials = true;
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.onreadystatechange = function () {
        console.log(xhr.status, xhr.statusText)
        console.log(xhr.responseText);
        document.getElementById('gform').style.display = 'none'; // hide form
        document.getElementById('thankyou_message').style.display = 'block';
        $('html, body').animate({
            scrollTop: 0
        }, 'slow');
        return;
    };
    // url encode form data for sending as post data
    var encoded = Object.keys(data).map(function (k) {
            return encodeURIComponent(k) + '=' + encodeURIComponent(data[k])
        }).join('&')
        //    xhr.send(encoded);
    console.log("encoded: " + encoded);
    encoded = encoded + "&On Campus Accommodation and Meals=" + checkbox;
    console.log("encoded NEW: " + encoded);
    xhr.send(encoded);

}

我已经尝试过_成功测试了它并且它的工作也正常。

干杯

从HTML表单向Google电子表格发送数据

1 个答案: