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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Google Apps Script

Google Apps ScriptはGoogleの製品と第三者のサービスでタスクを自動化するためのJavaScriptのクラウドのスクリプト言語です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

15245閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

Google Apps Script

Google Apps ScriptはGoogleの製品と第三者のサービスでタスクを自動化するためのJavaScriptのクラウドのスクリプト言語です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2017/01/30 09:29

###前提・実現したいこと
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秒後にウインドウリロードされるコードなどを
いれてみたが、解決できなかった

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

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

修正方針

  1. submit()せず、insertInfo.gs側のdoPost(e)を呼ぶにとどめる
  2. document.getElementById("kinoko").innerHTML = "登録完了しました";で入力フォームが消えてしまうので、これは削除
  3. 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 大変助かりました!
guest

0

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();という記述がなくても フォームが再表示される記述方法がございましたらご教示頂けますと幸いです。 宜しくお願いいたします。
hikochang

2017/02/01 01:28

「return doGet();」は使用していませんでしたが、"display:none"のiframeをtargetに設定したうえでreloadを行っていました。 <iframe name="hidenframe" style="display:none"></iframe>
退会済みユーザー

退会済みユーザー

2017/02/01 05:16

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問