勉強したことのメモ

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

  関連記事

jQueryで後から追加された要素にイベントを設定

jQueryで.html()等を使って追加した要素に対してイベントを設定したかっ ...

Dropzone.jsを使って画像をドラッグ&ドロップでアップロードする方法

画像を複数枚ドラッグ&ドロップでアップロードしたかった。だいぶ前にDro ...

jQueryで画像が存在すれば表示、なければノーイメージ画像を表示

やりたかった事は以下の通り。 ・画像のURLはcode.jpgみたいになってる ...

Ajaxで画像のアップロード(jquery.upload)

業務中に画像の選択後、アップロードボタンを押して画像のアップ、 その後フォームの ...

リアルタイムプレビュー時の改行とテーブルの上部揃え

■サンプル http://sample.taitan916.info/previ ...