在Google表格脚本编辑器中,我使用以下代码创建了一个表单:
.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()
}
}
.html
<!DOCTYPE html>
<html>
<body>
<style>
</style>
<form name="submit-to-google-sheet">
<input name="text" type="text" placeholder="text" required>
<input name="email" type="email" placeholder="Email" required>
<input type="submit" name="submit" value="Submit" id="Submit" class="jfk-button jfk-button-action ">
</form>
<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>
</body>
</html>
当用户提交表单时,我成功地接收了工作表中的数据,但是用户不知道他的信息已交付,因此我只需要在提交表单后显示一条确认消息,例如“谢谢!”。
提前谢谢..
答案 0 :(得分:0)
我想出了一些在类似情况下可能会有所帮助的东西:
在.html文件中添加提交输入,如下所示:
<form name="submit-to-google-sheet" id="form" onsubmit="myFunction()">
<input type="submit" value="Submit">
</form>
然后添加以下脚本:
<script>
function myFunction() {
alert("The form was submitted");
}
</script>
这将在屏幕顶部触发一个窗口,该窗口显示表单已成功完成。谢谢
答案 1 :(得分:0)
一般来说,在制作提交表单时,会发送到submission.html。
<块引用>“input type="submit”定义了一个提交按钮,将所有表单值提交给表单处理程序。表单处理程序通常是一个服务器页面,带有用于处理输入数据的脚本。表单处理程序被指定在表单的 action 属性中。