小贝子编程

使用应用程序脚本单击提交按钮后"Thank you page"



我刚刚使用应用程序脚本设置了HTML表单。在提交表格后，我想指导用户到Thank You页面。你能帮忙吗？

我尝试创建一个使用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>

提交表格后，我希望有一个"感谢页"，但没有显示。我应该在哪里放置？

要将用户重定向到表单提交中的感谢页面，您需要在HTML文件内实现重定向函数window.location.href - 实现按钮并访问脚本部分后代码，在添加" on button click"的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仅由于安全原因将其重定向到Safe(HTTPS(网站，以防止混合内容。

有关更多信息检查：https://developers.google.com/web/fundamentals/security/prevent-mixed-content/what-is-mixed-content

如果这不适合您，则可以通过感谢警报替换为您的感谢页面，即更换window.location.href = "page"；通过alert(“Thank you!”)。

顺便说一句，如果您使用Google表单而不是自己使用硬编码表单，则可以将应用程序脚本附加到其上，并安装手动触发" onFormSubmit"，您可以链接到您的函数，并在实现"打开"的情况下链接到您的功能。谢谢你"页：

在

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium