javascript - How to bind bootstrap button-checkbox and form? -

there code this:

<form action="/test.html" method="get">     <p><b>question?</b></p>     <p><input type="radio" name="answer" value="a">c<br>        <input type="radio" name="answer" value="b">b<br>        <input type="radio" name="answer" value="c">c</p>      <div class="btn-group" data-toggle="buttons-checkbox">     <button type="button" name="bb" value="b1" class="btn btn-primary">left</button>     <button type="button" name="bb" value="b2" class="btn btn-primary">middle</button>     <button type="button" name="bb" value="b3" class="btn btn-primary">right</button>     </div>      <p><input type="submit"></p> </form> 

how send method? have write js(jquery) code, can't come anything.

the problem you've got button values not submitted.

the following create hidden input elements buttons selected form submitted.

<form action="/test.html" id="the-form" method="get">     <p><b>question?</b></p>     <p><input type="radio" name="answer" value="a">c<br>        <input type="radio" name="answer" value="b">b<br>        <input type="radio" name="answer" value="c">c</p>      <div class="btn-group" data-toggle="buttons-checkbox">         <button type="button" name="bb1" value="b1" class="btn btn-primary">left</button>         <button type="button" name="bb2" value="b2" class="btn btn-primary">middle</button>         <button type="button" name="bb3" value="b3" class="btn btn-primary">right</button>     </div>      <p><input type="submit"></p> </form> <script>     $('#the-form').on('submit', function() {         $('.btn.active', '#the-form').each(function() {             var input = document.createelement("input");             input.setattribute("type", "hidden");             input.setattribute("name", this.name);             input.setattribute("value", this.value);             document.getelementbyid("the-form").appendchild(input);         });     }); </script> 

n.b. in order work had give form id, , give buttons unique names (as they're buttons-checkbox rather buttons-radio, see docs).

if want buttons-group behaviour use:

<div class="btn-group" data-toggle="buttons-radio">     <button type="button" name="bb" value="b1" class="btn btn-primary">left</button>     <button type="button" name="bb" value="b2" class="btn btn-primary">middle</button>     <button type="button" name="bb" value="b3" class="btn btn-primary">right</button> </div>