質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

質問する

ただいまの
回答率

88.32%

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

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 10K+
退会済みユーザー

退会済みユーザー

前提・実現したいこと

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

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

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

該当のソースコード

【insertInfo.gs】

function doGet(e){
  return HtmlService.createTemplateFromFile('index').evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

//書き込み先スプレッドシートID
var gasheet = "*********************************";
//POSTで受け取ってスプレッドシートへ書き込み
function doPost(e) {
  var number = String(e.parameter.number);
  Logger.log(number);
  var date = new Date();
    var ss = SpreadsheetApp.openById(gasheet);
    var sheet = ss.getSheetByName("DATA");
   var lastRow = sheet.getLastRow();
    sheet.getRange(lastRow+1, 1).setValue(number);
  sheet.getRange(lastRow+1, 2).setValue(date);
    return doGet();
}
【index.html】

<!DOCTYPE html>
<html>
  <head>
  <title>Google Spreadsheet書き込みテスト</title>
  <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
  <script type="text/javascript">

    function disp(){
      var str = document.forms.formman.number.value;
      if(str.match(/(\d{7})/)){
         if(window.confirm('送信しますか')){
         document.getElementById("formman").submit();
          document.getElementById("kinoko").innerHTML = "登録完了しました";
         }else{
          window.alert('キャンセルされました'); 
         }
        }else{
         window.alert("不備があります");
      }
   }
  </script>
  </head>
  <body>
  <center>
    <div id="kinoko">
      <form id="formman" action="https://script.google.com/a/macros/g.softbank.co.jp/s/******************/exec" method="post" target="_self">
        社員番号：<input type="text" size="18" maxlength="7" minlength="7" pattern="[0-9]*" id="number" name="number" placeholder="番号を入力してください" required>
        <p><input type="button" value="送信" onClick="disp()" class="action"></p>
        <p><input type="reset" value="リセット"></p>
      </form>
   </div>
  </center>
  </body>
</html>

試したこと

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2 件

link

checkベストアンサー

+3

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

 修正方針

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

 修正後のコード

// insertInfo.gs
//   doPostのみ抜粋
//   ★がついている行が変更箇所
function doPost(e) {
  var number = String(e.number); //★
  Logger.log(number);
  var date = new Date();
  var ss = SpreadsheetApp.openById(gasheet);
  var sheet = ss.getSheetByName("DATA");
  var lastRow = sheet.getLastRow();
  sheet.getRange(lastRow+1, 1).setValue(number);
  sheet.getRange(lastRow+1, 2).setValue(date);
  //★ return doGet(); は削除
}
<!DOCTYPE html>
<html>
  <head>
  <title>Google Spreadsheet書き込みテスト</title>
  <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
  <script type="text/javascript">

    function disp(){
      var str = document.forms.formman.number.value;
      if(str.match(/(\d{7})/)){
        if(window.confirm('送信しますか')){
          google.script.run.doPost(document.forms.formman); // ★submitではなくdoPost
          window.alert('登録完了しました');                 // ★alertで完了通知
          document.forms.formman.number.focus();            // ★
          document.forms.formman.number.value = "";         // ★未入力状態に戻す
        }else{
          window.alert('キャンセルされました');
        }
      }else{
        window.alert("不備があります");
      }
    }
  </script>
  </head>
  <body>
  <center>
    <div id="kinoko">
      <form id="formman"> <!-- ★いろいろ削除 -->
        社員番号：<input type="text" size="18" maxlength="7" minlength="7" pattern="[0-9]*" id="number" name="number" placeholder="番号を入力してください" required>
        <p><input type="button" value="送信" onClick="disp()" class="action"></p>
        <p><input type="reset" value="リセット"></p>
      </form>
    </div>
  </center>
  </body>
</html>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/02/01 14:13

    ご回答ありがとうございます！
    "登録完了しました"と表示させるプログラムによって入力フォームが消えてしまったのですね。

    フォーム入力後、未入力状態にするという発想が思いつきませんでした・・・！
    とても分かりやすい回答ありがとうございますm(_ _)m

    大変助かりました！

    キャンセル

link

0

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

return doGet();

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

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

<!DOCTYPE html>
<html>
  <head>
  <title>Google Spreadsheet書き込みテスト</title>
  <script type="text/javascript">

  function disp(){
    var str = document.forms.formman.number.value;
    if(str.match(/(\d{7})/)){
      if(window.confirm('送信しますか')){
      document.getElementById("formman").submit();
      document.getElementById("kinoko").innerHTML = "登録完了しました";
      }else{
      window.alert('キャンセルされました'); 
      }
    }else{
      window.alert("不備があります");
    }
    setTimeout("location.reload()",2000);
  }
  </script>

</head>
  <body>
  <div id="kinoko" align="center">
  <form id="formman" action="https://script.google.com/a/macros/*********.com/s/**********************/exec" method="post" target="hidenframe">
  社員番号：<input type="text" size="18" maxlength="7" minlength="7" pattern="[0-9]*" id="number" name="number" placeholder="番号を入力してください" required>
  <p><input type="button" value="送信" onClick="disp()" class="action"></p>
  <p><input type="reset" value="リセット"></p>
  </form>
  </div>
  <iframe name="hidenframe" style="display:none"></iframe>
  </body>
</html>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/01/31 09:26

    反応頂き、ありがとうございます！

    私自身、あまり理解出来ていなく試行錯誤している所なのですが
    return doGet();という記述がないと、フォームが再度表示されないのです・・・。

    「スクリプトが完了しましたが、何も返されませんでした。」というメッセージが返ってきます。

    やりたいイメージとしては以下の通りです。
    ①番号入力フォームが表示される
    ②Aという人がフォームに番号を入力し、送信ボタンを押す
    ③入力された番号はスプレッドシートに反映され、フォームは再度表示される
    ④Bという人がフォームに番号を入力する・・・
    以下、②～④の繰り返しというイメージです。

    ところが、現在は③の所でフォームが再表示されず真っ白なページになってしまいます。

    上記と併せて、return doGet();という記述がなくても
    フォームが再表示される記述方法がございましたらご教示頂けますと幸いです。

    宜しくお願いいたします。



    キャンセル

  • 2017/02/01 10:28

    「return doGet();」は使用していませんでしたが、"display:none"のiframeをtargetに設定したうえでreloadを行っていました。

    <iframe name="hidenframe" style="display:none"></iframe>

    キャンセル

  • 2017/02/01 14:16

    リロードは上記コードで実行出来るんですね！

    中身はiframeだろうから、iframeを再読み込みさせるscriptを入れればいいのではないかと
    ネットで色々漁っていました。
    今後、要件的にリロードが必要な仕組みが出てきたときは試してみたいと思います。

    ありがとうございました！

    キャンセル

15分調べてもわからないことは、teratailで質問しよう！

  • ただいまの回答率 88.32%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
質問する

関連した質問

同じタグがついた質問を見る

SNSアカウントでログイン

teratailアカウントでログイン

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る