我使用 Google Apps 腳本創建了一個網路表單，表單訪問者將result.html在資料提交后看到該表單。result.html但是，如果訪問者通過按F5, Ctrl 重新加載資料，則可能會多次提交資料R，而忽略重新提交的警報。此處已發布了相同的問題，我嘗試為此實施其中一種解決方案，但徒勞無功。

我現在在 Google Apps 腳本的同一個專案中有四個檔案：

index.html產生形式
JavaScript.html定義了在index.html
result.html在表單提交之后呈現
code.gs顯示表單doGet()，并處理提交的資料和呈現result.html。在這個檔案中定義的可以輸入到doPost()include()JavaScript.htmlindex.html

我嘗試過的解決方案是添加以下 JavaScript 代碼result.html。我還將它添加到，JavaScript.html以便代碼也可以在中執行index.html。

<script>
    if ( window.history.replaceState ) {
        window.history.replaceState( null, null, window.location.href );
    }
</script>

但是，result.html即使在我將代碼添加到result.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>

      <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);
  }

  if ( window.history.replaceState ) {
        window.history.replaceState( null, null, window.location.href );
  }
</script>

`result.html`

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <base />
    <title>Thank you for your order!</title>
    <!-- <?!= include('css'); ?> -->
  </head>
  <script>
    if ( window.history.replaceState ) {
      window.history.replaceState( null, null, window.location.href );
    }
  </script>
  <body>
    <p>
      Don't forget what you've ordered!
    </p>
  </body>
</html>

`code.gs`

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

function doGet(){
  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 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))

  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;
}

uj5u.com熱心網友回復：

在您的情況下，如何使用 PropertiesService 檢查提交？當你的腳本被修改后，它變成如下。

修改后的腳本：

在本次修改中，修改了ofdoGet和doPostofcode.gs的2個功能。

`doGet`

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

`doPost`

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();
}

當您訪問您的 Web 應用程式時，sample存盤setProperty("key", "sample")在doGet(). 并且，當 HTML 表單提交時，PropertiesService 被簽入doPost(e)。存在時sample，放資料，清空PropertiesService。這樣，即使重新打開提交的頁面，PropertiesService 也不存在。這樣，可以避免重新提交。

參考：

物業服務

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/479326.html

標籤：javascript html 形式谷歌应用脚本表格提交

上一篇：getRange只取一個值-Google表格

下一篇：例外：資料中的列數與范圍內的列數不匹配ImportJsonAPI呼叫問題

在GoogleApps腳本中，如何通過重新加載doPost()回傳的HTML來防止多次提交表單資料？

index.html

JavaScript.html

result.html

code.gs