disabled属性が設定されている値をSubmitする際の注意点

  • このエントリーをはてなブックマークに追加

disabled属性を設定したHTML要素は、無効化されて一切操作できなくなります。disabled属性を設定した要素の値をサーバーにSubmitする際、値がサーバーに送信されないため注意が必要です。input要素の値は編集されたくないけど、サーバーに値を送信する方法をサンプルコードを提示しながら説明していきます。

  1. HTML要素のdisabled属性を有効化
  2. disabled属性の値をPOST
  3. readonly属性
  4. hiddenタグで画面内に埋め込む

※ASP.NET CoreとC#、Bootstrapを利用してコードを作成しています。

 1. HTML要素のdisabled属性を有効化

disabled属性をinput要素やbutton要素、select要素などに付けると、要素を向無効化することができます。

●View(cshtml)

input要素・select要素・button要素・チェックボックスにdisabled要素を付けて、無効化しました。

 2. disabled属性の値をSubmit

要素を無効化するのはdisabled属性を付ければいいだけですが、disabled属性が設定された要素の値はPOSTすることができません。実際にブレイクポイントを置き、送信された値を確認していきます。

●View(cshtml)

作成したフォーム入力画面は以下のようになります。社員番号と本社勤務チェックボックスが無効になっています。

部署を「人事部」→「総務部」に編集してPOSTします。ブレークポイントをSubmit先のアクション内に置いて、Submitされたデータを確認すると変更後の部署は取得できていますが、Id(社員番号)は0になり、本社勤務のチェックはfalseになっています。

●Controller

 2. readonly属性

readonly属性を設定すると、input要素・textarea要素は読み取り専用になり、値の変更ができないようになります。readonly属性と検索すると「値の変更は行えないが、コントロールは有効なので フォームを Submit すれば値の送信が行われる」と出てくるので、社員番号のinput要素と本社勤務のチェックボックスにreadonly属性を設定して、データが正しくSubmitされるか確認します。

※上記の図から確認できますが、チェックボックスにはreadonly属性が効きません。よって、readonly属性を利用することはお勧めしません。

 3. hiddenタグで、データを画面内に埋め込む

disabled属性がついた値をSubmitしたい場合は、同じ値をhiddenで画面内に埋め込んでおけば、disabled属性が付いている要素のデータをSubmitすることができます。

●View(cshtml)

●Controller

Controllerにブレークポイントを置いて確認すると、「Id=1、本社勤務=true」になっており、disabled属性にした要素の値がサーバー側で取得されていることが確認できます。

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメントを残す

*