GAS Webアプリケーション画面でフォーム入力後、画面が真っ白になってしまいます

###前提・実現したいこと
iPad画面で番号入力フォームが表示されている
番号を入力した時に、入力した番号と入力時間がスプレッドシートに
反映されるようにしたい

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

初回は番号入力フォームに番号を入力した後もページがリロードされ、
再び入力が可能な状態
しかし、2回目の入力後、ページがリロードされず、真っ白な状態になってしまう

###該当のソースコード

javascript
1【insertInfo.gs】
2
3function doGet(e){
4  return HtmlService.createTemplateFromFile('index').evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
5}
6
7//書き込み先スプレッドシートID
8var gasheet = "*********************************";
9//POSTで受け取ってスプレッドシートへ書き込み
10function doPost(e) {
11  var number = String(e.parameter.number);
12  Logger.log(number);
13  var date = new Date();
14    var ss = SpreadsheetApp.openById(gasheet);
15    var sheet = ss.getSheetByName("DATA");
16   var lastRow = sheet.getLastRow();
17    sheet.getRange(lastRow+1, 1).setValue(number);
18  sheet.getRange(lastRow+1, 2).setValue(date);
19    return doGet();
20}

HTML
1【index.html】
2
3<!DOCTYPE html>
4<html>
5  <head>
6  <title>Google Spreadsheet書き込みテスト</title>
7  <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
8  <script type="text/javascript">
9  
10    function disp(){
11      var str = document.forms.formman.number.value;
12      if(str.match(/(\d{7})/)){
13         if(window.confirm('送信しますか')){
14         document.getElementById("formman").submit();
15          document.getElementById("kinoko").innerHTML = "登録完了しました";
16         }else{
17          window.alert('キャンセルされました'); 
18         }
19        }else{
20         window.alert("不備があります");
21      }
22   }
23  </script>
24  </head>
25  <body>
26  <center>
27    <div id="kinoko">
28      <form id="formman" action="https://script.google.com/a/macros/g.softbank.co.jp/s/******************/exec" method="post" target="_self">
29        社員番号：<input type="text" size="18" maxlength="7" minlength="7" pattern="[0-9]*" id="number" name="number" placeholder="番号を入力してください" required>
30        <p><input type="button" value="送信" onClick="disp()" class="action"></p>
31        <p><input type="reset" value="リセット"></p>
32      </form>
33   </div>
34  </center>
35  </body>
36</html>

###試したこと
番号入力後、自働でリロードされるように5秒後にウインドウリロードされるコードなどを
いれてみたが、解決できなかった

大変、申し訳ございませんが解決策を教えて頂けますと幸いです。
宜しくお願いいたします。

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

回答2件

ベストアンサー

似たコードで試してみたところ、おっしゃるような状況が再現できました。
（初回の送信ボタン押下後は入力フォームが表示されるが、2回目の送信ボタン押下後は入力フォームが表示されない）
その理由は私にはちょっとわかりませんので、やり方を変えてみます。

修正方針

submit()せず、insertInfo.gs側のdoPost(e)を呼ぶにとどめる
document.getElementById("kinoko").innerHTML = "登録完了しました";で入力フォームが消えてしまうので、これは削除
1.の修正によりページ遷移が発生しなくなったので、doPost(e)後に入力フォームを未入力状態に戻す

修正後のコード

javascript
1// insertInfo.gs
2//   doPostのみ抜粋
3//   ★がついている行が変更箇所
4function doPost(e) {
5  var number = String(e.number); //★
6  Logger.log(number);
7  var date = new Date();
8  var ss = SpreadsheetApp.openById(gasheet);
9  var sheet = ss.getSheetByName("DATA");
10  var lastRow = sheet.getLastRow();
11  sheet.getRange(lastRow+1, 1).setValue(number);
12  sheet.getRange(lastRow+1, 2).setValue(date);
13  //★ return doGet(); は削除
14}

html
1<!DOCTYPE html>
2<html>
3  <head>
4  <title>Google Spreadsheet書き込みテスト</title>
5  <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
6  <script type="text/javascript">
7
8    function disp(){
9      var str = document.forms.formman.number.value;
10      if(str.match(/(\d{7})/)){
11        if(window.confirm('送信しますか')){
12          google.script.run.doPost(document.forms.formman); // ★submitではなくdoPost
13          window.alert('登録完了しました');                 // ★alertで完了通知
14          document.forms.formman.number.focus();            // ★
15          document.forms.formman.number.value = "";         // ★未入力状態に戻す
16        }else{
17          window.alert('キャンセルされました');
18        }
19      }else{
20        window.alert("不備があります");
21      }
22    }
23  </script>
24  </head>
25  <body>
26  <center>
27    <div id="kinoko">
28      <form id="formman"> <!-- ★いろいろ削除 -->
29        社員番号：<input type="text" size="18" maxlength="7" minlength="7" pattern="[0-9]*" id="number" name="number" placeholder="番号を入力してください" required>
30        <p><input type="button" value="送信" onClick="disp()" class="action"></p>
31        <p><input type="reset" value="リセット"></p>
32      </form>
33    </div>
34  </center>
35  </body>
36</html>

投稿2017/01/31 11:31

編集2017/01/31 11:33

alg

総合スコア2019

退会済みユーザー

2017/02/01 05:13

ご回答ありがとうございます！ "登録完了しました"と表示させるプログラムによって入力フォームが消えてしまったのですね。フォーム入力後、未入力状態にするという発想が思いつきませんでした・・・！とても分かりやすい回答ありがとうございますm(_ _)m 大変助かりました！

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

doPostの最後に以下がありますが必要でしたっけ？

return doGet();

曖昧ですが自分は呼んでいなかった気がします。
Googleのドキュメントも軽く見ましたが特に書いてなさそうです。

追記
自身組み込みを調べてみたら、実施している内容が違いました。
POSTのTargetをhidenframeにしたうえで、Reloadを行っていました。
質問のコードに適用してみました。
でも「return doGet();」で対応できた方が便利そうですね、、、

HTML
1<!DOCTYPE html>
2<html>
3  <head>
4  <title>Google Spreadsheet書き込みテスト</title>
5  <script type="text/javascript">
6
7  function disp(){
8    var str = document.forms.formman.number.value;
9    if(str.match(/(\d{7})/)){
10      if(window.confirm('送信しますか')){
11      document.getElementById("formman").submit();
12      document.getElementById("kinoko").innerHTML = "登録完了しました";
13      }else{
14      window.alert('キャンセルされました'); 
15      }
16    }else{
17      window.alert("不備があります");
18    }
19    setTimeout("location.reload()",2000);
20  }
21  </script>
22
23</head>
24  <body>
25  <div id="kinoko" align="center">
26  <form id="formman" action="https://script.google.com/a/macros/*********.com/s/**********************/exec" method="post" target="hidenframe">
27  社員番号：<input type="text" size="18" maxlength="7" minlength="7" pattern="[0-9]*" id="number" name="number" placeholder="番号を入力してください" required>
28  <p><input type="button" value="送信" onClick="disp()" class="action"></p>
29  <p><input type="reset" value="リセット"></p>
30  </form>
31  </div>
32  <iframe name="hidenframe" style="display:none"></iframe>
33  </body>
34</html>

投稿2017/01/30 10:06

編集2017/02/05 09:14

hikochang

総合スコア648

退会済みユーザー

2017/01/31 00:26

反応頂き、ありがとうございます！私自身、あまり理解出来ていなく試行錯誤している所なのですが return doGet();という記述がないと、フォームが再度表示されないのです・・・。「スクリプトが完了しましたが、何も返されませんでした。」というメッセージが返ってきます。やりたいイメージとしては以下の通りです。 ①番号入力フォームが表示される ②Aという人がフォームに番号を入力し、送信ボタンを押す ③入力された番号はスプレッドシートに反映され、フォームは再度表示される ④Bという人がフォームに番号を入力する・・・以下、②～④の繰り返しというイメージです。ところが、現在は③の所でフォームが再表示されず真っ白なページになってしまいます。上記と併せて、return doGet();という記述がなくてもフォームが再表示される記述方法がございましたらご教示頂けますと幸いです。宜しくお願いいたします。