teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップGoogle Apps Scriptに関する質問フォームの送信に応じたページ表示の実現方法

編集履歴

質問編集履歴

11

一文目を追加

2024/05/25 15:17

投稿

3_April_2021
3_April_2021

スコア48

test CHANGED
File without changes
test CHANGED
@@ -1,3 +1,6 @@
1
+ 複数のフォームがあり、それぞれの送信後に異なるページを表示したい。
2
+
3
+ ---
1
4
  どのフォームが送信されたかを識別する方法が不明。3つの異なるアプローチは期待通りに動作しませんでした。
2
5
  1. button要素(type属性button)のidをクリックイベントから受け取ります: 何も起こりません。
3
6
  2. button要素(type属性submit)のidをクリックイベントから受け取ります : 「スクリプトが完了しましたが、何も返されませんでした」
Google Apps Script

10

書式の改善

2024/05/25 15:10

投稿

3_April_2021
3_April_2021

スコア48

test CHANGED
@@ -1 +1 @@
1
- formごとに異なる処理を行いたい
1
+ フォームの送信に応じたページ表示の実現方法
test CHANGED
@@ -1,125 +1,59 @@
1
- 同じページに設置された各フォームを送信するときにそれぞれ異なるページを表示します。そのため、doPost（）内で各フォームの処理を分離したかったのですが、質問は、フォームを区別するために使用される値を取得する方法がわからないということでした。 次の3つの方法を試しましたが、この試みは残念ながら失敗しました。
1
+ どのフォームが送信されたかを識別する方法が不明。3つの異なるアプローチは期待通りに動作しませんでした。
2
-
3
-
4
-
5
- - (1)button要素(type属性button)のidをクリックイベントから受け取ります。→何も起こりません。
2
+ 1. button要素(type属性button)のidをクリックイベントから受け取ります: 何も起こりません。
6
-
7
- ```html
3
+ 2. button要素(type属性submit)のidをクリックイベントから受け取ります : 「スクリプトが完了しましたが、何も返されませんでした」
8
-
9
- <button type='button' id='form1' class='button'>button</button>
4
+ 3. input要素(type属性hidden)の値をdoPost()から受け取ります: ウェブブラウザが埋め込みページの表示をブロックします。新しいウィンドウで開いても元のページが表示されるだけです。
10
-
11
- <button type='button' id='form2' class='button'>button</button>
12
-
13
- ```
14
-
15
5
  ```js
16
-
17
- const button = document.querySelectorAll('.button');
6
+ const buttons = document.querySelectorAll('.button');
18
-
7
+ //querySelectorAll('.submit')
8
+ for (let i = 0; i < buttons.length; i++) {
19
- for(let i=0;i<button.length;i=i+1){button[i].addEventListener('click',function(){buttonF(this.id)});}
9
+ buttons[i].addEventListener('click', function() {
20
-
21
- function buttonF(x){google.script.run.buttonClick(x);}
22
-
23
- ```
24
-
25
- ```gs
26
-
27
- function buttonClick(x){
10
+ handleButtonClick(this.id);
28
-
29
- let template;
30
-
31
- switch (x){
32
-
33
- case 'form1': template = HtmlService.createTemplateFromFile('form1');
34
-
35
- break;
11
+ });
36
-
37
- case 'form2': template = HtmlService.createTemplateFromFile('form2');
38
-
39
- break;
40
-
41
12
  }
42
13
 
14
+ function handleButtonClick(buttonId) {
15
+ google.script.run.buttonClick(buttonId);
16
+ }
17
+ ```
18
+ ```gs
19
+ function buttonClick(buttonId) {
20
+ let template;
21
+ switch (buttonId) {
22
+ case 'form1':
23
+ template = HtmlService.createTemplateFromFile('PageForm1');
24
+ break;
25
+ case 'form2':
26
+ template = HtmlService.createTemplateFromFile('PageForm2');
27
+ break;
28
+ }
43
- return template.evaluate();
29
+ return template.evaluate();
30
+ }
44
31
 
32
+ function doPost(e) {
33
+ const form = e.parameter.form;
34
+ let template;
35
+ switch (form) {
36
+ case 'form1':
37
+ template = HtmlService.createTemplateFromFile('form1');
38
+ break;
39
+ case 'form2':
40
+ template = HtmlService.createTemplateFromFile('form2');
41
+ break;
42
+ }
43
+ return template.evaluate();
45
44
  }
45
+ ```
46
+ ```html
47
+ <button type = 'button' id = 'form1' class = 'button'>button</button>
48
+ <button type = 'button' id = 'form2' class = 'button'>button</button>
46
49
 
47
- ```
48
-
49
-
50
-
51
- - (2)button要素(type属性submit)のidをクリックイベントから受け取ります。→「スクリプトが完了しましたが、何も返されませんでした」
52
-
53
- - (3)input要素(type属性hidden)の値をdoPost()から受け取ります。→ウェブブラウザが埋め込みページの表示をブロックします。新しいウィンドウで開いても元のページが表示されるだけです。
54
-
55
- ```html
56
-
57
- <form action='...' method='post'>
50
+ <form action = '...' method = 'post'>
58
-
59
- <input type='hidden' name='form' value='form1'>
51
+ <input type = 'hidden' name = 'form' value = 'form1'>
60
-
61
- <button type="submit" class='submit'>submit</button>
52
+ <button type = "submit" class = 'submit'>submit</button>
62
-
63
53
  </form>
64
54
 
65
- <form action='...' method='post'>
55
+ <form action = '...' method = 'post'>
66
-
67
- <input type='hidden' name='form' value='form2'>
56
+ <input type = 'hidden' name = 'form' value = 'form2'>
68
-
69
- <button type='submit' class='submit'>submit</button>
57
+ <button type = 'submit' class = 'submit'>submit</button>
70
-
71
58
  </form>
72
-
73
59
  ```
74
-
75
- ```js
76
-
77
- const submit = document.querySelectorAll('.submit');
78
-
79
- for(let i=0;i<submit.length;i=i+1){submit[i].addEventListener('click', function(){submitF(this.id)});}
80
-
81
- function submitF(x){google.script.run.submitClick(x);}
82
-
83
- ```
84
-
85
- ```gs
86
-
87
-
88
-
89
- function submitClick(x){
90
-
91
- let template;
92
-
93
- switch (x){
94
-
95
- case 'form1': template = HtmlService.createTemplateFromFile('form1'); break;
96
-
97
- case 'form2': template = HtmlService.createTemplateFromFile('form2'); break;
98
-
99
- }
100
-
101
- return template.evaluate();
102
-
103
- }//(2)
104
-
105
-
106
-
107
- function doPost(e){
108
-
109
- const form= e.parameter.form;
110
-
111
- let template;
112
-
113
- switch (form){
114
-
115
- case 'form1': template = HtmlService.createTemplateFromFile('form1'); break;
116
-
117
- case 'form2': template = HtmlService.createTemplateFromFile('form2'); break;
118
-
119
- }
120
-
121
- return template.evaluate();
122
-
123
- }//(3)
124
-
125
- ```
Google Apps Script
Google Apps Script

9

全体の修正: コード: (2),(3)

2021/08/12 07:16

投稿

3_April_2021
3_April_2021

スコア48

test CHANGED
File without changes
test CHANGED
@@ -45,3 +45,81 @@
45
45
  }
46
46
 
47
47
  ```
48
+
49
+
50
+
51
+ - (2)button要素(type属性submit)のidをクリックイベントから受け取ります。→「スクリプトが完了しましたが、何も返されませんでした」
52
+
53
+ - (3)input要素(type属性hidden)の値をdoPost()から受け取ります。→ウェブブラウザが埋め込みページの表示をブロックします。新しいウィンドウで開いても元のページが表示されるだけです。
54
+
55
+ ```html
56
+
57
+ <form action='...' method='post'>
58
+
59
+ <input type='hidden' name='form' value='form1'>
60
+
61
+ <button type="submit" class='submit'>submit</button>
62
+
63
+ </form>
64
+
65
+ <form action='...' method='post'>
66
+
67
+ <input type='hidden' name='form' value='form2'>
68
+
69
+ <button type='submit' class='submit'>submit</button>
70
+
71
+ </form>
72
+
73
+ ```
74
+
75
+ ```js
76
+
77
+ const submit = document.querySelectorAll('.submit');
78
+
79
+ for(let i=0;i<submit.length;i=i+1){submit[i].addEventListener('click', function(){submitF(this.id)});}
80
+
81
+ function submitF(x){google.script.run.submitClick(x);}
82
+
83
+ ```
84
+
85
+ ```gs
86
+
87
+
88
+
89
+ function submitClick(x){
90
+
91
+ let template;
92
+
93
+ switch (x){
94
+
95
+ case 'form1': template = HtmlService.createTemplateFromFile('form1'); break;
96
+
97
+ case 'form2': template = HtmlService.createTemplateFromFile('form2'); break;
98
+
99
+ }
100
+
101
+ return template.evaluate();
102
+
103
+ }//(2)
104
+
105
+
106
+
107
+ function doPost(e){
108
+
109
+ const form= e.parameter.form;
110
+
111
+ let template;
112
+
113
+ switch (form){
114
+
115
+ case 'form1': template = HtmlService.createTemplateFromFile('form1'); break;
116
+
117
+ case 'form2': template = HtmlService.createTemplateFromFile('form2'); break;
118
+
119
+ }
120
+
121
+ return template.evaluate();
122
+
123
+ }//(3)
124
+
125
+ ```

8

全体の修正: コード: (1)

2021/08/12 07:16

投稿

3_April_2021
3_April_2021

スコア48

test CHANGED
File without changes
test CHANGED
@@ -1 +1,47 @@
1
1
  同じページに設置された各フォームを送信するときにそれぞれ異なるページを表示します。そのため、doPost（）内で各フォームの処理を分離したかったのですが、質問は、フォームを区別するために使用される値を取得する方法がわからないということでした。 次の3つの方法を試しましたが、この試みは残念ながら失敗しました。
2
+
3
+
4
+
5
+ - (1)button要素(type属性button)のidをクリックイベントから受け取ります。→何も起こりません。
6
+
7
+ ```html
8
+
9
+ <button type='button' id='form1' class='button'>button</button>
10
+
11
+ <button type='button' id='form2' class='button'>button</button>
12
+
13
+ ```
14
+
15
+ ```js
16
+
17
+ const button = document.querySelectorAll('.button');
18
+
19
+ for(let i=0;i<button.length;i=i+1){button[i].addEventListener('click',function(){buttonF(this.id)});}
20
+
21
+ function buttonF(x){google.script.run.buttonClick(x);}
22
+
23
+ ```
24
+
25
+ ```gs
26
+
27
+ function buttonClick(x){
28
+
29
+ let template;
30
+
31
+ switch (x){
32
+
33
+ case 'form1': template = HtmlService.createTemplateFromFile('form1');
34
+
35
+ break;
36
+
37
+ case 'form2': template = HtmlService.createTemplateFromFile('form2');
38
+
39
+ break;
40
+
41
+ }
42
+
43
+ return template.evaluate();
44
+
45
+ }
46
+
47
+ ```

7

全体の修正: 説明

2021/08/12 06:41

投稿

3_April_2021
3_April_2021

スコア48

test CHANGED
File without changes
test CHANGED
@@ -1,173 +1 @@
1
- ## Code
2
-
3
- ```html
4
-
5
- <form action="URL" method="post" name ="form_1" id = "form_1"><input type="submit"></form>
6
-
7
- <form action="URL" method="post" name ="form_2" id = "form_2"><input type="submit"></form>
8
-
9
- ```
10
-
11
- ```script
12
-
13
- function doGet(){return HtmlService.createTemplateFromFile("index").evaluate();}
14
-
15
- ```
16
-
17
- ## Error
18
-
19
- ### name
20
-
21
- ReferenceError: name is not defined
22
-
23
- ```script
24
-
25
- function doPost() {
26
-
27
- if(name === form_1){return HtmlService.createTemplateFromFile("form_1").evaluate();}
28
-
29
- else{return HtmlService.createTemplateFromFile("form_2").evaluate();}
30
-
31
- }
32
-
33
- ```
34
-
35
- ### id
36
-
37
- ReferenceError: id is not defined
38
-
39
- ```script
40
-
41
- function doPost() {
42
-
43
- if(id === form_2){return HtmlService.createTemplateFromFile("form_1").evaluate();}
44
-
45
- else{return HtmlService.createTemplateFromFile("form_2").evaluate();}
46
-
47
- }
48
-
49
- ```
50
-
51
- ### onclick
52
-
53
- スクリプトが完了しましたが、何も返されませんでした。
54
-
55
- ```html
56
-
57
- <input type="submit" onclick = <?!= form_1(); ?>>
58
-
59
- <input type="submit" onclick = <?!= form_2(); ?>>
60
-
61
- ```
62
-
63
- ```script
64
-
65
- function form_1(){return HtmlService.createTemplateFromFile("form_1").evaluate();}
66
-
67
- function form_2(){return HtmlService.createTemplateFromFile("form_2").evaluate();}
68
-
69
- ```
70
-
71
- ### .id & id
72
-
73
- ReferenceError: id_name is not defined
74
-
75
- ```html
76
-
77
- <input type="submit" onclick= <? forms(this); ?>>
78
-
79
- <input type="submit" onclick= <? forms(this); ?>>
80
-
81
- ```
82
-
83
- ```script
84
-
85
- function forms(x){const id_name = x.id; return id_name}
86
-
87
- function doPost(){
88
-
89
- if(id_name === form_1){HtmlService.createTemplateFromFile("form_1").evaluate();}
90
-
91
- else{HtmlService.createTemplateFromFile("form_2").evaluate();}
92
-
93
- }
94
-
95
- ```
96
-
97
- ##編集
98
-
99
- ###No.1: html構造の再検討
100
-
101
- 既知の要素取得方法に基づいて、さまざまな要素取得方法を検証するために使いやすい構成を再検討しました。
102
-
103
- ```html
104
-
105
- <body>
106
-
107
- <div>
108
-
109
- <p>Paragraph</p>
110
-
111
- <form action="URL" method="post"><input type="text"><input type="submit"></form>
1
+ 同じページに設置された各フォームを送信するときにそれぞれ異なるページを表示します。そのため、doPost（）内で各フォームの処理を分離したかったのですが、質問は、フォームを区別するために使用される値を取得する方法がわからないということでした。 次の3つの方法を試しましたが、この試みは残念ながら失敗しました。
112
-
113
- <form action="URL" method="post"><input type="text"><input type="submit"></form>
114
-
115
- </div>
116
-
117
- </body>
118
-
119
- ```
120
-
121
- Div
122
-
123
- ├Paragraph
124
-
125
- ├Form
126
-
127
- │├Input(text)
128
-
129
- │└Input(button)
130
-
131
- └Form
132
-
133
- □├Input(text)　
134
-
135
- □└Input(button)
136
-
137
- ###No.2: 期待した動作を行うかどうかテストが行われました。
138
-
139
- - Element.children
140
-
141
- - document.getElementsByClassName()
142
-
143
- ###No.3: これらの関数は、前提として利用されることがあります。
144
-
145
- ```script
146
-
147
- function getRf(shname, row, column){
148
-
149
- const Gs = SpreadsheetApp.getActiveSpreadsheet();
150
-
151
- const Gss = Gs.getSheetByName(sheetname)
152
-
153
- const reRan = Gss.getRange(row,column);
154
-
155
- return reRan;
156
-
157
- }//紐づいたシートが使用されます。
158
-
159
- function setVf(shname,row,column,test){
160
-
161
- getRf(shname,row,column).setValue(test);
162
-
163
- }
164
-
165
- function getVf(shname,row,column){
166
-
167
- const reVal = getRf(shname,row,column).getValue();
168
-
169
- return reVal
170
-
171
- }
172
-
173
- ```

6

編集> No.3: これらの関数は、前提として利用されることがあります。

2021/08/12 06:28

投稿

3_April_2021
3_April_2021

スコア48

test CHANGED
File without changes
test CHANGED
@@ -139,3 +139,35 @@
139
139
  - Element.children
140
140
 
141
141
  - document.getElementsByClassName()
142
+
143
+ ###No.3: これらの関数は、前提として利用されることがあります。
144
+
145
+ ```script
146
+
147
+ function getRf(shname, row, column){
148
+
149
+ const Gs = SpreadsheetApp.getActiveSpreadsheet();
150
+
151
+ const Gss = Gs.getSheetByName(sheetname)
152
+
153
+ const reRan = Gss.getRange(row,column);
154
+
155
+ return reRan;
156
+
157
+ }//紐づいたシートが使用されます。
158
+
159
+ function setVf(shname,row,column,test){
160
+
161
+ getRf(shname,row,column).setValue(test);
162
+
163
+ }
164
+
165
+ function getVf(shname,row,column){
166
+
167
+ const reVal = getRf(shname,row,column).getValue();
168
+
169
+ return reVal
170
+
171
+ }
172
+
173
+ ```

5

編集> No.2: 期待した動作を行うかどうかテストが行われました。

2021/04/22 04:06

投稿

3_April_2021
3_April_2021

スコア48

test CHANGED
File without changes
test CHANGED
@@ -133,3 +133,9 @@
133
133
  □├Input(text)　
134
134
 
135
135
  □└Input(button)
136
+
137
+ ###No.2: 期待した動作を行うかどうかテストが行われました。
138
+
139
+ - Element.children
140
+
141
+ - document.getElementsByClassName()

4

編集>No.1: html構造の再検討

2021/04/22 04:00

投稿

3_April_2021
3_April_2021

スコア48

test CHANGED
File without changes
test CHANGED
@@ -93,3 +93,43 @@
93
93
  }
94
94
 
95
95
  ```
96
+
97
+ ##編集
98
+
99
+ ###No.1: html構造の再検討
100
+
101
+ 既知の要素取得方法に基づいて、さまざまな要素取得方法を検証するために使いやすい構成を再検討しました。
102
+
103
+ ```html
104
+
105
+ <body>
106
+
107
+ <div>
108
+
109
+ <p>Paragraph</p>
110
+
111
+ <form action="URL" method="post"><input type="text"><input type="submit"></form>
112
+
113
+ <form action="URL" method="post"><input type="text"><input type="submit"></form>
114
+
115
+ </div>
116
+
117
+ </body>
118
+
119
+ ```
120
+
121
+ Div
122
+
123
+ ├Paragraph
124
+
125
+ ├Form
126
+
127
+ │├Input(text)
128
+
129
+ │└Input(button)
130
+
131
+ └Form
132
+
133
+ □├Input(text)　
134
+
135
+ □└Input(button)

3

```

2021/04/22 03:33

投稿

3_April_2021
3_April_2021

スコア48

test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,6 @@
1
1
  ## Code
2
2
 
3
- ```index.html
3
+ ```html
4
4
 
5
5
  <form action="URL" method="post" name ="form_1" id = "form_1"><input type="submit"></form>
6
6
 
@@ -8,7 +8,7 @@
8
8
 
9
9
  ```
10
10
 
11
- ```index.gs
11
+ ```script
12
12
 
13
13
  function doGet(){return HtmlService.createTemplateFromFile("index").evaluate();}
14
14
 
@@ -20,7 +20,7 @@
20
20
 
21
21
  ReferenceError: name is not defined
22
22
 
23
- ```index.gs
23
+ ```script
24
24
 
25
25
  function doPost() {
26
26
 
@@ -36,7 +36,7 @@
36
36
 
37
37
  ReferenceError: id is not defined
38
38
 
39
- ```index.gs
39
+ ```script
40
40
 
41
41
  function doPost() {
42
42
 
@@ -52,7 +52,7 @@
52
52
 
53
53
  スクリプトが完了しましたが、何も返されませんでした。
54
54
 
55
- ```index.html
55
+ ```html
56
56
 
57
57
  <input type="submit" onclick = <?!= form_1(); ?>>
58
58
 
@@ -60,7 +60,7 @@
60
60
 
61
61
  ```
62
62
 
63
- ```index.gs
63
+ ```script
64
64
 
65
65
  function form_1(){return HtmlService.createTemplateFromFile("form_1").evaluate();}
66
66
 
@@ -72,7 +72,7 @@
72
72
 
73
73
  ReferenceError: id_name is not defined
74
74
 
75
- ```index.html
75
+ ```html
76
76
 
77
77
  <input type="submit" onclick= <? forms(this); ?>>
78
78
 
@@ -80,7 +80,7 @@
80
80
 
81
81
  ```
82
82
 
83
- ```index.gs
83
+ ```script
84
84
 
85
85
  function forms(x){const id_name = x.id; return id_name}
86
86
 

2

return id_name

2021/04/03 12:06

投稿

3_April_2021
3_April_2021

スコア48

test CHANGED
File without changes
test CHANGED
@@ -82,7 +82,7 @@
82
82
 
83
83
  ```index.gs
84
84
 
85
- function forms(x){const id_name = x.id; return id_name;}
85
+ function forms(x){const id_name = x.id; return id_name}
86
86
 
87
87
  function doPost(){
88
88
 

1

return id_name;

2021/04/03 09:19

投稿

3_April_2021
3_April_2021

スコア48

test CHANGED
File without changes
test CHANGED
@@ -82,7 +82,7 @@
82
82
 
83
83
  ```index.gs
84
84
 
85
- function forms(x){const id_name = x.id; return id_name}
85
+ function forms(x){const id_name = x.id; return id_name;}
86
86
 
87
87
  function doPost(){
88
88