【フォームform】inputタグの値が送信されない：disabled属性の特性について
2022.11.03 /
本記事ではフォームformで発生する、inputタグなどの値が送信されない（サーバー側で受信できない）問題について解説していきます。
Webアプリケーションではフォームにユーザーが入力した値をサーバーに送ることが多いです。問題がなければサーバー側でユーザーが入力した値を受け取り、処理を行います。
しかしいくらフォームを通して値を送信しても、サーバー側でうまく値を受け取れないことがあります。
結論を言うと、disabled属性をフォーム内の入力フィールド（inputタグやselectタグなど）に使っていると値がサーバーに送信されません。
本記事を通して、inputタグなどから値を送信できない問題について理解を深めてください。
フォームで発生した問題
フォームとはユーザーがフィールドに入力した値をサーバーに送信するための機能です。ログイン認証やユーザー登録の画面で利用されています。フォームでは入力フィールドにinputタグやselectタグなどを用います。
このフォームを使ってinputタグに入力された値をPOSTでサーバーに送ったところ、サーバー側でその値を受け取れない問題が発生しました。コードは以下の通りです。
<html>
<form action="" method="post">
<div>
<label for="booking">Booking</label>
<input type="text" id="booking" name="booking" disabled>
</div>
</form>
</html>
ここではinputタグにdisabled属性を追加して、ユーザーからの入力を無効にしています。
disabledとは、付与したタグを入力不可にする属性です。フォームなどでユーザーに入力をさせたくないタグに追加して、ユーザーからの入力を不可にできます
上記のコードでなぜサーバーに値が送信できなかったのかは、次項で詳しく解説していきます。
disabled属性による送信の無効化
冒頭ですでに説明していますが、
inputタグに入力した値がサーバーに送信されなかった理由はdisabled属性をinputタグに付与していたからです。
disabled属性が付与されたフィールドのデータはサーバーに送信されないようになっています。そのためデータをサーバーに送信するためにはdisabled属性を外す必要があるということです。
disabled属性が付与されたinputタグのデータを送信する方法
disabled属性が付与されたinputタグのデータをサーバーに送信する方法は以下の通りです。
- サーバーにデータを送信するsubmitの直前にdisabled属性を外す
- disabled属性をreadonly属性に変更する
それぞれの方法について確認していきましょう。
サーバーにデータを送信するsubmitの直前にdisabled属性を外す
サーバーにデータを送信する直前にdisabled属性を外すことで、inputタグのデータをサーバーに送信することができます。
まずjQueryでdisabled属性を外す関数を以下のように定義します。
function undisabled() {
$('input[name="booking"]').prop('disabled', false);
}
上記の関数が実行されるとinputタグからdisabledが外されます。
次にデータを送信（submit）するボタンが押された際に上記関数が実行されるようにonclick属性を使って以下のように記述します。
<input type="submit" name="submit" value="Submit" onclick="undisabled();">onclick属性とはタグ（開始タグ）に指定できる属性の一つであり、要素がクリックされた際に実行する処理を指定できます。
<開始タグ onclick=クリック時に実行する処理>テキスト</終了タグ>
onclick属性について詳しくは以下記事をご参照ください。
【HTML】ボタンタグ<button>にリンクを付ける方法：onclick属性
このように関数とonclick属性を使用することで、送信ボタンを押した際にdisabledを外してinputタグのデータをサーバーに送信できます。
disabled属性をreadonly属性に変更する
inputタグにはdisabled属性のほかにreadonly属性が利用できます。
<input type="text" id="booking" name="booking" readonly>readonly属性を付与すると入力フィールドの見た目の変化はありませんがユーザーによる値の変更ができなくなります。disabled属性の場合は入力フィールドがグレーアウトされます。
見た目以外はdisabled属性とreadonly属性は同じと考える人は多いですが、大きな違いが一つあります。
それはフォームをSubmit（送信）するとデータをサーバーに送信するという点です。
もし見た目に問題がないのであれば、disabled属性ではなくreadonly属性を利用してもいいかと思います。
readonly属性はテキスト以外のチェックボックスやラジオボタン、セレクトでは機能しません
まとめ
本記事「【フォームform】inputタグの値が送信されない：disabled属性の特性について」はいかがでしたか。
本記事で解説した重要な点を以下にまとめます。
- disabled属性をinputタグに付与するとサーバーにデータを送信しない
- onclick属性などを用いて送信前にdisabledを外してデータ送信を可能にできる
- readonly属性であればデータ送信が可能
フォームのページを作成しているとたまにハマってしまう問題かと思います。ぜひ本記事で解説したことは覚えておいてください。
関連記事
