【问题标题】:html form not writing to google sheethtml表单不写入谷歌表
【发布时间】:2015-08-09 13:03:55
【问题描述】:

我是编码和 Stack Overflow 的新手,如果我不遵守协议或重复问题,我深表歉意。我确实检查了问题,但以我有限的知识没有找到足够接近的东西。

我从网页 Original code is here 复制了一些代码并对其进行了修改以适合我的 Google 表格和 html 表单,但我有点卡住了。我已打开查看访问权限,因此您可以看到我正在尝试执行的操作,但我无法添加其他链接,因为我还没有足够的声誉!

我已经创建了表单,它出现在网站上。如果我从 Code.gs 页面运行代码,它的工作原理与它会在每个有标题的单元格中发布“未定义”一样多。但是从网站上的表格看,什么也没有发生。如果我“为您的最新代码测试 Web 应用程序”并按 F12,我会收到通知,它“无法读取 'getpubliclock' 的属性”。如果我注释掉公共锁行,我会收到通知“无法读取 'createTextOutput' 的属性。

我的 Code.gs 文件是:

function doGet(e) {

    return HtmlService.createTemplateFromFile('myForm')
    .evaluate()
    .setTitle('eCPC DB v2.0')
    .setSandboxMode(HtmlService.SandboxMode.NATIVE);
};

而 myForm.html 是:

<div>
    <!-- Use a templated HTML printing scriptlet to import common stylesheet. -->
    <?!= HtmlService.createHtmlOutputFromFile('Stylesheet').getContent(); ?>
    <form>                
        <input type="text" name="FIRSTNAME" id="FIRSTNAME" class="form-control" placeholder="First Name" required>
        <input type="text" name="LASTNAME" id="LASTNAME" class="form-control" placeholder="Last Name" required>
        <input type="text" name="DRIVERNUMBER" id="DRIVERNUMBER" class="form-control" placeholder="Driving Licence Number" required>
        <input type="email" name="EMAILADDRESS" id="EMAILADDRESS" class="form-control" placeholder="Email Address">
        <input type="text" name="CONTACTNUMBER" id="CONTACTNUMBER" class="form-control" placeholder="Telephone Number">
        <BR><BR>
        <input type="submit" id="submit-btn" value="send" onclick=doPost() class="blue">
    </form>

    <script>

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

    function handleResponse(e) {

        var lock = LockService.getPublicLock();
        lock.waitLock(30000);

        try {
            var doc = SpreadsheetApp.openById("1bEJwGt5ixDjvIUH56jcNB5j71rSetrVcvtrjMQCrVp4");
            var sheet = doc.getSheetByName("DRV");

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

            for (i in headers){
                if (headers[i] == "Timestamp"){
                    row.push(new Date());
                } else {
                    row.push(e.parameter[headers[i]]);
                }
            }

            sheet.getRange(nextRow, 1, 1, row.length).setValues([row]);
            return ContentService
                  .createTextOutput(JSON.stringify({"result":"success", "row": nextRow}))
                  .setMimeType(ContentService.MimeType.JSON);
        } catch(e){
            return ContentService
                  .createTextOutput(JSON.stringify({"result":"error", "error": e}))
                  .setMimeType(ContentService.MimeType.JSON);
        } finally {
            // lock.releaseLock();
        }
    }

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

</script> 

我已经尝试运行 Code.gs 文件中的所有代码,并且我已经在 myForm.html 文件的标签中运行了所有代码,但都没有执行任何操作。谁能告诉我我做错了什么,或者指出一个 html 表单的示例,该表单可以写入一个有效的 Google 电子表格,这样我就可以在我失败的地方解决问题?

谢谢!

【问题讨论】:

  • 阅读官方指南,了解如何使用 htmlService。您将服务器代码放在客户端,这将永远无法工作。
  • 谢谢齐格。据我了解,这很有用。那么到底如何才能让我的表单嵌入到我的站点中以与工作表对话呢?这太令人生畏了!
  • 阅读 html 应用指南。它解释了 .gs(服务器)和 html/js(客户端)文件之间的差异,并展示了如何从客户端调用到服务器代码。在那里尝试样品。一旦你让它运行一次,它就不会那么令人生畏了。
  • 查看整个指南。在那里你会找到developers.google.com/apps-script/guides/html/communication

标签: html google-apps-script google-sites


【解决方案1】:

不要在您的 myForm.html 文件中使用 doPost(e)。您必须使用:

google.script.run.someFunctionNameHere();

调用.gs 文件中的函数。 handleResponse(e) 函数也必须在 .gs 文件中。

您可能根本不需要使用doPost(e)。只有在第一次使用 HTTPS POST 请求调用脚本时才会调用它。您不需要 POST 请求即可将表单输入值发送到服务器。您只需要.gs 文件中的一个函数来接收参数中的数据。

请务必查看表单文档:

Google Documentation - Forms - HTML

【讨论】:

  • 谢谢桑迪,我会试一试的。所以按钮保持点击功能的名称。然后在 gs 页面上 google.script.run.nameofthefunction()。
  • 没有。 google.script.run.nameofthefunction() 在 HTML 文件中,在 &lt;script&gt; 标记内, 在按钮的 onClick() 属性中。该文档显示了一个示例。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-10-31
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多