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>
Comments
Post a Comment