勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

formでdisplay:none;にしてても送信される

   2014/05/19  jQuery JavaScript HTML

formで特定の部分をdisplay:none;で非表示にしてても
内容は送信された。

やりたかったのは、

・radioボタンで3つの中から選ばせる
・radioボタンで選択した際、selectメニューから詳細を選ばせる
・radioボタンの3つ目に関してはselectメニューを第3希望まで選ばせたい
・選択したもの以外は送信されない

というもの。

JavaScript
$(function(){
$(document).on('click', '.present_radio', function(){ //ラジオボタンをクリックした際
$('.span_class').hide(); //全てのselectメニューを非表示にする
$('.select_class').attr('disabled','disabled'); //全てのselectメニューをdisabledにする
$('#span_color' + $(this).val()).show(); //選択したところのselectメニューを表示させる
$('#span_color' + $(this).val()).find('.select_class').removeAttr('disabled'); //選択したところのselectメニューのdisabledを解除する
//$('#span_color' + $(this).val()).show().find('.select_class').removeAttr('disabled');みたいにまとめてもいけそう
});
});

■HTML
<form action="" method="post">
<input type="radio" class="present_radio" name="option1" value="1">A賞:カレー<br>
<span id="span_color1" class="span_class" style="display:none;">
<select name="color1" disabled="disabled" class="select_class">
<option value="1">甘口</option>
<option value="2">辛口</option>
</select><br>
</span>

<input type="radio" class="present_radio" name="option1" value="2">B賞:飲み物<br>
<span id="span_color2" class="span_class" style="display:none;">
<select name="color1" disabled="disabled" class="select_class">
<option value="1">紅茶</option>
<option value="2">水</option>
<option value="3">ビール</option>
</select><br>
</span>

<input type="radio" class="present_radio" name="option1" value="3">C賞:おやつ<br>
<span id="span_color3" class="span_class" style="display:none;">
第1希望
<select name="color1" disabled="disabled" class="select_class">
<option value="1">ケーキ</option>
<option value="2">パフェ</option>
<option value="3">プリン</option>
<option value="4">クッキー</option>
<option value="5">ゼリー</option>
</select><br>
第2希望
<select name="color2" disabled="disabled" class="select_class">
<option value="1">ケーキ</option>
<option value="2">パフェ</option>
<option value="3">プリン</option>
<option value="4">クッキー</option>
<option value="5">ゼリー</option>
</select><br>
第3希望
<select name="color3" disabled="disabled" class="select_class">
<option value="1">ケーキ</option>
<option value="2">パフェ</option>
<option value="3">プリン</option>
<option value="4">クッキー</option>
<option value="5">ゼリー</option>
</select><br>
</span>
<input type="submit" value="submit">
</form>

 - jQuery JavaScript HTML

  関連記事

JavaScript / jQueryにてページ表示時に指定したテキストボックスにフォーカスさせる方法

ページを開いた際に指定したテキストボックス(input type="text") ...

jQueryでiframe内の要素を呼び出し

jQueryでiframeで開いたbody内の内容が欲しかった。 ■jQuery ...

「input type="number"」のテキストボックスを桁数制限且つ半角数値のみ入力可にする方法

「input type="number"」のテキストボックスに対して「2桁まで」 ...

AjaxのJSONP使用でPHPで作った配列をJSに返す方法

AというサイトからBというサイトにAjax通信し、Bの方ではMySQLに接続して ...

Lightboxで画像拡大時に文字タイトルとリンクをつける

lightboxで画像をクリックして拡大した際に、文字タイトルとその文字にリンク ...