formでdisplay:none;にしてても送信される
2014/05/19
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>
関連記事
-
-
要素の表示or非表示
今まで要素の表示or非表示をCSSで操作する際、 display:none; / ...
-
-
「slick」で作成したスライダー画像にランキングの順位を表示する方法
「slick」で作成したスライダー画像に対して、ランキングの順位を表示したいとい ...
-
-
jQueryプラグインの作成
面白そうだったのでメモ。 ■参考サイト http://www.entacl.in ...
-
-
videoタグで表示させた動画をjQuery&CSSでフローティングビデオ対応させる方法
Web上の動画をFloatingVideo対応したいという要望を受けた。ページ上 ...
-
-
Jcropを使ってブラウザ上で画像を範囲指定して切り抜き(トリミング)
やりたかった事は、画像をアップロードして必要な部分のみを範囲指定してもらい、指定 ...