Google Apps Script HTML 表单不会为海外用户提交答案

【问题标题】：Google Apps Script HTML form won't submit for overseas userGoogle Apps Script HTML 表单不会为海外用户提交
【发布时间】：2020-12-04 21:17:31
【问题描述】：

我有一个提交用户数据的小边栏表单。它对美国的任何人都有效，但如果来自海外的人试图提交表格，它就会失败。我什至登录了与海外用户相同的用户帐户，并为我提交了表格。我从来没有遇到过这样的 GAS 问题。用户登录的帐户拥有脚本所在的电子表格，并且他已尝试本地和美国 IP 地址来提交数据（不确定这是否重要。）我需要在脚本中更改/包含什么让所有用户都能够提交表单？创建一个 Web 应用程序和触发器可以解决问题吗？

代码.gs

//OPEN THE FORM IN SIDEBAR 
function showFormInSidebar() {      
  
  var form = HtmlService.createTemplateFromFile('Index').evaluate().setTitle('New Client');
  SpreadsheetApp.getUi().showSidebar(form);
  
}

//PROCESS FORM DATA
function processForm(formObject){ 
  
  var notes = [formObject.client,
               formObject.website,
               formObject.email,
               formObject.plan];
  
  var mTabs = [formObject.client,
               formObject.plan,
               formObject.timeAllowed,
               '',
               '',
               '00:00:00.000'];
  
  pushToSheets(notes,mTabs);
  
}

//INCLUDE HTML PARTS, EG. JAVASCRIPT, CSS, OTHER HTML FILES
function include(filename) {
  
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
  
}


//THIS FUNCTION IS USED TO PUSH DATA TO EACH RESPECTIVE SHEET FROM THE SIDEBAR FORM SUBMISSION
function pushToSheets(notes,mTabs) {
  
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var noteTab = ss.getSheetByName('NOTES');
  var sheetArr = ['JAN','FEB','MAR','APR','MAY','JUN','JUL','AUG','SEPT','OCT','NOV','DEC'];
  //  var sheetArr = ['JAN','FEB'];
  var nLast = noteTab.getLastRow();
  noteTab.insertRowBefore(nLast+1);
  noteTab.getRange(nLast+1, 1,1,4).setValues([notes]);
  noteTab.getRange(2,1,nLast+1,17).sort([{column: 4, ascending: true}, {column: 1, ascending: true}])
  
  for(var x = 0; x < sheetArr.length; x++) {
    
    var sheet = ss.getSheetByName(sheetArr[x]);
    var sLength = sheet.getLastRow();
    sheet.insertRowBefore(sLength-1);
    sheet.getRange(sLength-1, 1,1,6).setValues([mTabs]);
    sheet.getRange(2, 1,sLength,11).sort([{column: 2, ascending: true}, {column: 1, ascending: true}])
    
  }
  
}

索引.html

<!doctype html>
<html lang="en">

  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <?!= include('JavaScript'); ?> <!-- See JavaScript.html file -->
    <title>Contact Details</title>
  </head>
  
  <body class="bg-secondary text-light">
    <div class="container">
      <?!= include('Form'); ?> <!-- See Form.html file -->
    </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
   <script>
  $('#timeAllowed').keypress(function() {
   
  var regex = new RegExp("^[0-9]");
  var key = String.fromCharCode(event.charCode ? event.which : event.charCode);
  if (!regex.test(key)) {
      event.preventDefault();
      return false;
   }
   
    if(this.value.length == 2){
        this.value = this.value+':';
     }
     
    if(this.value.length == 5){
        this.value = this.value+':00';
     }
     
     if(this.value.length > 7) {
            
        return false;
     
     }
});
    </script>
 </body>
</html>

Form.html

 <form id="myForm" onsubmit="handleFormSubmit(this)" autocomplete="off">
  <div class="form-group">
    <label for="client">Client</label>
    <input class="form-control form-control-sm" type="text" class="form-control" id="clint" name="client" placeholder="Client Name">
  </div>
  <div class="form-group">
    <label for="gender">Plan</label>
    <select class="form-control form-control-sm" id="plan" name="plan" required>
      <option value="" selected disabled>Choose...</option>
      <option value="00 hosting">00 hosting</option>
      <option value="01 slim">01 slim</option>
      <option value="02 basic">02 basic</option>
      <option value="10 special">10 special</option>
      <option value="99 coming up">99 coming up</option>
      
      
    </select>
  </div>
    <div class="form-group">
    <label for="last_name">Time Allowed</label>
    <input class="form-control form-control-sm" type="text" class="form-control" pattern="[0-9][0-9]:[0-9][0-9]:[0-9][0-9]" title ="00:00:00" id="timeAllowed" name="timeAllowed" placeholder="00:00:00">
  </div>
  <div class="form-group">
    <label for="email">Email</label>
    <input class="form-control form-control-sm" type="email" class="form-control" id="email" name="email">
  </div>
  <div class="form-group">
    <label for="website">Website</label>
    <input class="form-control form-control-sm" type="text" class="form-control" id="website" name="website">
  </div>
  
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

JavaScript.html

<script>
  // Prevent forms from submitting.
  function preventFormSubmit() {
    var forms = document.querySelectorAll('form');
    for (var i = 0; i < forms.length; i++) {
      forms[i].addEventListener('submit', function(event) {
      event.preventDefault();
      });
    }
    
  }
  window.addEventListener('load', preventFormSubmit);    
      
      
  function handleFormSubmit(formObject) {
    google.script.run.processForm(formObject);
    document.getElementById("myForm").reset();
  }
</script>

【问题讨论】：

它是如何失败的？有错误信息吗？
@James 这很奇怪...在执行中，它说它失败了但是当我尝试打开它查看详细信息时，它不会打开...有没有其他方法可以找到那个数据？
如果没有错误消息，就无法判断...网络应用的执行设置是什么？

标签： javascript html forms google-apps-script google-sheets

【解决方案1】：

看起来我只需要将其添加为 Web 应用程序即可解决问题。谢谢你的建议！

//OPEN THE FORM IN SIDEBAR 
function showFormInSidebar() {      
  var form = HtmlService.createTemplateFromFile('test').evaluate().setTitle('New Client');
  SpreadsheetApp.getUi().showSidebar(form);
}


function doGet() {
  var form = HtmlService.createTemplateFromFile('Index').evaluate().setTitle('New Client');
  form.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
  return form;
}

test.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
  <center>
    <embed type="text/html" src="redacted"  width="290" height="800">
  </center>
  </body>
</html>

【讨论】：