勉強したことのメモ

webプログラマ見習いが勉強したことのメモ。

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>

 - HTML, JavaScript, jQuery

  関連記事

bootstrap-datetimepickerについて

日付のピッカーはよく見るけど、時間のピッカーはあまり見ないので、 普通のセレクト ...

tableのフィルター機能

jQueryのプラグインで簡単にフィルター機能が つけられたのでメモ。 ■必要な ...

safariのみスクロール関連のイベントが発火しない

jQueryで一定距離スクロールさせた場合に発火するイベントをプログラムしていた ...

FormDataを使ったAjax通信がiPhoneのみエラー

FormDataオブジェクトを使用したAjax通信するシステムがあり、PCやAn ...

スマホ対応のjQueryのカラーピッカープラグイン

以前の記事でカラーピッカープラグインのことを書いたけど、スマホでは使えない。なの ...

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

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

jQueryの最新バージョン呼び出しとバージョン確認

<script type="text/javascript" src="h ...

jQueryのCSS変更

jQueryでCSSを触る際、 $("#aaa").css('height',' ...

JavaScriptでURLのクエリを取得する

やりたかった事はJavaScriptでGETのクエリを取得。 ■ソース var ...

setTimeoutの注意点

javascriptのsetTimeoutにて変数を用いた際に 想定外の挙動を起 ...