使用Apps脚本单击提交按钮后，“谢谢页面”

时间：2019-06-27 12:22:59

标签： google-apps-script

我刚刚使用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>

提交表单后，我希望获得一个“谢谢页面”，但该表单不会显示。我应该放在哪里？

1 个答案:

答案 0 :(得分：0)

要将用户重定向至表单提交时的“谢谢”页面，您需要在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仅允许重定向到安全（https）网站，以防止内容混合。

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

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

顺便说一句，如果您使用Google Forms而不是自己对表单进行硬编码，则可以将Apps脚本附加到该脚本上，并安装一个手动触发器“ onFormSubmit”，您可以将其链接到实现该函数的函数打开“谢谢”页面：

https://developers.google.com/apps-script/reference/script/form-trigger-builder#onFormSubmit()

相关问题
最新问题