Twitter Bootstrapのbuttonタグを使ったラジオボタンの値をsubmitしたい
デザイン力とCSS力のない自分にとって,Twitter Bootstrapはとても便利.
簡単にそれっぽいサイトを作り上げてくれる.
で,Twiter Bootstrapには,buttonタグをbtn-groupクラスのdivタグで囲んだら,チェックボックスやラジオボタンのような挙動にしてくれる便利な機能がある.
ラジオボタンの場合,
<div class="btn-group" data-toggle="buttons-radio"> <button type="button" class="btn btn-info active">あいうえお</button> <button type="button" class="btn btn-info">かきくけこ</button> <button type="button" class="btn btn-info">さしすせそ</button> </div>
とするだけで,
こんなのができる.
でも,inputタグではないから,formで囲んでsubmitしても,ラジオボタンの情報は取れない.
これで悩んでたら,発見.
> javascript - Get the value of a twitter bootstrap radio button. JQuery - Stack Overflow
Stack Overflowさまさまです.
javascriptとtypeがhiddenのinputタグを使うことで実現できる.
ボタンが押される度にそのinputタグのvalueの値を変更するようなjavascriptを書けばいい.
例えば,
<!DOCTYPE html> <html lang="ja"> <head> <link href="assets/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container"> <h3>テスト</h3> <form action="test.html" method="get"> <input type="hidden" id="alignment" name="selected" value="" /> <div class="btn-group alignment" data-toggle="buttons-radio"> <button type="button" class="btn btn-info" name="aiueo">あいうえお</button> <button type="button" class="btn btn-info" name="kakikukeko">かきくけこ</button> <button type="button" class="btn btn-info" name="sasisuseso">さしすせそ</button> </div> <button type="submit" class="btn btn-primary">submit</button> </form> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="assets/js/bootstrap.min.js"></script> <script> $(".alignment .btn").click(function() { $("#alignment").val($(this).attr('name')); }); </script> </body> </html>
こんな感じで書くと,
こんなのができる.
で,「あいうえお」を選択して,submitを押すと,(見えないけど)アドレスバーのURLが
〜〜〜〜/test.html
から
〜〜〜〜/test.html?selected=aiueo
って,なってて,ちゃんと出来てる.