How to bind bootstrap button-checkbox and form?

Question

There is a code look like 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 to send it to the get method? Probably have to write some js(jquery) code, but I can't come up anything.

Your code is already submitting to the /test.html page: <form action="/test.html" method="get"> — sushain97
– sushain97, Commented Sep 4, 2013 at 11:35
sushain97 but data from buttons-checkbox don't sending, about this issue. — Atterratio
– Atterratio, Commented Sep 4, 2013 at 11:37
Dipesh Parmar I tried the $.get(), but for some reason it did not work. Besides would have to write code for the standard input fields. — Atterratio
– Atterratio, Commented Sep 4, 2013 at 11:44

tommarshall · Accepted Answer · 2013-09-04 17:07:10Z

The problem you've got is that button values are not submitted.

The following will create hidden input elements for the buttons that are selected as the form is 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 for this to work I had to give the form an id, and give the buttons unique names (as they're buttons-checkbox rather than buttons-radio, see docs).

If you 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>

sushain97 · Accepted Answer · 2013-09-04 16:43:01Z

0

Your buttons under .btn-group are not submitting because they are of the incorrect type. You need to change type="button" to type="submit". Only buttons which have type="submit" will submit the parent form (default button type is submit)).

<div class="btn-group" data-toggle="buttons-checkbox">
    <button type="submit" name="bb" value="b1" class="btn btn-primary">Left</button>
    <button type="submit" name="bb" value="b2" class="btn btn-primary">Middle</button>
    <button type="submit" name="bb" value="b3" class="btn btn-primary">Right</button>
</div>

answered Sep 4, 2013 at 16:43

sushain97

2,8221 gold badge28 silver badges36 bronze badges

Collectives™ on Stack Overflow

How to bind bootstrap button-checkbox and form?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related