Javascript 提交后重定向表单（表单操作）_Javascript_Forms_Google Apps Script

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

javascript forms google-apps-script

Javascript 提交后重定向表单（表单操作）,javascript,forms,google-apps-script,Javascript,Forms,Google Apps Script,我使用google apps脚本编辑器创建了一个表单，并试图在表单提交后打开指向特定URL的链接 .html 我应该用表单所在的页面URL替换example.com（正如警告所说，只是为了重新加载整个页面），但是表单操作由于某种原因不起作用。任何帮助以下是我的仪表板中的完整代码： Form.html <!DOCTYPE html> <html> <body> <style> </style> <div class="ss-fo

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

.html

我应该用表单所在的页面URL替换example.com（正如警告所说，只是为了重新加载整个页面），但是表单操作由于某种原因不起作用。任何帮助

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

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>


测验
焊接日期
00
* 
必需的

共同的
*
函数myFunction（）{
警报（“表单已提交。请按“确定”重新加载页面”）；
}
常量脚本URL=https://script.google.com/macros/s/AKfycbwTGqZqLTAsOpSweMn0xgHP0sOJPsFg5ZShC1HqzVoDoNi5h5Y/exec'
const form=document.forms['submit-to-google-sheet']
form.addEventListener（'submit'，e=>{
e、 预防默认值（）
fetch（scriptURL，{method:'POST'，body:newformdata（form）}）
.then（response=>console.log（'Success！'，response））
.catch（error=>console.error（'error！'，error.message））
})

代码.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;
}

函数doGet（）{
返回HtmlService.createTemplateFromFile（'Form.html'）
.evaluate（）//必须在设置沙盒模式之前进行评估
.setXFrameOptionsMode（HtmlService.XFrameOptionsMode.ALLOWALL）；
}
var sheetName='Sheet1'
var scriptProp=PropertiesService.getScriptProperties（）
函数doPost（e）{
var lock=LockService.getScriptLock（）
锁。tryLock（10000）
试一试{
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（函数（头）{
return header=='timestamp'？new Date（）：e.parameter[header]
})
sheet.getRange（nextRow，1，1，newRow.length）.setValues（[newRow]）
返回内容服务
.createTextOutput（JSON.stringify（{'result'：'success'，'row'：nextRow
}))
.setMimeType（ContentService.MimeType.JSON）
}
捕获（e）{
返回内容服务
.createTextOutput（JSON.stringify（{'result'：'error'，'error'：e}））
.setMimeType（ContentService.MimeType.JSON）
}
最后{
lock.releaseLock（）
}
}
函数createInnerHTML（）{
var ss=SpreadsheetApp.getActive（）；
var name=ss.getSheetByName（“选项”）；
var namesValues=names.getRange（2,2，names.getLastRow（）-1.getValues（）；
var innerHTML=[]；
对于（var i=0；i您可以在表单上使用prevent default并使用JS方法打开一个新窗口
window.open（）
由于安全原因，这在StackOverflow上不起作用

document.getElementById（'Form'）.addEventListener（'submit'，函数（evt）{
evt.preventDefault（）；
窗口打开（“http://www.example.com“，”顶部“）
})
您的代码运行正常。正在将表单提交给提供的操作
<form name="submit-to-google-sheet" id="form" action="http://example.com" target="_top" onsubmit="myFunction()">
    <input type="submit" value="Submit">
</form>

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

将在电子表格的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>

<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()">

为此：
return doGet();

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

因此doPost
中的try
块如下所示：
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
）

最后，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()
}
}

我希望这能有所帮助。好的，各位，
我尝试了下面的代码并为我工作，
保留问题中的所有内容，但仅更改此部分：
<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>

const scriptURL='scriptURL'
const form=document.forms['submit-to-google-sheet']
form.addEventListener（'submit'，e=>{e.preventDefault（）
打开（提交URL后）
fetch（scriptURL，{method:'POST'，body:newformdata（form）}）
.then（response=>console.log（'Success！'，response））
.catch（error=>console.error（'error！'，error.message））}）

这将保持表单发布到链接的工作表，并在提交后将表单重定向到添加的URL
当我尝试时，代码会起作用。“表单操作不起作用”是什么意思？-请用您的回答更新问题，谢谢。感谢您对Traktor53的兴趣。是的，当我在google apps脚本之外尝试示例代码时，它工作了，但由于某些原因，当我发布新版本的google apps脚本时，它不工作，因此如果您只想重定向，我将发布整个代码以获取更多信息当表单提交时，最后一个脚本的作用是什么？（constscripturl=…
）如果您删除此脚本并将action中的URL更改为所需的URL，它应该会成功重定向。有什么原因您不能这样做吗？感谢您对Lamblichus感兴趣。我尝试删除脚本，但工作表不再收到任何提交。有什么想法吗？？？@MahmoudBayoumi我发布了答案，如果有，请告诉我对你有用。谢谢你的兴趣Waseem。是的，当我在google apps脚本之外尝试示例代码时，它起了作用，但由于某些原因，当我发布新版本的google apps脚本时，它仍然不起作用，因此我将发布整个代码以获取更多信息谢谢你的兴趣Ahmed。上面的代码给出了一个错误“文档未定义”感谢您对Iamblichus的兴趣。代码现在正在运行，但我所需要的是将表单重定向到另一个URL（而不是表单URL），当然，将表单发送到sheet@Mahmo
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();
}

<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)">

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

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

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