google-apps-script - 使用 Apps 脚本单击提交按钮后的“感谢页面”
问题描述
我刚刚使用 Apps 脚本设置了一个 HTML 表单。我想在用户提交表单后将其引导至感谢页面。你能帮我吗？
我试图创建一个使用 HtmlService.createTemplateFromFile("filename") 但没有运气的新函数。
//code GS//
function doGet(e){
var url = "https://docs.google.com/spreadsheets/d/xxxxxxxxxx/edit#gid=0";
var ss = SpreadsheetApp.openByUrl(url);
var ws = ss.getSheetByName("Options");
var list = ws.getRange(1,1,ws.getRange("A1").getDataRegion().getLastRow(),1).getValues();
var list2 = ws.getRange(1,3,ws.getRange("C1").getDataRegion().getLastRow(),1).getValues();
var userEmail = Session.getActiveUser().getEmail();
var username = userEmail.substring(0, userEmail.indexOf("@"));
var tmp = HtmlService.createTemplateFromFile("page");
tmp.list = list.map(function(r){ return r[0]; });
tmp.list2 = list2.map(function(r){ return r[0]; });
tmp.userEmail = userEmail
return tmp.evaluate();
}
function include (filename){
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
function appendData(data){
var url2 = "https://docs.google.com/spreadsheets/d/XXXX/edit#gid=0";
var sso = SpreadsheetApp.openByUrl(url2);
var wst = sso.getSheetByName("Time");
wst.appendRow([new Date(), data.email, data.case1, data.assignment, data.notes, data.start, data.starttime, data.end, data.endtime]);
}
//end of Code GS//
这是我的 HTML：
<!DOCTYPE html>
<html lang="en" >
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Secure Access Request</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<?!= include("page-css"); ?>
<?!= include("page-js"); ?>
</head>
<body>
<div class="container">
<div class="row">
<h4>TIMECLOCK</h4>
<p>Your email address <b>(<?= userEmail; ?>)</b> will be recorded when you submit this form.</p>
<div class="row">
<div class="input-field col s12">
<h5>CASE</h5>
<select id="case1" name="case" class="validate" required>
<option value="" disabled selected>Select Case</option>
<? for (var i=0;i<list.length;i++){ ?>
<option><?= list[i]; ?></option>
<? } ?>
</select>
</div>
<div class="input-field col s12">
<h5>ASSIGNMENT</h5>
<select id="assignment" name="assignment" class="validate" required>
<option value="" disabled selected>Select Assignment</option>
<? for (var i=0;i<list2.length;i++){ ?>
<option><?= list2[i]; ?></option>
<? } ?>
</select>
</div>
<div class="row">
<div class="input-field col s6">
<h5>STARTED</h5>
<div class="row">
<div class="input-field col s4">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="month" onchange="datestart();" class="validate" required>
<option value="" disabled>Month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<script>
function TimesheetDownloadPageOnLoad() {
var month = new Date().getMonth()+1;
$('#dlMonth option:gt(' + month + ')').prop('disabled', true);
document.getElementById("month").value = month;
}
TimesheetDownloadPageOnLoad();
</script>
</div>
<div class="input-field col s4">
<select id="day" onchange="datestart();" class="validate" required>
<option value="" disabled selected>Day</option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<script>
function TimesheetDownloadPageOnLoad() {
var day = new Date().getDate();
$('#dlMonth option:gt(' + day + ')').prop('disabled', true);
document.getElementById("day").value = day;
}
TimesheetDownloadPageOnLoad();
</script>
</div>
<div class="input-field col s4">
<select id="year" onchange="datestart();" class="validate" required>
<option value="" disabled selected>Year</option>
<option value="2019">2019</option>
<script>document.getElementById("year").value = (new Date()).getFullYear();</script>
</select>
</div>
<script>
function datestart() {
document.getElementById('start').value = document.getElementById('month').value + '/' + document.getElementById('day').value + '/' + document.getElementById('year').value;
}
</script>
<input type="hidden" id="start" disabled/>
<script type="text/javascript">
var a = document.getElementById("start");
a.value = document.getElementById('month').value + '/' + document.getElementById('day').value + '/' + document.getElementById('year').value;
</script>
</div>
</div>
<div class="input-field col s6">
<h5>TIME</h5>
<div class="row">
<div class="input-field col s6">
<select id="hour" onchange="timestart();" class="validate" required>
<option value="" disabled>HH</option>
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>
</div>
<script>
function TimesheetDownloadPageOnLoad() {
var hour = new Date().getHours();
$('#dlMonth option:gt(' + hour + ')').prop('disabled', true);
document.getElementById("hour").value = hour;
}
TimesheetDownloadPageOnLoad();
</script>
<div class="input-field col s6">
<select id="minute" onchange="timestart();" class="validate" required>
<option value="" disabled selected>mm</option>
<option value="01">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
</select>
<script>
function TimesheetDownloadPageOnLoad() {
var minute = new Date().getMinutes();
$('#dlMonth option:gt(' + minute + ')').prop('disabled', true);
document.getElementById("minute").value = minute;
}
TimesheetDownloadPageOnLoad();
</script>
</div>
</div>
<script>
function timestart() {
document.getElementById('timestarted').value = document.getElementById('hour').value + ':' + document.getElementById('minute').value;
}
</script>
<input type="hidden" id="timestarted" disabled/>
<script type="text/javascript">
var a = document.getElementById("timestarted");
a.value = document.getElementById('hour').value + ':' + document.getElementById('minute').value;
</script>
</div>
</div>
</div>
</div>
<div class="row department">
<div class="input-field col s6">
<h5>ENDED</h5>
<div class="row">
<div class="input-field col s4">
<select id="month1" onchange="dateend();" class="validate" required>
<option value="" disabled>Month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<script>
function TimesheetDownloadPageOnLoad() {
var month = new Date().getMonth()+1;
$('#dlMonth option:gt(' + month + ')').prop('disabled', true);
document.getElementById("month1").value = month;
}
TimesheetDownloadPageOnLoad();
</script>
</div>
<div class="input-field col s4">
<select id="day1" onchange="dateend();" class="validate" required>
<option value="" disabled selected>Day</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<script>
function TimesheetDownloadPageOnLoad() {
var day = new Date().getDate();
$('#dlMonth option:gt(' + day + ')').prop('disabled', true);
document.getElementById("day1").value = day;
}
TimesheetDownloadPageOnLoad();
</script>
</div>
<div class="input-field col s4">
<select id="year1" onchange="dateend();" class="validate" required>
<option value="" disabled Selected>Year</option>
<option value="2019">2019</option>
<script>document.getElementById("year1").value = (new Date()).getFullYear();</script>
</select>
<script>
function dateend() {
document.getElementById('end').value = document.getElementById('month1').value + '/' + document.getElementById('day1').value + '/' + document.getElementById('year1').value;
}
dateend();
</script>
<input type="hidden" id="end" disabled/>
<script type="text/javascript">
var a = document.getElementById("end");
a.value = document.getElementById('month1').value + '/' + document.getElementById('day1').value + '/' + document.getElementById('year1').value;
</script>
</div>
</div>
</div>
<div class="input-field col s6">
<h5>TIME</h5>
<div class="row">
<div class="input-field col s6">
<select id="hour1" onchange="timeend()" class="validate" required>
<option value="" disabled selected>HH</option>
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>
<script>
function TimesheetDownloadPageOnLoad() {
var hour = new Date().getHours();
$('#dlMonth option:gt(' + hour + ')').prop('disabled', true);
document.getElementById("hour1").value = hour;
}
TimesheetDownloadPageOnLoad();
</script>
</div>
<div class="input-field col s6">
<select id="minute1" onchange="timeend()" class="validate" required>
<option value="" disabled selected>mm</option>
<option value="01">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
</select>
<script>
function TimesheetDownloadPageOnLoad() {
var minute = new Date().getMinutes();
$('#dlMonth option:gt(' + minute + ')').prop('disabled', true);
document.getElementById("minute1").value = minute;
}
TimesheetDownloadPageOnLoad();
</script>
</div>
<script>
function timeend() {
document.getElementById('endtime').value = document.getElementById('hour1').value + ':' + document.getElementById('minute1').value;
}
</script>
<input type="hidden" id="endtime" disabled/>
<script type="text/javascript">
var a = document.getElementById("endtime");
a.value = document.getElementById('hour1').value + ':' + document.getElementById('minute1').value;
</script>
</div>
</div>
<div class="row department2">
<div class="input-field col s12 department">
<input id="notes" type="text" name="notes" class="validate" required>
<label for="notes">Notes</label>
</div>
<input id="email" type="hidden" class="validate" name="email" value= <?= userEmail; ?> disabled>
</div>
<div class="row">
<button id ="btn" class="btn waves-effect waves-light btn-large" style="background-color: #1A4677;margin-top:-20px;" type="submit" name="submit">Submit
<i class="material-icons right">send</i>
</button>
</div>
<script>
var case1 = document.getElementById("case1");
var assignment = document.getElementById("assignment");
var start = document.getElementById("start");
var starttime = document.getElementById("timestarted");
var end = document.getElementById("end");
var endtime = document.getElementById("endtime");
var notes = document.getElementById("notes");
var email = document.getElementById("email");
document.getElementById("btn").addEventListener("click", buttonClickAction);
//form validation
function buttonClickAction(){
var toValidate = {
case1: "Case Required!",
assignment: "Assignment Required!",
month: "Month Required!",
day: "Date Required!",
year: "Year Required!",
hour: "Hour Required!",
minute: "Minute Required",
month1: "Month Required!",
day1: "Date Required!",
year1: "Year Required!",
hour1: "Hour Required!",
minute1: "Minute Required!",
notes: "Notes Required!"
};
var idKeys = Object.keys(toValidate);
var allValid = true;
idKeys.forEach(function(id){
var isValid = checkIfValid(id,toValidate[id]);
if(!isValid){
allValid = false;
}
});
if (allValid){
addRecord();
}
}
function checkIfValid(elID,message){
var isValid = document.getElementById(elID).checkValidity();
if(!isValid){
M.toast({html: message });
return false;
}
return true;
}
//end of form validation
function addRecord(){
var data = {
case1: case1.value,
assignment: assignment.value,
start: start.value,
starttime: starttime.value,
end: end.value,
endtime: endtime.value,
notes: notes.value,
email: email.value
};
google.script.run.appendData(data);
}
</script>
<label for="terms"></label>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</div>
</body>
</html>
提交表单后，我期待“感谢页面”，但未显示。我应该把它放在哪里？
解决方案
要将用户重定向到表单提交时的感谢页面，您需要在window.location.href HTML 文件中实现重定向功能 - 在您实现按钮并访问代码的脚本部分后，您可以在其中为“<code”添加一个 EventListener >单击按钮”，您将重定向粘贴到您的函数buttonClickAction()中。这里是您的代码摘录和示例：
<html>
<body>
<div class="row">
<button id ="btn" class="btn waves-effect waves-light btn-large" style="background-color: #1A4677;margin-top:-20px;" type="submit" name="submit">Submit
<i class="material-icons right">send</i>
</button>
</div>
<script>
document.getElementById("btn").addEventListener("click", buttonClickAction);
function buttonClickAction(){
…
//Formvalidation
...
window.location.href = "https://www.wikipedia.org/";
}
</script>
</body>
</html>
但是，当您将 html 文件绑定到 Google Apps 脚本时 - 由于安全原因，Google 只允许重定向到安全 (https) 网站，以防止混合内容。
有关更多信息，请查看： https ://developers.google.com/web/fundamentals/security/prevent-mixed-content/what-is-mixed-content
如果这不适合您，您可以通过感谢提醒替换您的感谢页面作为解决方法，即替换window.location.href = "page"；通过alert(“Thank you!”).
顺便说一句，如果您使用 Google 表单而不是自己对表单进行硬编码，则可以将您的 Apps 脚本附加到它并安装手动触发器“<code>onFormSubmit”，您可以将其链接到您的函数，您可以在其中实现“谢谢”页面：
https://developers.google.com/apps-script/reference/script/form-trigger-builder#onFormSubmit()
推荐阅读
- python - 如何使用插值方法调整复数值数组的大小？
- c++ - 如何正确使用 std::align
- azure-ad-b2c - 注册工作/密码重置工作，但一旦完成就无法再次登录
- vue.js - Vue组件方法行为怪异-处理数据时加载器动画不起作用
- python - 如何在 Python 中获取带有请求的文本响应
- azure - 通过安卓设备访问私网
- node.js - 如何使用 node.js 更新 mongo db 集合中的许多记录
- c - 通过类型转换指针将数据从一个结构指针分配给另一个
- javascript - 汉堡图标打不开
- c++ - 为什么我需要很多线程才能将 memcpy() 推到系统的极限？