How to use a bootstrap button group as radio buttons in a custom form

[David Gawlowski]

hoping someone can point me in the right direction, as the post title says I want to use a btn-group

{{=form.custom.begin}}

<input type="hidden" name="_form" value="new_game" />

<div id="new_game" class="centrd">

<div class="btn-group" data-toggle="buttons-radio">

<button type="button" class="btn btn-primary radio">Opt1</button>

<button type="button" class="btn btn-primary radio">Opt2</button>

</div>
                etc etc

as radio buttons to pass value to the form, but I am struggling with passing the value.  How do I get the selected value the web2py way without resorting to js? (like here on SO)

Right now my model is pretty vanilla 

    Field('opt'),

as well as vanilla controller

form = SQLFORM(db.games)

Thx!

[Alan Etkin]

hoping someone can point me in the right direction, as the post title says I want to use a btn-group

Try using name="opt" for the input element. However, it would be better to use a custom widget.

http://www.web2py.com/books/default/chapter/29/07/forms-and-validators#Widgets

[David Gawlowski]

Thanks Alan - I'm still trying to get the intended result: Bootstrap buttons that function like radio buttons.  I studied fields being brought in as normal radios, and like you suggested added the names:

<div id="thetable_thefield" name="thefield" class="btn-group" data-toggle="buttons-radio">

<input type="radio" name="thefield" value="first" class="btn btn-primary radio"></input>

<input type="radio" name="thefield" value="second" class="btn btn-primary radio"></input>

</div>

which DOES work until you change the type to button:

<div id="thetable_thefield" name="thefield" class="btn-group" data-toggle="buttons-radio">

<input type="button" name="thefield" value="first" class="btn btn-primary radio"></input>

<input type="button" name="thefield" value="second" class="btn btn-primary radio"></input>

</div>

at which point the value is NOT passed in the form.

Is there a simple way to copy/tweak the radio widget, or convince it to act the same for a type=button?  I'm afraid creating a new widget from scratch is a bit beyond my web2py skills, at least from what I've read in the manual...

thank you for your help,

Dave

[Alan Etkin]

Thanks Alan - I'm still trying to get the intended result: Bootstrap buttons that function like radio buttons.  I studied fields being brought in as normal radios

Have you tried setting name="opt" for this input instead (leaving the options with their original attributes)?

<input type="hidden" name="opt" value="new_game" />

[David Gawlowski]

Thanks again Alan, but the name in the original was just an example and in the second post I reverted to actual variables, which is why you see "parts"... and alas that did not fix it.

that said I *think* I have it working, just need to battle through the CSS nightmare that is bootstrap and figure out why the :checked appearance is so lousy, then I will post the working solution here for posterity;)

[David Gawlowski]

Okay, for posterity's sake, here is how I got it working:

in model:

db.define_table('games',

    Field('parts', widget = SQLFORM.widgets.radio.widget, requires = IS_IN_SET({'Halves','Quarters'})),
  etc

in controller:

   form = SQLFORM(db.games)
   (in other words nothing special)

in view:

{{=form.custom.begin}}

<input type="hidden" name="_form" value="new_game" />

<div class="btn-group batradio" data-toggle="buttons-radio">

 <label class="btn btn-primary" for="partsOne">

   <input id="partsOne" name="parts" type="radio" value="Halves" />Halves

 </label>

 <label class="btn btn-primary" for="partsTwo">

   <input id="partsTwo" name="parts" type="radio" value="Quarters" />Quarters

 </label>

</div>
        etc

in app-specific css file:

input[type="radio"] {display:none;}

Note that I did not need to use javascript to get the toggle of the buttons to work as was described in the Bootstrap 2.3.2 documents.  If by the time you are reading this web2py has migrated to Bootstrap 3 things may be different, hopefully easier;)

You can see it running here: http://www.sportssquaresonline.com/newGame

This really looks good and I plan to use more in the future - hope this saves someone else a little grief!