フォームの送信に応じたページ表示の実現方法

Question

複数のフォームがあり、それぞれの送信後に異なるページを表示したい。

---

どのフォームが送信されたかを識別する方法が不明。3つの異なるアプローチは期待通りに動作しませんでした。

1. button要素(type属性button)のidをクリックイベントから受け取ります: 何も起こりません。
2. button要素(type属性submit)のidをクリックイベントから受け取ります : 「スクリプトが完了しましたが、何も返されませんでした」
3. input要素(type属性hidden)の値をdoPost()から受け取ります: ウェブブラウザが埋め込みページの表示をブロックします。新しいウィンドウで開いても元のページが表示されるだけです。

const buttons = document.querySelectorAll('.button');
//querySelectorAll('.submit')
for (let i = 0; i < buttons.length; i++) {
	buttons[i].addEventListener('click', function() {
		handleButtonClick(this.id);
	});
}

function handleButtonClick(buttonId) {
	google.script.run.buttonClick(buttonId);
}

function buttonClick(buttonId) {
	let template;
	switch (buttonId) {
		case 'form1':
			template = HtmlService.createTemplateFromFile('PageForm1');
			break;
		case 'form2':
			template = HtmlService.createTemplateFromFile('PageForm2');
			break;
	}
	return template.evaluate();
} 

function doPost(e) {
	const form = e.parameter.form;
	let template;
	switch (form) {
		case 'form1':
			template = HtmlService.createTemplateFromFile('form1');
			break;
		case 'form2':
			template = HtmlService.createTemplateFromFile('form2');
			break;
	}
	return template.evaluate();
}

<button type = 'button' id = 'form1' class = 'button'>button</button>
<button type = 'button' id = 'form2' class = 'button'>button</button>

<form action = '...' method = 'post'>
	<input type = 'hidden' name = 'form' value = 'form1'>
	<button type = "submit" class = 'submit'>submit</button>
</form>

<form action = '...' method = 'post'>
	<input type = 'hidden' name = 'form' value = 'form2'>
	<button type = 'submit' class = 'submit'>submit</button>
</form>

Comments

[y_waiwai]

で、しつもんはなんでしょうか

[3_April_2021]

進展と助言が必要な部分の見通しがつきました。見込み内容に関連する検証作業があるため、コンテンツは段階的に更新されます。助言を求める部分まで編集された段階で、この欄に改めてその旨や疑問が示されるでしょう。

Answer 1

(3)のhiddenを使用する場合、doPost（）内でフォームによって処理を分岐することはできます。ただし、ページ遷移処理に関しては、一定期間の調査結果 少なくともdoPost（）を直接トリガーとして利用することはおそらく不可能だと見込まれました。質問の全体的な状況に基づいて、この結論で質問を一旦中断します。ページ遷移処理に関してポイントとなるのは、複数のhtml表示のようです。仕様を理解して配慮する必要があるようですが、この処理は実現自体は可能です。それが唯一の方法であるかどうかは、現在の知識では言えませんが、doGet（）に値を与えて分岐させることで解決できます。このため、js/html側が活用でき、doPost（）を直接トリガーとして使用することに固執しなければ、質問の件の問題解決自体は可能だと思われます。しかし、質問の条件に固執すると問題を解決するための回りくどい方法しか思いつかなかったので、実際には前提条件を変更して対処しました。似たようなケースを見ても、そのような対処でうまくいくように見えるケースが多かったので、その観点からの情報共有を回答とします。

• フォームを分割する必要がありますか？: フォームの無効化/有効化のタイミングを分離したいだけの場合は、visibility, display,disabledなどを使用できる場合があります。
• 新しいページを表示する必要がありますか？: 小さな要素を追加したいだけなら、innerHTML,textContent,alert系統を使用できる場合があります。
• 遷移先はウェブアプリ上のページである必要はありますか？: おそらく、動的コンテンツと割り切って使用する方が、解決策を見つけるのが簡単になります。