覚え書き。
twitter bootstrapではチェックボックス、ラジオボタンのような選択型で
普通のinputタグの書き方ではなくて btn-groupというクラスのdivの中に
選択肢の要素を書くようなコードになる。
これでそのままフォームをsubmitしても何もとれないので、
submitのタイミングなどでjavaScriptでactive(btn-groupの子要素内で押下したボタンのclassにはactiveがつく)を拾って値を整形しなおすようにしている。
これでradioなら1つスカラー値が、checkboxならカンマ区切りで選択した値がまとめてとれる感じだったと思います。
で、このselectedの値を別に用意したinput hiddenタグなどに入れなおして、submitと。
ここまではstackoverflowに書いてあった。
それでそのhiddenで渡す値をSymfony2でどうするか、なのですが、
[1. submit側]
formTypeで定義した名前を使ってパラメタにしないとバインド時に値を取得してくれないので、
formTypeの中のbuildFormでhogeがaddで指定されていて、フォームタイプ名はgetName()の戻り値として指定してある感じで。
のように、ちょっと手作業的な書き方をしてるのですが、どうなんだか。
[2.出力側]
ちなみにフォーム値から書き出すときは本当はフォーム出力のテンプレート側で定義すべきなんでしょうけど、出力ページによってフォーマットが微妙に異なったりするので、出力側のtwigには
hogevalはコントローラ側から渡している値…
もうちょっとエレガントに書きたいですが、実際結構こうなってしまったりする…
twitter bootstrapではチェックボックス、ラジオボタンのような選択型で
普通のinputタグの書き方ではなくて btn-groupというクラスのdivの中に
選択肢の要素を書くようなコードになる。
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" class="hoge btn">選択肢1</button>
<button type="button" class="hoge btn">選択肢2</button>
<button type="button" class="hoge btn">選択肢3</button>
:
:
</div>
これでそのままフォームをsubmitしても何もとれないので、
submitのタイミングなどでjavaScriptでactive(btn-groupの子要素内で押下したボタンのclassにはactiveがつく)を拾って値を整形しなおすようにしている。
var selected = $('.btn-group button.btn.active').val();
これでradioなら1つスカラー値が、checkboxならカンマ区切りで選択した値がまとめてとれる感じだったと思います。
で、このselectedの値を別に用意したinput hiddenタグなどに入れなおして、submitと。
ここまではstackoverflowに書いてあった。
それでそのhiddenで渡す値をSymfony2でどうするか、なのですが、
[1. submit側]
<input type=hidden name="{フォームタイプ名}[hoge]" >
formTypeの中のbuildFormでhogeがaddで指定されていて、フォームタイプ名はgetName()の戻り値として指定してある感じで。
のように、ちょっと手作業的な書き方をしてるのですが、どうなんだか。
[2.出力側]
ちなみにフォーム値から書き出すときは本当はフォーム出力のテンプレート側で定義すべきなんでしょうけど、出力ページによってフォーマットが微妙に異なったりするので、出力側のtwigには
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" class="hoge btn{%if (hogeval == 1)%} active{%endif%}">選択肢1</button>
<button type="button" class="hoge btn{%if (hogeval == 2)%} active{%endif%}">選択肢2</button>
<button type="button" class="hoge btn{%if (hogeval ==31)%} active{%endif%}">選択肢3</button>
:
:
</div>
もうちょっとエレガントに書きたいですが、実際結構こうなってしまったりする…
コメント
コメントを投稿