更新

Question

我使用Google Apps脚本编辑器创建了一个表单，并在提交表单后尝试打开指向特定URL的链接

.html

<form name="submit-to-google-sheet" id="form" action="http://example.com" target="_top" 
onsubmit="myFunction()">

<input type="submit" value="Submit">
</form>

<script>
function myFunction() {
alert("The form was submitted. Please press okay to reload the page");
}
</script>

在这部分

action="http://example.com"

我应该将example.com替换为表单所在的页面URL（只是按照警告说的那样重新加载整个页面），但是由于某种原因，表单操作无法正常工作。任何帮助..

下面是我的仪表板中的完整代码：

Form.html

<!DOCTYPE html>
<html>
<body>
<style>
</style>

<div class="ss-form-container">
<div class="ss-top-of-page">
<div class="ss-form-heading">
<h1 class="ss-form-title" dir="ltr">Test</h1>
<div class="ss-form-desc ss-no-ignore-whitespace" dir="ltr">WELD DATE 
00</div>
<div class="ss-required-asterisk" aria-hidden="true" id="Required">* 
Required</div></div></div><br>

<form name="submit-to-google-sheet" id="form" action="http://example.com" 
target="_top" onsubmit="myFunction()">

<input name="TEXT" type="text" placeholder="text" required>

<input name="email" type="email" placeholder="Email" required>

<div class="ss-q-title">JOINT
<span class="ss-required-asterisk" aria-hidden="true">*</span></div>

<? var innerHTML= createInnerHTML(); ?>  
<select name="JOINT" id="JOINT" aria-label="JOINT" aria-required="true" 
required="">
<option value=""></option>
<? innerHTML.forEach(function(option) { ?>
<option value="<?= option.value ?>"><?= option.text ?></option>
<? }); ?>
</select>

<input type="submit" value="Submit" name="submit" id="Submit">
</form>

<script>
function myFunction() {
alert("The form was submitted. Please press okay to reload the page");
}
</script>

<script>
const scriptURL = 'https://script.google.com/macros/s/AKfycbwTGqZqLTAsOpSweMn0xgHP0sOJPsFg5ZShC1HqzVoDoNi5h5Y/exec'
const form = document.forms['submit-to-google-sheet']
form.addEventListener('submit', e => {
e.preventDefault()
fetch(scriptURL, { method: 'POST', body: new FormData(form)})
  .then(response => console.log('Success!', response))
  .catch(error => console.error('Error!', error.message))
})
</script>

</div>
</body>
</html>

Code.gs

function doGet() {
return HtmlService.createTemplateFromFile('Form.html')
    .evaluate() // evaluate MUST come before setting the Sandbox mode
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

var sheetName = 'Sheet1'
var scriptProp = PropertiesService.getScriptProperties()


function doPost (e) {
var lock = LockService.getScriptLock()
lock.tryLock(10000)

 try {
 var doc = SpreadsheetApp.openById(scriptProp.getProperty('key'))
 var sheet = doc.getSheetByName(sheetName)

 var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues() 
 [0]
 var nextRow = sheet.getLastRow() + 1

 var newRow = headers.map(function(header) {
  return header === 'timestamp' ? new Date() : e.parameter[header]
 })

 sheet.getRange(nextRow, 1, 1, newRow.length).setValues([newRow])

 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 createInnerHTML() {
var ss = SpreadsheetApp.getActive();
var names = ss.getSheetByName("CHOICES");
var namesValues = names.getRange(2,2,names.getLastRow()-1).getValues(); 
var innerHTML = [];
for (var i=0;i<namesValues.length;i++){
innerHTML.push({value:''+ namesValues[i][0], text:namesValues[i][0]});
};
return innerHTML;
}

Answer 1

您可以在表单上使用prevent default并使用JS方法打开一个新窗口

window.open（）

出于安全原因，这不适用于StackOverflow。

document.getElementById('Form').addEventListener('submit', function(evt){
    evt.preventDefault();
    
    
    window.open("http://www.example.com", "_top")
})

<form id = "Form">


<input type="submit" value="Submit">
</form>

Answer 2

您的代码运行正常。表单正在提交以采取措施。

<form name="submit-to-google-sheet" id="form" action="http://example.com" target="_top" onsubmit="myFunction()">
    <input type="submit" value="Submit">
</form>

和js部分：

function myFunction() {
    alert("The form was submitted. Please press okay to reload the page");
}

检查小提琴： http://jsfiddle.net/cm59koat/1/

Answer 3

假设您希望在提交表单时执行以下操作：

在电子表格的Sheet1处添加新行。
您将重定向到表单。

您可以按照以下步骤完成操作：

（1）从html中删除以下脚本：

<script>
const scriptURL = 'https://script.google.com/macros/s/AKfycbwTGqZqLTAsOpSweMn0xgHP0sOJPsFg5ZShC1HqzVoDoNi5h5Y/exec'
const form = document.forms['submit-to-google-sheet']
form.addEventListener('submit', e => {
e.preventDefault()
fetch(scriptURL, { method: 'POST', body: new FormData(form)})
  .then(response => console.log('Success!', response))
  .catch(error => console.error('Error!', error.message))
})
</script>

（2）在您的html中更改此行：

<form name="submit-to-google-sheet" id="form" action="http://example.com" target="_top" 
onsubmit="myFunction()">

对此：

<form name="submit-to-google-sheet" id="form" method="POST" action="https://script.google.com/macros/s/AKfycbwTGqZqLTAsOpSweMn0xgHP0sOJPsFg5ZShC1HqzVoDoNi5h5Y/exec" target="_top" onsubmit="myFunction()">

（3）在您的Code.gs中进行更改：

 return ContentService
  .createTextOutput(JSON.stringify({ 'result': 'success', 'row': nextRow 
 }))
  .setMimeType(ContentService.MimeType.JSON)

对此：

return doGet();

因此try中的doPost块将像这样：

try {
  var doc = SpreadsheetApp.openById(scriptProp.getProperty('key'));
  var sheet = doc.getSheetByName(sheetName);

  var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
  var nextRow = sheet.getLastRow() + 1;

  var newRow = headers.map(function(header) {
    return header === 'timestamp' ? new Date() : e.parameter[header]
  })

  sheet.getRange(nextRow, 1, 1, newRow.length).setValues([newRow])

  return doGet();
}

在这种情况下，doPost返回doGet，因此，在将先前的表单数据提交到电子表格后，Form.html被加载。

更新

如果要重定向到另一个URL，可以执行以下操作。

添加一个onsubmit触发器，该触发器运行一个函数handleFormSubmit，该函数接收表单作为参数（this）。为此，请更改以下内容：

<form name="submit-to-google-sheet" id="form" action="http://example.com" target="_top" onsubmit="myFunction()">

对此：

  <form name="submit-to-google-sheet" id="form" action="http://example.com" 
  target="_top" onsubmit="handleFormSubmit(this)">

接下来，函数handleFormSubmit调用服务器端函数addData，并将表单作为参数传递给它。因此，将此脚本添加到您的HTML中：

<script>
  function handleFormSubmit(formObject) {
    google.script.run.addData(formObject);
  }
</script>

最后，addData（以前是doPost）接收表单对象作为参数：

function addData(data) {
var lock = LockService.getScriptLock()
lock.tryLock(10000)

 try {
   var doc = SpreadsheetApp.openById(scriptProp.getProperty('key'))
   var sheet = doc.getSheetByName(sheetName)

   var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0]
   var nextRow = sheet.getLastRow() + 1

   var newRow = headers.map(function(header) {
     return header === 'timestamp' ? new Date() : data[header]
   })

   sheet.getRange(nextRow, 1, 1, newRow.length).setValues([newRow])
 }

 catch (e) {
 return ContentService
  .createTextOutput(JSON.stringify({ 'result': 'error', 'error': e }))
  .setMimeType(ContentService.MimeType.JSON)
  }

finally {
lock.releaseLock()
}
}

我希望这会有所帮助。

Answer 4

大家好，我尝试了以下代码并为我工作，将所有内容保留在问题中，但仅更改此部分：

<script> const scriptURL = 'Script URL'
const form = document.forms['submit-to-google-sheet']
form.addEventListener('submit', e => { e.preventDefault()
window.open(After submit URL)
fetch(scriptURL, { method: 'POST', body: new FormData(form)})
.then(response => console.log('Success!', response))
.catch(error => console.error('Error!', error.message)) })
</script>

这会将表单保留在链接的表中，并在提交后将表单重定向到添加的URL

提交后重定向表单（表单操作）

4 个答案:

更新