LANG SELRCT

コードを書く場所についてはこちら

2018年1月21日日曜日

disabledとreadOnly


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 だと設定できない



コード.gs
function 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が送信されるかどうか
実際に送信した際のデータの中身を見てみたい

ということで受け取ったデータを返すアプリケーションを別途作って確認してみます


手順
  1. コード.gsとは別にもう一つスクリプトファイルを作成する
  2. 以下のコード2.gsを書いて保存する
  3. 公開メニューからWebアプリケーションとして導入する
  4. 作成したアプリケーションのURLをコピーする
  5. コード.gsの action="URL" のURLにペーストする
  6. コード.gsのWebアプリケーションを開いて submit ボタンをクリックする



コード2.gs
function 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
これらは送信されていない