HTMLのページ遷移を正常にしたい！

こちらの質問に目を通していただきまして誠にありがとうございます。

先日まで「GoogleスプレッドシートとGASを使って用語集を作りたい」というタイトルで質問をさせていただいておりました。
そちらの悩みはおかげさまで解決に至り、（おそらく）GASの部分は問題なく正常になったと思います。

しかし、そちらの悩みが解決しほぼ完成となった現在、HTMLの方でエラーが発生してしまいました。
エラー内容としては、ページ上部にある「全件表示」、又は検索ウィンドウ横にある「送信」をクリックすると全く別のURLに飛んでしまうということです。
この問題を解決して、それぞれのherfに設定しているURLに飛ぶことが出来れば理想通りです。

現状については、HTML及びGASのコードとスプレッドシートのURL及び画像を以下に記載しております。
皆様のお手数をおかけしますが、どうぞよろしくお願い致します。
どうぞよろしくお願い致します。

【悩み】
ページ上の該当箇所をクリックした際に、設定しているURLへページが飛ばない
1.全件表示をクリックした場合https://script.google.com/macros/s/AKfycbxsxhyCOjM2QSRxOF1jcDIL1iW1sHsnqf9ITQg0cSwYJ8RvRaRv0I-ALSE24JYAXBpVLg/exec（トップページ）
上記URLへ遷移させたいが、以下のURLに飛んでしまう
https://n-5o7juy5mtqfz5hx73dhsacin4yxl2li3luh6nza-0lu-script.googleusercontent.com/userCodeAppPanel

2.検索ウィンドウ横の「送信」をクリックした場合https://script.google.com/macros/s/AKfycbxsxhyCOjM2QSRxOF1jcDIL1iW1sHsnqf9ITQg0cSwYJ8RvRaRv0I-ALSE24JYAXBpVLg/exec?name=searchWord（キーワードでソートされたページ）
上記URLへ遷移させたいが、以下のURLに飛んでしまう
https://n-5o7juy5mtqfz5hx73dhsacin4yxl2li3luh6nza-0lu-script.googleusercontent.com/userCodeAppPanel?searchWord=%E3%82%B9%E3%83%9D%E3%83%BC%E3%83%84

【目標・ゴール】
ページ上の該当箇所をクリックした際に、設定しているURLへページが飛ぶこと

HTML
1<!DOCTYPE html>
2<html>
3  <head>
4    <base target="_top">
5  </head>
6  <body>
7  <style>
8  #header-fixed{
9    border: 5px solid #fff;    /* 表示領域を白枠で囲う */
10    position: fixed;            /* ヘッダーの固定 */
11    padding:10px 0 10px;       /* 上10px、下20pxをあける */
12    top:  0px;                   /* 位置(上0px) */
13    left: 10px;                  /* 位置(右0px) */
14    width: 100%;                /* 横幅100%　*/
15    height:50px;                /* 縦幅50px */
16    background-color:#FFF      /* バックの色 */
17  }
18  #content{
19    top:  70px;                   /* 位置(上0px) */
20    left: 10px;                  /* 位置(右0px) */
21    padding:60px 0 0px;
22    width: 100%;                /* 横幅100%　*/
23    background-color: "#000000" /* バックの色 */
24  }
25  #menu{
26    font-size : 15px;
27    border : 1px;
28    padding : 10px 20px 0px 0px;
29  }
30  table.search {
31    border: solid 1px #000000;
32    border-collapse: collapse;
33  }
34</style>
35  <div id='header-fixed'>
36    <form name="serchForm" action="https://script.google.com/macros/s/AKfycbxsxhyCOjM2QSRxOF1jcDIL1iW1sHsnqf9ITQg0cSwYJ8RvRaRv0I-ALSE24JYAXBpVLg/exec?name=searchWord">
37    <a id='menu' href="https://script.google.com/macros/s/AKfycbxsxhyCOjM2QSRxOF1jcDIL1iW1sHsnqf9ITQg0cSwYJ8RvRaRv0I-ALSE24JYAXBpVLg/exec">全件表示</a>
38    検索文字：<input type="text" width="30%" name="searchWord" required>
39    <input type="submit">
40    <font size="1px">　　　　　　現在の時刻：<span id="clock_time"></span></font>
41    </form>
42<script>
43function clock()
44{
45    // 現在日時を表すインスタンスを取得
46    var now = new Date();
47    var dateTime =  now.getTime();
48    var year = now.getFullYear();
49    var month = now.getMonth()+1;
50    var day = now.getDate(); 
51    var h = now.getHours();
52    var mi = now.getMinutes();
53    var s = now.getSeconds();
54    document.getElementById("clock_time").innerHTML = year + "年" + month + "月" + day + "日 " + h + "時" + mi + "分" + s + "秒";
55}
56setInterval(clock, 1000);
57</script>
58  </div>
59  <div id='content'>
60    <ul>
61      <?
62      //  シートから用語集を表示する
63　　     var id ='16R5lcJWbXBezCW5cIoPz0rBS35lrtz9sMjYLm2wvn3Y';
64    　　 var mySheet = SpreadsheetApp.openById(id).getSheetByName("用語集");
65        var endrow = mySheet.getLastRow();
66        var myData = mySheet.getRange(2, 1 , endrow-1 , 4).getValues();
67        myMail = Session.getActiveUser().getEmail();
68        search = getSearch();
69        output.append('検索文字='+ escape_html(search));
70        output.append('<table class="search" border="1">');
71        output.append('<tr bgcolor="#aaccff"><th>カテゴリ</th><th>用語</th><th>内容</th></tr>');
72        y=0; //検索結果のカウンタ
73        for(var i=0;i<myData.length;i++){
74          category = myData[i][0];
75          word = myData[i][1];
76　　　　　　content = myData[i][2];
77          url = myData[i][3];
78          if(search !== undefined){
79            if (word.indexOf(search) !== -1){
80              replace = word.replace(search, '<font color="#ff0000" size="2px"><b>' + search + '</b></font>');
81              output.append('<tr>');
82              output.append('<td width="10%" valign="top"><font color="#000000" size="2px">'+ category +'</font></td>');
83              output.append('<td width="20%" align="left" valign="top"><font size="2px">'+ replace +'</font></td>');
84              output.append('<td valign="top"><font style="bold" size="2px" color="#000000">'+　content +'</font></td>');
85              output.append('</tr>');
86              y ++;
87            }
88          }else{
89            output.append('<tr>');
90            output.append('<td width="10%" valign="top"><font color="#000000" size="2px">'+ category +'</font></td>');
91            output.append('<td width="20%" align="left" valign="top"><font color="#000000" size="2px">'+ word +'</font></td>');
92            output.append('<td valign="top"><font style="bold" size="2px" color="#000000">'+　content +'</font></td>');
93            output.append('</tr>');
94          }
95        }
96        output.append('</table>');
97        if (y == 0){
98          output.append('検索できませんでした。キーワードを変えてもう一度検索してください。');
99        }
100      ?>
101      <?
102        function escape_html (string) {
103          if(typeof string !== 'string') {
104            return string;
105          }
106          return string.replace(/[&'`"<>]/g, function(match) {
107            return {
108            '&': '&amp;',
109            "'": '&#x27;',
110            '`': '&#x60;',
111            '"': '&quot;',
112            '<': '&lt;',
113            '>': '&gt;',
114            }[match]
115          });
116        }
117      ?>
118    </ul>
119    </div>
120</body>
121</html>

JavaScript
1search = "";
2var id ='16R5lcJWbXBezCW5cIoPz0rBS35lrtz9sMjYLm2wvn3Y';
3var sheet = SpreadsheetApp.openById(id).getSheetByName("用語集");
4
5function doPost(e){
6    doGet(e);
7    return HtmlService.createTemplateFromFile("index").evaluate(); 
8}
9function doGet(e) {
10  search = e.parameter.searchWord;
11  if (e.parameter.name == undefined) {
12    //初期表示はビューのみ
13    return HtmlService.createTemplateFromFile("index").evaluate(); 
14  }
15  if (e.parameter.searchWord !== undefined) {
16    //検索時も同じ画面に返します
17    return HtmlService.createTemplateFromFile("index").evaluate(); 
18  }
19}
20function getSearch(){
21    return search;
22}

Google　スプレッドシート URL
https://docs.google.com/spreadsheets/d/16R5lcJWbXBezCW5cIoPz0rBS35lrtz9sMjYLm2wvn3Y/edit#gid=0![

どうかお力添えをいただけないでしょうか。
どうぞよろしくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

 <form name="serchForm" action="https://script.google.com/macros/s/AKfycbxsxhyCOjM2QSRxOF1jcDIL1iW1sHsnqf9ITQg0cSwYJ8RvRaRv0I-ALSE24JYAXBpVLg/exec?name=searchWord">
//ここに、method="post" でいけませんか？

 <form name="serchForm" method="post" action="https://script.google.com/macros/s/AKfycbxsxhyCOjM2QSRxOF1jcDIL1iW1sHsnqf9ITQg0cSwYJ8RvRaRv0I-ALSE24JYAXBpVLg/exec?name=searchWord">

↓これを呼び出して、URLのパラメーターで処理を分けたいんだと思うんですが、これが呼び出されていないので。

gas
1function doPost(e){
2    doGet(e);
3    return HtmlService.createTemplateFromFile("index").evaluate(); 
4}

ただ、今ってデプロイするたびにURL変わる仕様になってたような気がするので固定化する必要があるかもしれません。

これは余談ですが、GASでも使えるフレームワークのVUEとVUETIFYを使うともっと簡単に構築できると思いますので
余力があれば試してみていただけると！

投稿2021/05/21 14:05

Tatsunosuke

総合スコア599

k2zu1112

2021/05/22 03:51

Tatsunosuke様、ご回答ありがとうございます。そして、無事に問題も解決致しました！それに加えて、新たなご提案もいただき光栄です。そちらも試してみます。短い間ではございましたが、大変お世話になりました！

Tatsunosuke

2021/05/22 04:23

よかったです！おめでとうございます！頑張ってください！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

HTMLのページ遷移を正常にしたい！

関連した質問