物理学者(ポスドク)による日々の研究生活のメモ書きです ( python/emacs/html/Japascript/シェルスクリプト/TeX/Mac/C言語/Linux/git/tmux/R/ポケモンGO)
天啓を得て、Google Apps Script(通称GAS)を使うことになった
GASにhtmlのformからの情報を流し込む
以前もhtmlのformは使ったことがあったので、
それをまとめた記事があると思ってたけどどこにないので改めてまとめておく
■ 参考 : ピュアな JavaScript でフォーム(form)系要素の値を取得, 設定する方法一覧
formではいろんなタイプの入力方法がある
↑のページでリストアップされているので、改めてここでは書かなくてもいいかぁ〜
inputタグで使えるものとしては以下のものがある
text
radio
checkbox
select
testarea
file
button
などなど
■ 参考 : セレクトボックスを作る
■ 参考 : ラジオボタンを作る
■ 参考 : 隠しデータを送信する
画面には表示はしないけど、入力を送ることができるhiddenとかもある
これで、ユーザーが選ぶ必要がない時刻とかの情報も送ることができる
(2019/07/02 追加)
ユーザーに複数の選択肢を選んでほしいときがあった
ラジオボタンってのは1つの選択肢しか選べないものらしい
複数選択はチェックボタン input type=”checkbox” で実装するらしい
長めの文章を入力してもらう場合は1行のみのtextでは不十分
なのでtextareaタグを使う
■ 参考 : inputタグ、textareaタグ、selectタグ
で、これらの入力をjavascriptで受け取って何かをやる
ただし、javascriptはユーザー側のウェブブラウザで実行されるので
その後でサーバーのファイルを改変したり〜とかはできない
■ 参考 : HTMLとJavaScriptの関係とは？｜呼び出し・制御方法について解説
formの入力に応じてなにか要素を追加したい場合は↓
■ 参考 : JavaScriptで要素を生成・追加する
ただ、GASの場合は、formの入力を受け取ってそれをさらに別の場所に送ったりできる
それについては次の記事でまとめる予定
(2020/02/11 追記)
ボタンを押すと、投票フォームのテキストボックスになにか指定したテキストを代入したいとき
javascriptで実装可能
■ 参考 : テキストボックスに値を設定する(getElementByIdメソッド)
clickAddText()
clickClearText()
はjavascriptの関数
テキストボックスにはidを設定しておく、関数内でそのidの値に代入できる
ツイート
GASにhtmlのformからの情報を流し込む
以前もhtmlのformは使ったことがあったので、
それをまとめた記事があると思ってたけどどこにないので改めてまとめておく
■ 参考 : ピュアな JavaScript でフォーム(form)系要素の値を取得, 設定する方法一覧
formではいろんなタイプの入力方法がある
↑のページでリストアップされているので、改めてここでは書かなくてもいいかぁ〜
inputタグで使えるものとしては以下のものがある
text
radio
checkbox
select
testarea
file
button
などなど
■ 参考 : セレクトボックスを作る
■ 参考 : ラジオボタンを作る
■ 参考 : 隠しデータを送信する
画面には表示はしないけど、入力を送ることができるhiddenとかもある
これで、ユーザーが選ぶ必要がない時刻とかの情報も送ることができる
(2019/07/02 追加)
ユーザーに複数の選択肢を選んでほしいときがあった
ラジオボタンってのは1つの選択肢しか選べないものらしい
複数選択はチェックボタン input type=”checkbox” で実装するらしい
長めの文章を入力してもらう場合は1行のみのtextでは不十分
なのでtextareaタグを使う
<textarea name="comment" cols="50" rows="5" placeholder=\"default comment or fan letter\"></textarea>
みたいな感じで、大きさを5x50にできる■ 参考 : inputタグ、textareaタグ、selectタグ
で、これらの入力をjavascriptで受け取って何かをやる
ただし、javascriptはユーザー側のウェブブラウザで実行されるので
その後でサーバーのファイルを改変したり〜とかはできない
■ 参考 : HTMLとJavaScriptの関係とは？｜呼び出し・制御方法について解説
formの入力に応じてなにか要素を追加したい場合は↓
■ 参考 : JavaScriptで要素を生成・追加する
ただ、GASの場合は、formの入力を受け取ってそれをさらに別の場所に送ったりできる
それについては次の記事でまとめる予定
(2020/02/11 追記)
ボタンを押すと、投票フォームのテキストボックスになにか指定したテキストを代入したいとき
javascriptで実装可能
■ 参考 : テキストボックスに値を設定する(getElementByIdメソッド)
<input type="text" value="red" id="text_box" maxlength="5">
<input type="button" value="ボタン" onclick="clickAddText()">
<input type="button" value="クリア" onclick="clickClearText()">
みたいな感じで箱をhtmlに用意しておく<input type="button" value="ボタン" onclick="clickAddText()">
<input type="button" value="クリア" onclick="clickClearText()">
clickAddText()
clickClearText()
はjavascriptの関数
テキストボックスにはidを設定しておく、関数内でそのidの値に代入できる
<script type="text/javascript">function clickAddText(){
document.getElementById("text_box").value = "defalut_text";
}
function clickClearText(){
document.getElementById("text_box").value = "";
}
</script>
document.getElementById("text_box").value = "defalut_text";
}
function clickClearText(){
document.getElementById("text_box").value = "";
}
</script>
PR
この記事にコメントする
プロフィール
ＨＮ：coffee
職業：物理屋（自称）
趣味：映画鑑賞、登山
出身：大阪府の南の田舎
自己紹介：
import MyProfile
import coffee_pote from TWITTER
import amazonのほしい物リスト from WISH_LIST
print "先月子供が産まれました！"
# 最終更新 2022/10/25
職業：物理屋
趣味：映画鑑賞、登山
出身：大阪府の南の田舎
自己紹介：
import MyProfile
import coffee_pote from TWITTER
import amazonのほしい物リスト from WISH_LIST
print "先月子供が産まれました！"
# 最終更新 2022/10/25
カウンター
カテゴリー
ブログ内検索
リンク
相互リンク募集中です
(Twitterにてお知らせください)
Demo scripts for gnuplot version 5 (gnuplotのさまざまなデモ画像と作り方がまとめられている、眺めているだけでできるようになった気分になれる)
gnuplotスクリプトの解説 (米澤進吾さんの個人ページ、gnuplotと言えばこのかた)
gnuplot のページ (Takeno Lab、うちのブログがリンクされていたのでリンク返し)
Twitterから映画の評価が分かる ＆ 映画の鑑賞記録が残せる coco (映画の感想をまとめられるサイト、いつもお世話になっています)
Astronomy Picture of the Day Archive (天文や宇宙関連の最新の話題について画像とともにNASAが説明しているページ)
今日のほしぞら (任意の時刻の空で見える星を表示してくれる、国立天文台が管理している)
GNUPLOTとアニメーション (応用の項目の「見せてあげよう！ラピュタの雷を！！」あたりからすごすぎる)
読書メーター (読んだ本をリストできる便利なサイト)
flickr難民の写真置き場 (20XX年、flickrは有料化の炎に包まれた。あらゆるflickr無料ユーザーは絶滅したかに見えた。 しかし、tumblr移住民は死に絶えてはいなかった。)
教授でもできるMac OS X へのLaTeX, X11, gccのインストレーションと環境設定 (阪大の山中卓さんのwebページ、タイトルにセンスが溢れている、内容は超充実してる、特にTeX関連、学振DCとかPDの申請書類作成時にはお世話になっております)
英語論文執筆用の例文検索サービス (とんでもないものを見つけてしまった・・・・ arXivに収録されている 811,761報の 英語論文から，例文を検索するための検索エンジン)
Demo scripts for gnuplot version 5 (gnuplotのさまざまなデモ画像と作り方がまとめられている、眺めているだけでできるようになった気分になれる)
gnuplotスクリプトの解説 (米澤進吾さんの個人ページ、gnuplotと言えばこのかた)
gnuplot のページ (Takeno Lab、うちのブログがリンクされていたのでリンク返し)
Twitterから映画の評価が分かる ＆ 映画の鑑賞記録が残せる coco (映画の感想をまとめられるサイト、いつもお世話になっています)
Astronomy Picture of the Day Archive (天文や宇宙関連の最新の話題について画像とともにNASAが説明しているページ)
今日のほしぞら (任意の時刻の空で見える星を表示してくれる、国立天文台が管理している)
GNUPLOTとアニメーション (応用の項目の「見せてあげよう！ラピュタの雷を！！」あたりからすごすぎる)
読書メーター (読んだ本をリストできる便利なサイト)
flickr難民の写真置き場 (20XX年、flickrは有料化の炎に包まれた。あらゆるflickr無料ユーザーは絶滅したかに見えた。 しかし、tumblr移住民は死に絶えてはいなかった。)
教授でもできるMac OS X へのLaTeX, X11, gccのインストレーションと環境設定 (阪大の山中卓さんのwebページ、タイトルにセンスが溢れている、内容は超充実してる、特にTeX関連、学振DCとかPDの申請書類作成時にはお世話になっております)
英語論文執筆用の例文検索サービス (とんでもないものを見つけてしまった・・・・ arXivに収録されている 811,761報の 英語論文から，例文を検索するための検索エンジン)
最新記事
(11/20)
(03/05)
(02/29)
(02/21)
(02/21)
(02/21)
(02/21)
(01/13)
(01/05)
(01/05)