堆棧內存溢出
  簡體   English   中英

如何使提交功能在使用 Google Apps 腳本創建並嵌入 Google 站點的 Web 表單中工作？

[英]How to make submission function work in a web form that is created using Google Apps Script and embedded in a Google Site?

 原文  2022-05-26 06:14:13  3   1    javascript/ html/ forms/ google-apps-script/ google-sites

問題描述

我想將使用 Google Apps 腳本創建的網絡嵌入到 Google 站點。 但是，當表單嵌入到這樣的 Google 站點中時，表單中的數據提交按鈕就會失效。

在web表單中，表單訪問者向index.html生成的表單輸入數據，提交數據后看到result.html 。 index.html中有一個內部鏈接，用於連接標頭及其相關內容。 當表單應用程序未嵌入任何其他站點時，它會成功運行。 查看表單應用程序，您會發現數據提交按鈕工作正常。

有人告訴我我錯過了什么嗎？

MWE

我在 Google Apps 腳本的同一個項目中有四個文件：

  1. 生成表單的index.html
  2. 定義index.html中使用的函數的JavaScript.html
  3. 表單提交后呈現的result.html
  4. code.gs通過doGet()顯示表單，處理提交的數據並通過doPost()顯示result.html 。 此文件中定義的include()可以將JavaScript.html輸入到index.html

index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <!-- <?!= include("css"); ?> -->
  </head>

  <body onload="addOptions()">   <!--Execute addOptions function immediately after a page has been loaded-->
    <form class="" action="<?!= getScriptUrl(); ?>" method="post" onSubmit="document.getElementById('submit').disabled=true;">
      <div>
        <h1 id="Question">
          Choose either cheesecake or chocolate cake.
        </h1>
          <select id="dropdownList" name="cake" class="form-control"> 
          </select>
      </div>
      <p>
        <div style="width:100px;height:500px;border:1px solid #000;">
          Blank box to scroll down
        </div>
      </p>
      <p>
        Please do not forget what you've answered in the <a href="#Question" target="_self">question<a>
      </p>
      <div class="form-submit">
        <input type="submit" name="" value="Submit">
      </div>
    </form>
  </body>
  <?!= include('JavaScript') ?>
</html>

JavaScript.html

<script>
  function addOptions() {
    /*This will call server-side Apps Script function getAvailableExps and if it is successful, 
    it will pass the return value to function addListValues which will add options to the drop down menu*/
    google.script.run
      .withFailureHandler(onFailure)
      .withSuccessHandler(addListValues)
      .getAvailableExps();
  }

  function addListValues(values) { 
    //Add options to drop down menu using the values of parameter 'values'.     
    for (var i = 0; i < values.length; i++) {
      var option = document.createElement("option");
      option.text = values[i][0];
      option.value = values[i][0];
      var select = document.getElementById("dropdownList");
      select.appendChild(option);
    }
  }

  function onFailure(err) {
    alert('Error: ' + err.message);
  }
</script>

result.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <base />
    <title>Thank you for your order!</title>
    <!-- <?!= include('css'); ?> -->
  </head>
  <body>
    <p>
      Don't forget what you've ordered!
    </p>
  </body>
</html>

code.gs

var sheetID = "............................................";
var inventory_sheet = "Inventory";

function doGet(){
  PropertiesService.getScriptProperties().setProperty("key", "sample");
  return HtmlService.createTemplateFromFile("index").evaluate();
}

function include(filename){
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

function getScriptUrl() {
  var url = ScriptApp.getService().getUrl();
  Logger.log(url);
  return url;
}

function doPost(e){
  var p = PropertiesService.getScriptProperties();

  if (p.getProperty("key") == "sample") {

    var ss = SpreadsheetApp.openById(sheetID);
    var sh = ss.getSheets()[0];
    sh.appendRow([String(e.parameters.cake)]);

    //update Inventory
    var inventory = ss.getSheetByName(inventory_sheet);
    var row = inventory.createTextFinder(e.parameters.cake).findNext().getRow();
    var range = inventory.getRange(row, 2);
    var data = range.getValue();
    range.setValue(parseInt(data - 1))

    p.deleteProperty("key");
  }

  return HtmlService.createTemplateFromFile("result").evaluate(); 
  
}

function getAvailableExps(){
  var inventory = SpreadsheetApp.openById(sheetID).getSheetByName(inventory_sheet);
  var data =  inventory.getRange(2, 1, 2, 2).getValues();
  var filtered = data.filter(arr =>  arr[1] > 0 || arr[1] != ''); //remove exp to array if quantity is 0 or empty
  return filtered;
}

1 個解決方案

解決方案1
 2 已采納  2022-05-27 02:39:51

問題和解決方法：

我認為在您的情況下，您的目標很難使用您的展示腳本直接實現。 Gustavo 的評論中已經提到了這樣做的原因。

當我看到您的評論時，您似乎需要在 Google 端運行 Web 應用程序。

在這種情況下，我認為可能需要使用解決方法。 在這個答案中，為了實現您的目標，我想提出一個解決方法。 此解決方法的要點如下。

  • 在您的腳本中，使用action="<?!= getScriptUrl(); ?>" method="post"將<select id="dropdownList" name="cake" class="form-control"></select>的值發送到doPost action="<?!= getScriptUrl(); ?>" method="post"的形式。
  • 在此解決方法中，使用google.script.run將值發送到 Google Apps 腳本。 並且，在值完全提交后，HTML 正文被result.html覆蓋。

當這一點反映在你的腳本中時，它變成如下。

修改后的腳本：

index.html

請修改index.html如下。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <!-- <?!= include("css"); ?> -->
  </head>
  <body id="body" onload="addOptions()">
    <form id="form">
      <div>
        <h1 id="Question">
          Choose either cheesecake or chocolate cake.
        </h1>
          <select id="dropdownList" name="cake" class="form-control"> 
          </select>
      </div>
      <p>
        <div style="width:100px;height:500px;border:1px solid #000;">
          Blank box to scroll down
        </div>
      </p>
      <p>
        Please do not forget what you've answered in the <a href="#Question" target="_self">question<a>
      </p>
      <div class="form-submit">
        <input type="submit" name="" value="Submit" onclick="sample(this);return false;">
      </div>
    </form>
  </body>
  <?!= include('JavaScript') ?>
</html>

JavaScript.html

請將以下函數添加到JavaScript.html 。

function sample(e) {
  const f = document.getElementById("form");
  const obj = { parameters: [...f].reduce((o, g) => (o[g.name] = [g.value], o), {}) };
  google.script.run
    .withSuccessHandler((res) => {
      document.getElementById("body").innerHTML = res;
    })
    .sample(obj);
}
  • 在此示例腳本中，為了直接使用您的doPost ，准備了obj的值。 請注意這一點。

Code.gs Apps 腳本端

請將以下函數添加到Code.gs 。 此功能使用您的doPost 。

function sample(e) {
  return doPost(e).getContent();
}

測試：

當此修改反映在您的腳本中並且您的 Web Apps 嵌入到 Google 站點時，當單擊提交按鈕時， cake的值將發送到 Google Apps 腳本端並顯示result.html 。 我認為這種情況可能是您的預期結果。

筆記：

  • 此修改是用於解釋解決方法的簡單修改。 所以，請根據您的實際情況進行修改。

  • 當您修改 Google Apps 腳本時，請將部署修改為新版本。 這樣，修改后的腳本就會反映在 Web Apps 中。 請注意這一點。

  • 您可以在“在不更改新 IDE 的 Web 應用程序 URL 的情況下重新部署 Web 應用程序”的報告中查看詳細信息。

  • 關於 Google 網站上的 Web Apps 的內部鏈接，當嵌入 Web Apps 的 while 頁面並且不顯示滾動條時，內部鏈接似乎不起作用。 當顯示框架的滾動條時，鏈接有效。 在這種情況下，內部鏈接似乎無法同時使用 HTML 和 Javascript。 而且，我無法確認錯誤消息。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 使用Google Apps腳本解析表單提交 我的“包含”如何在獨立的Google Apps腳本中破壞表單提交？ 如何將值從HTML表單提交傳遞給Google表格，然后再傳遞回Google Apps Script Web App中的HTML 如何使RegExp工作？ （Google Apps腳本） Google Apps腳本：已提交的郵件內容（表單提交腳本） Google Apps腳本未上傳文件：NetworkError：提交表單失敗 谷歌應用程序腳本。 表單提交隨機失敗 如何使用Google Apps腳本為Google表單中的項目設置父項？ 在 Google Apps 腳本中，如何通過重新加載 doPost() 返回的 HTML 來防止多次提交表單數據？ 檢查功能是否正在與Google Apps腳本和Google Web Apps一起運行
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM