disabled と readOnly の違いを実際に書いて試してみました
この例ではsubmitを押してもどこにも送信されませんが
記事の下の方にあるコード2.gsで作ったアプリケーションに飛ばすと
送信された中身を取得することができます
disabled と readOnly の違いを個人的にまとめたもの
disabed
- 要素を無効にする
- 選択できない
- ボタンやセレクトボックス等を選択不可にしたい時に使える
- テキストエリアへの入力も無効にできる
- formのsubmit時にnameとvalueが送信されない
- HTML内で直接設定する場合
- disabled または disabled="disabled"
- JavaScriptで変更する場合
- element.disabled = true または element.disabled = "disabled"
readOnly
- 読み取り専用
- 選択できる
- テキストエリアの入力を無効にしたい時に使える
- ボタンやセレクトボックス等は選択できる
- formのsubmit時にnameとvalueが送信される
- HTML内で直接設定する場合
- readonly または readonly="readonly"
- readOnly でも同じ
- JavaScriptで変更する場合
- element.readOnly = "readonly" または element.readOnly = true
- element.readonly だと設定できない
コード.gsfunction doGet() {
return HtmlService.createHtmlOutputFromFile("index");
}
| 意訳この機能がやること 指定したHTMLファイルを表示する |
index.html<!DOCTYPE html>
<html>
<body>
<form id="form" method="get" action="URL">
<label>readOnly</label><br>
<input type="text" name="read" value="text1" readOnly>
<select name="select1" readOnly>
<option>option1-1</option>
<option>option1-2</option>
</select>
<br>
<br>
<label>disabled</label><br>
<input type="text" name="dis" value="text2" disabled>
<select name="select2" disabled>
<option>option2-1</option>
<option>option2-2</option>
</select>
<br>
<br>
<button type="submit">submit</button>
</form>
</body>
</html>
| 意訳これはHTML5文書です formを置く（methodはgetでactionにはフォーム送信を受け取る側のURLを設定） ラベルを置く readOnlyのテキストボックスを置く readOnlyのセレクトボックスを置く 選択肢1 選択肢2 ラベルを置く disabledのテキストボックスを置く disabledのセレクトボックスを置く 選択肢1 選択肢2 submitボタンを置く |
送信された中身を見たい
formのsubmit時にnameとvalueが送信されるかどうか
実際に送信した際のデータの中身を見てみたい
ということで受け取ったデータを返すアプリケーションを別途作って確認してみます
手順
- コード.gsとは別にもう一つスクリプトファイルを作成する
- 以下のコード2.gsを書いて保存する
- 公開メニューからWebアプリケーションとして導入する
- 作成したアプリケーションのURLをコピーする
- コード.gsの action="URL" のURLにペーストする
- コード.gsのWebアプリケーションを開いて submit ボタンをクリックする
コード2.gsfunction doGet(e) {
var html = "<p>" + JSON.stringify(e.parameter) + "</p>";
var xframe_option = HtmlService.XFrameOptionsMode.ALLOWALL;
var output = HtmlService.createHtmlOutput(html).setXFrameOptionsMode(xframe_option);
return output;
}
| 意訳この機能がやること 受け取ったパラメータをJSONに変換してp要素に入れて XFrameOptionsModeをALLOWALLにして HTMLを作って 返す |
上記の手順1〜6を実行後
以下のような画面が表示されます
readOnlyのnameとvalueは送信されていますが
disabledのnameとvalueは送信されていないことがわかります
readOnlyの要素
<input type="text" name="read" value="text1" readOnly> <select name="select1" readOnly> <option>option1-1</option> <option>option1-2</option> </select> |
テキストボックスの name=read で value=text1
セレクトボックスの name=select1 で デフォルトで選択されている value=option1-1
これらは送信されている
disabledの要素
<input type="text" name="dis" value="text2" disabled> <select name="select2" disabled> <option>option2-1</option> <option>option2-2</option> </select> |
テキストボックスの name=dis で value=text2
セレクトボックスの name=select2 で デフォルトで選択されている value=option2-1
これらは送信されていない
