More than 5 years have passed since last update.

サーバーにデータを送信できる読み取り専用フォームを作る

Posted at 2012-07-18

動機

入力画面 → 確認画面 → 登録完了画面というような画面遷移をするWebアプリケーションを作る際に、できるだけ入力画面と確認画面を共通化したい。
さらに確認画面から登録完了画面に遷移するタイミングでデータを更新するので、入力画面からだけではなく確認画面からも入力値をサーバーに送信する必要がある。

入力画面と確認画面は同じHTMLフォームを使いつつ、確認画面ではユーザーがフォームに表示されているデータを変更できないようにする。

Mac

Windows

readonly属性を付ける。なお、disabled属性を付けるとサーバーにデータが送信できないので、今回の動機を充たさない。

<input name="a" type="text" value="hoge" readonly="readonly" />
<textarea name="b" readonly="readonly">piyo</textarea>

テキストボックスとテキストエリア以外はreadonly属性が使えないのでJavaScript(CoffeeScript)でユーザーの操作を無効化する等の工夫が必要になる。

onfocusイベントで変更前の値を保存し、onchangeイベントで強制的に変更前の値に戻す。
ここでは画面内の全セレクトボックスにそのような処理を付加するjQuery + CoffeeScriptの例を示す。

$('select').live 'focus', ->
  this.previous_value = this.value

$('select').live 'change', ->
  this.value = this.previous_value

チェックされていないラジオボタンにdisabled属性を付けることで、「1つしか選択できないラジオボタン」を作る。
HTMLタグに直接disabled属性を付ける方法もあるが、ここでは画面内の全ラジオボタンに一括でdisabled属性を付与するjQuery + CoffeeScriptの例を示す。

$(':radio:not(:checked)').attr('disabled', true)

jQueryのpreventDefaultメソッドを使って、onclickイベントを無効化する。

$(':checkbox').live 'click', (e) ->
  e.preventDefault()

値の変更を抑制するだけではなく、フォームが読み取り専用になっていることがわかるように、視覚的な変化を加えることが望ましい。