Gasで作ったhtmlサイドバーのフォームに入力した値をスプレッドシートへ出力できません。

前提

現在、スプレッドシートで簡単な商品一覧表を作っています。
内容としては、スプレッドシートにhtmlのサイドバー（簡単な商品情報登録フォーム）を表示させ、サイドバーフォームに入力した内容をスプレッドシートへ出力するというものです。

今回、その過程でスプレッドシートへの書き込みがうまく実行されません。
色々調べて試したのですが、全く実行されずお手上げ状態です。
間違いやテックニックなどをご教示頂けると幸いです。
宜しくお願いいたします。

＜追記＞
初心者ですので、載せているコードが読みにくい等あると思います。
また、ネットからコピペしてアレンジしている部分もあります。

説明が不十分なところも多々あると思いますがご容赦ください。

実現したいこと

サイドバーのフォームに入力した値をスプレッドシートへ出力したい。

発生している問題・エラーメッセージ

送信ボタンを押してもGASが実行されない。

該当のソースコード（.gs）

var sh =  SpreadsheetApp.openById("シートID");
var st = sh.getSheetByName("シート1");

function  menuSidebar() {
  let ui = SpreadsheetApp.getUi();
  let template = HtmlService.createTemplateFromFile('sidebar');
  let htmlOutput = template.evaluate();
  htmlOutput.setTitle('商品登録フォーム');
  ui.showSidebar(htmlOutput);
}

function doPost(e) {
  var lastrow = st.getLastRow()+1;
  st.getRange(lastrow,1).setValue(e.parameter.datetime);
  st.getRange(lastrow,2).setValue(e.parameter.user);
  st.getRange(lastrow,3).setValue(e.parameter.item_name);
  st.getRange(lastrow,4).setValue(e.parameter.quantity);
  st.getRange(lastrow,5).setValue(e.parameter.notes);

  return  menuSidebar();
}

該当のソースコード（.html）

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <form action="/exec" method="POST">
      <label>【登録日】</label><br><input type="datetime-local" name="datetime" placeholder="日時を選択してください" required><br><br>
      <label>【登録者】</label><br><input type="text" name="user" list="user" placeholder="その他登録者は記名" autocomplete="off" required>
              <datalist id="user">
                <? var user = SpreadsheetApp.openById("シートID").getSheetByName("User").getDataRange().getValues(); ?>
                <? for(var i = 0;i<user.length;i++){ ?>
                <option name="user"><?= user[i][0] ?></option>
                <? } ?>
              </datalist><br><br>
      <label>【商品名】</label><br><input type="text" name="item_name" placeholder="（例：〇〇" required><br><br>
      <label>【数　量】</label><br><input type="text" name="quantity" placeholder="（例：１※数字のみ" required><br><br>
      <label>【備　考】</label><br><textarea name="notes"></textarea><br><br>
      <input type="submit" value="送信">
      </form>
  </body>
</html>

イメージ説明

試したこと

GAS側でsidebar.js.htmlを作りgoogle.script.runを実行。

イメージ説明

補足情報（FW/ツールのバージョンなど）

回答1件

ベストアンサー

多分、サイドバーを開いた状態でデベロッパーツールを開き、送信すると、コンソールに「unsafe attempt to initiate navigation for frame with origin」というエラーが出ていると思います。

サイドバーからスプレッドシートへ書き込むコードを実行する場合において、値の受け渡しにフォームの submit を使うならば、公式リファレンス記載のコードに沿った書き方をするのが無難です。

コード.gs

js
1var sh =  SpreadsheetApp.openById("シートID");
2var st = sh.getSheetByName("シート1");
3
4
5function  menuSidebar() {
6  let ui = SpreadsheetApp.getUi();
7  let template = HtmlService.createTemplateFromFile('sidebar');
8  let htmlOutput = template.evaluate();
9  htmlOutput.setTitle('商品登録フォーム');
10  ui.showSidebar(htmlOutput);
11}
12
13function processForm(e) {
14  var lastrow = st.getLastRow()+1;
15  st.getRange(lastrow,1).setValue(e.datetime);
16  st.getRange(lastrow,2).setValue(e.user);
17  st.getRange(lastrow,3).setValue(e.item_name);
18  st.getRange(lastrow,4).setValue(e.quantity);
19  st.getRange(lastrow,5).setValue(e.notes);
20}

sidebar.html

js
1<!DOCTYPE html>
2<html>
3
4<head>
5  <base target="_top">
6</head>
7
8<body>
9  <form id="myForm" onsubmit="handleFormSubmit(this)">
10    <label>【登録日】</label><br><input type="datetime-local" name="datetime" placeholder="日時を選択してください" required><br><br>
11    <label>【登録者】</label><br><input type="text" name="user" list="user" placeholder="その他登録者は記名" autocomplete="off" required>
12    <datalist id="user">
13      <? var user = SpreadsheetApp.openById("シートID").getSheetByName("User").getDataRange().getValues(); ?>
14      <? for(var i = 0;i<user.length;i++){ ?>
15      <option name="user">
16        <?= user[i][0] ?>
17      </option>
18      <? } ?>
19    </datalist><br><br>
20    <label>【商品名】</label><br><input type="text" name="item_name" placeholder="（例：〇〇" required><br><br>
21    <label>【数　量】</label><br><input type="text" name="quantity" placeholder="（例：１※数字のみ" required><br><br>
22    <label>【備　考】</label><br><textarea name="notes"></textarea><br><br>
23    <input type="submit" value="Submit" />
24  </form>
25    <script>
26      // Prevent forms from submitting.（エラー抑止のおまじない）
27      function preventFormSubmit() {
28        var forms = document.querySelectorAll('form');
29        for (var i = 0; i < forms.length; i++) {
30          forms[i].addEventListener('submit', function(event) {
31            event.preventDefault();
32          });
33        }
34      }
35      window.addEventListener('load', preventFormSubmit);
36
37      function handleFormSubmit(formObject) {
38        // コード.gs の processForm 関数を呼び出す。成功したら、 この script 内の completion 関数を呼び出す。
39        google.script.run.withSuccessHandler(completion).processForm(formObject);
40      }
41
42      function completion() {
43        console.log("success");
44      }
45    </script>
46</body>
47
48</html>