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>
関連記事
-
-
タブアンダー広告をjQueryで再現する方法
サイト内のリンクをクリックすると、新しいタブもしくはウィンドウで開く広告をちょい ...
-
-
表示範囲を自由に変更可能な折れ線グラフが表示できるJSライブラリ amCharts の使用方法
どこかのサイトを閲覧していた際に、恐らくはJavaScriptのライブラリで描写 ...
-
-
ブラウザ上で何らかのファイルをダウンロードさせた際、ダウンロード完了のタイミングを検知する方法
ページ上でボタンをクリックすると画像やzipファイル等をダウンロードできるという ...
-
-
ラジオボタンのカスタムデータ属性を取得し、特定の値の場合はチェックさせない方法
ASPを使用したサイトで特定のradioボタンは選択不可にしたいというケースがあ ...
-
-
JavaScriptのbeforeunloadイベントでページの離脱防止
何らかのformがあるページで各種内容を入力後に何らかのリンクをクリックする等、 ...