このユーザからの入力値をJquery等のjavascripで扱いたい。
GAS側で出来る事が多く、また関連する情報の多くがjavascriptでの扱いについては触れていない。
この投稿ではdoPostからの入力値をjavascriptで扱う為の一連の情報をまとめて扱う。
GAS側での処理で完結してしまう情報は多いが、javascriptで扱う記事が少ないので投稿した次第。
GAS上のhtml内でjavascripからPOSTのデータを扱う事で、Bootstrap等と併用が可能となり表現が多彩となる。
およその流れ
1) doGet側で通常のwebページ作成。ここにformを設定する。
2) doGetから送られたPOSTデータをdoPostで受けとる。
3) doPostから新たなwebページを表示する。
この時の変数をjavascripから参照する。
やや冗長に記載したが、要点としては僅かなので、以降実際のページを記載する。
全てを記載せず、説明を簡単にすませる目的で部分的な記載とした。
1) doGet側で通常のwebページ作成。
任意のhtmlページでformを書く。
actionで目的のdoPostでURLをGASのURL(execで終わるもの)を指定する。
通常のwebページと違い気をつけたい点は、targetの記載がないと動作しない様だ。
以下ではnameで受け取る事とした。
<form method="post" action=“【https://script.google.com/で始まるGASのURL】” target="_blank">
<p>
<label>名前を入力してください:<br><input type="text" name="name"></label>
</p>
<br>
<p>
<input type="submit" value="送信">
</p>
</form>
2) doGetから送られたPOSTデータをdoPostで受けとる。function doPost(e){
//データ取得
var title = e.parameter.name;
var temp = HtmlService.createTemplateFromFile('results');
temp.data = title;
return temp.evaluate().setSandboxMode(HtmlService.SandboxMode.NATIVE);
}
3) doPostから新たなwebページを表示するresults.htmlでは
<?= data > と記載する事で表示できる。
javascriptで参照したい場合は
<script>
var inputdata = String("<?= data ?>");
</script>
となる。もちろんタグ内で他のスクリプトと併用できる。
0 件のコメント:
コメントを投稿