GASのHTMLフォームをPost受信する方法

前提・実現したいこと

GASのHTMLファイルで作成したFormからPostでデータをサーバ側に送り、gsファイルのプログラムで処理して、Thanks.htmlを表示させたい。

GASの仕様上別プロジェクトにしか遷移できないらしいが、できれば同プロジェクト内のhtml ファイルで賄えないかと考えている

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

一旦jsファイルのfunctionを経由してgoogle.script.run.doPost(formObject);のような形で実行するが真っ白なページが別ページで表示される。
別の関数を用意して同じように実行すると動いたので、Post関数がうまくできていないと思われる。　引数eで受け取って、e.parameter.nameで取得指定いるつもりだが受け取れているかわからない。

エラーメッセージ

該当のソースコード

html
1
2<!DOCTYPE html>
3<html>
4  <head>
5    <base target="_top">
6    <meta charset="utf-8">
7    <meta viewport="width=device-width, initial-scale=1">
8    <meta http-equiv="X-UA-Compatible" content="IE=edge">
9    <?!=HtmlService.createHtmlOutputFromFile('stylesheet').getContent(); ?>
10   <?var url = getScriptUrl();?>
11  </head>
12  
13  <body>
14   <nav class="navbar">
15    <div class="navbar-header"><a class="navbar-title" href="#">予約入力フォーム</a></div>
16   </nav>
17   
18   <div class="container">
19     <form class="form-horizontal" id="resev-form"　method="post" target="_blank" 
20      onsubmit="handleFormSubmit(this)">
21     
22略〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
23<div class="form-group">
24            <div class="col-xs-offset-3 col-xs-9">
25                <button id="send_button" type="submit" class="btn btn-primary btn-block">
26                 送信する
27                </button>
28            </div>
29        </div>
30      
31    </form>
32    </div>
33   
34     <?!= HtmlService.createHtmlOutputFromFile('js').getContent(); ?>
35    
36  </body>
37</html>
38

gs
1function doGet(){
2 
3  var HtmlOutput = HtmlService.createTemplateFromFile('index').evaluate()
4  .setTitle('予約入力フォーム');
5  return HtmlOutput;
6}
7
8function doPost(e){
9 
10   var sheet = SpreadsheetApp.openById("1DnEUVvmGsm4RXkUOuoFUqwpUV-uo0FxzSWnDdh74dhE").getSheetByName("sheet1");
11  Logger.log(e);
12  var arrData=sheet.getDataRange().getValues();
13    //データ取得
14  var company=e.parameter.company;
15  var name=e.parameter.name;
16
17  
18   var HtmlOutput = HtmlService.createTemplateFromFile('thanks').evaluate();
19  return HtmlOutput;
20}
21
22
23

js
1//submit
2function handleFormSubmit(formObject){
3var ref= confirm("この内容で送信してもよろしいですか？")
4if(ref == true){
5 google.script.run.doPost(formObject);
6
7}else{
8return false;}
9}
10

試したこと

現在のURLにパラメータを追加してthanksy用のURLをdoGetで表示できるようにしてみたがURLを踏むと４０４エラーになり動かない。下記Javascriptのようにして実行。
window.open=　 ("<?var url = getScriptUrl();?>?page=thanks",'_blank');

別のプロジェクトのページに遷移するため、別プロジェクトに作ったthanksページのURLを取得してactionにURLを記載してみたが、送信後はまっしろなページとそのURLにパラメータとフォーム入力内容が載っていました。

補足情報

色々ネット上を調べてみたり試してみたのですが、ただの遷移はできたりしたのですが、Postに送ったあとに画面がちゃんと遷移しません。

どうやらログを見るとPostされたパラメータは
{oneday=1}のような形で送られてきていました。あとはPostの中から画面が遷移できれば良さそう。
わかりにくい説明かもしれませんが、回答お願いいたします。

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

回答1件

概念コードを置きますが動作しません。

まっしろになる理由

confirmに対して、Yesを選択したとき、return trueとなります。このときsubmitの基本機能として、formのaction(指定がなければ元のページのアドレス)に対して、postがなされ、ページ遷移を起こします。
さらに、gasで作ったhtmlは常にiframeに展開されており、これが、特殊な内部ページアドレスをもっているため、target=_blank、つまり別ページとして、iframeのページアドレスを開き(これは内部ページのため描画を行いません)、真っ白なページが返されてしまいます。
→対策として、下の例のようにonSubmitに常にfalseを返しましょう。

同じwebapiでページを切り分ける方法

下にあげたdoGetのように、パラメータをみてページをかえる処理をかけばよいです。

動作しません

先に書いたようにgas生成したhtmlは、iframeで実行されており、それは、"script.google.com"ではなく"{randomid}-script.googleuserconsent.com"です。ドメインが違うので、CORSにひっかかって、location.hrefをかえようとしてもエラーになり意図した結果をとなりません。

解決策

質問者様の別質問にどなたかが回答してらっしゃいましたが、formのactionにこのscriptのwebApiとしてのアドレス"https://.../exec"を書いて、doPostで値がないときは、index、何か値があればindexと表示をきりかえるロジックを入れる、というのが近道だと思います。

この方法では解決できないので、単なる参考

パラメータ

このようにformObjectを渡して、google.runとした場合、doPost(e)のeには
{ input_1のname:input_1の入力値, input_2のname:input_2の入力値}が渡されます。↓のような一つだけのテキストに、「おはよう」と入れて送信した場合、eには{"textname":"おはよう"}が入りますので、e.textnameのように値を取り出すことができます。

google.runの使いかた

このようにwithSuccesshandlerというので、成功したときの処理をかきます。この辺根本的な使い方に問題がありそうです。

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <base target="_top">
5    <meta charset="utf-8">
6    <meta viewport="width=device-width, initial-scale=1">
7    <meta http-equiv="X-UA-Compatible" content="IE=edge">
8  </head>
9
10  <body>
11   <nav class="navbar">
12    <div class="navbar-header"><a class="navbar-title" href="#">予約入力フォーム</a></div>
13   </nav>
14
15   <div class="container">
16     <form class="form-horizontal" id="resev-form"　method="post" target="_blank" 
17      onsubmit="handleFormSubmit(this);return false;">
18      <input type="text" id="textid" name="textname"/>
19
20      <div class="form-group">
21            <div class="col-xs-offset-3 col-xs-9">
22                <button id="send_button" type="submit" class="btn btn-primary btn-block">
23                 送信する
24                </button>
25            </div>
26        </div>
27
28    </form>
29    </div>
30  </body>
31  <script>
32  //submit
33  function handleFormSubmit(formObject){
34    var ref= confirm("この内容で送信してもよろしいですか？");
35    if(ref){
36      google.script.run.withSuccessHandler(reload).doPost(formObject);
37    }
38  }
39  function reload(e) {
40    window.location.href = "<?!= ScriptApp.getService().getUrl(); ?>?page=thx";
41  }
42  </script>
43</html>

javascript
1function doGet(e) {
2  var param = e.parameter;
3  var fileName = "";
4  switch(param["page"]) {
5    case "thanks":
6      fileName = "thanks";
7      break;
8    default:
9      fileName = "index";
10      break;
11  }
12  var output=HtmlService.createTemplateFromFile(fileName);
13  return output.evaluate().setTitle('予約入力フォーム');
14}