htmlで作成した入力フォームの値を.gs側で取得したい

#やりたいこと
htmlで作成した入力フォームの値を.gs側で取得したい
htmlとgsのコードは以下になります
具体的には、
"ボタンを押したときに名前やメールアドレスの入力フォームの値をセルに出力する"
です

html
1<body>
2<h1>お問合せ</h1>
3<form action="#" method="post">
4	<p>お名前（必須）：<br>
5	<input type="text" name="name"></p>
6	<p>メールアドレス：<br>
7	<input type="text" name="mail"></p>
8    <input type="button" name="btn" value=”送信する”>
9</form>
10</body>

gs
1function myFunction() 
2{
3  onOpen();
4}
5
6function onOpen()
7{
8  SpreadsheetApp.getUi().createMenu('dialog').addItem('open', 'openDialog').addToUi();
9}
10function openDialog()
11{
12  var html = HtmlService.createHtmlOutputFromFile('index');
13  SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
14      .showModalDialog(html, 'Dialog title');  
15}

#質問
doPostやdoGetの使い方を調べてもどこに何を記載してよいか不明で
どなたかご教示いただけますでしょうか

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

回答1件

ベストアンサー

HTML側で送信ボタンクリックイベント時にgoogle.script.runを使ってサーバーサイドの関数を呼び出すことで実現できます。

html
1<!DOCTYPE html>
2<html>
3    <head>
4        <base target="_top" />
5        <title>Dialog title</title>
6        <script>
7            document.addEventListener("DOMContentLoaded", event => {
8                const submit = document.querySelector("input[name=btn]");
9                submit.addEventListener("click", () => {
10                    const name = document.querySelector("input[name=name]").value;
11                    const mail = document.querySelector("input[name=mail]").value;
12                    google.script.run
13                        .withSuccessHandler(() => google.script.host.close())
14                        .withFailureHandler(event => console.log("error: " + event))
15                        .addData(name, mail);
16                });
17            });
18        </script>
19    </head>
20    <body>
21        (省略)
22    </body>
23</html>

JavaScript
1function myFunction() {
2    onOpen();
3}
4
5function onOpen() {
6    SpreadsheetApp.getUi().createMenu("dialog").addItem("open", "openDialog").addToUi();
7}
8function openDialog() {
9    var html = HtmlService.createHtmlOutputFromFile("index");
10    SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
11        .showModalDialog(html, "Dialog title");
12}
13
14function addData(name, mail) {
15    const file = SpreadsheetApp.getActiveSpreadsheet();
16    const sheet = file.getSheetByName("シート1");
17    sheet.appendRow([name, mail]);
18}

投稿2020/07/05 17:03

draq

総合スコア2573

hachimitu

2020/07/12 12:56

やりたいができました！ありがとうございました！しかし document.addEventListener("DOMContentLoaded", event => { const submit = document.querySelector("input[name=btn]"); submit.addEventListener("click", () => { が何をしているのかさっぱりでした。。。クリックしたときの動作だと思われるのですが、勉強してきます。

draq

2020/07/12 20:40

HtmlElement.addEventListener は HTML エレメントへイベントハンドラを登録します。１番目の引数に登録する対象のイベントを、２番目の引数にイベントハンドラを渡します。 DOMContentLoaded は「スタイルシート、画像、サブフレームの読み込みが完了するのを待たずに、ドキュメントが完全に読み込まれて解析されたときに発生する」イベントです。(MDNの説明のGoogle翻訳） document.querySelector はドキュメント全体からセレクタにマッチするオブジェクトの最初の１個を返します。 input[name=btn] は input タグで name 属性の値が btn であるオブジェクトを選択するセレクタです。

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