Send Bootstrap Button-Group value in a form with Get or Post

Question

I created this form with bootstrap 3:

                        <form role="form" method="get" target="_self" action="checkplayer.php">
                        <div class="input-group">
                            <input type="text" class="form-control input-lg" placeholder="Search player" name="player">
                            <span class="input-group-btn">
                                <button class="btn btn-primary btn-lg" type="submit">Search</button>
                            </span>
                        </div><br>
                        <div class="btn-group">
                            <button name="region" type="button" class="btn btn-primary" value="NA" autofocus="true">NA</button>
                            <button name="region" type="button" class="btn btn-primary" value="EUW">EUW</button>
                            <button name="region" type="button" class="btn btn-primary" value="EUNE">EUNE</button>
                            <button name="region" type="button" class="btn btn-primary" value="BR">BR</button>
                            <button name="region" type="button" class="btn btn-primary" value="TR">TR</button>
                            <button name="region" type="button" class="btn btn-primary" value="RU">RU</button>
                            <button name="region" type="button" class="btn btn-primary" value="LAN">LAN</button>
                        </div>
                    </form>

Im using the button group, because it looks better then a dropdwon menue or just checkboxes.

I tried to send the btn-group value by the _get methode but it does not work. So how can in submit the value with my _get methode to my PHP file?

Thank you for helping

score 5 · Accepted Answer · answered Jan 13 '16 at 00:13

I found a solution

                            <div class="btn-group" data-toggle="buttons">
                            <label class="btn btn-primary">
                                <input type="radio" id="NA" name="region" value="NA" autofocus="true"/> NA
                            </label>
                            <label class="btn btn-primary">
                                <input type="radio" id="EUW" name="region" value="EUW" /> EUW
                            </label>
                            <label class="btn btn-primary">
                                <input type="radio" id="EUNE" name="region" value="EUNE" /> EUNE
                            </label>
                            <label class="btn btn-primary">
                                <input type="radio" id="BR" name="region" value="BR" /> BR
                            </label>
                            <label class="btn btn-primary">
                                <input type="radio" id="TR" name="region" value="TR" /> TR
                            </label>
                            <label class="btn btn-primary">
                                <input type="radio" id="RU" name="region" value="RU" /> RU
                            </label>
                            <label class="btn btn-primary">
                                <input type="radio" id="LAN" name="region" value="LAN" /> LAN
                            </label>
                            <label class="btn btn-primary">
                                <input type="radio" id="LAS" name="region" value="LAS" /> LAS
                            </label>
                            <label class="btn btn-primary">
                                <input type="radio" id="OCE" name="region" value="OCE" /> OCE
                            </label>
                        </div>

For a true radio effect, the `id` and `name` values should both be `region`. (Otherwise, you're populating a bunch of extra GET/POST keys - one for each region.) But good solution. — Kristen Waite, Mar 06 '17 at 15:20

score 0 · Answer 2 · edited May 23 '17 at 12:25

These buttons inside 'btn-group' div, aren't doing anything useful, apart from just displaying some buttons on the screen. They are not aware of any 'selected' property (in order for the selected value to be submitted).

Buttons are not meant to act like radio buttons, checkboxes etc. Their purpose is to perform an action when they are clicked.

So what i recomend is to forget about button group and just add checkboxes. If you are concerned about the styling, just add this very useful library (http://icheck.fronteed.com/). I think line skin will be great for you.

If you really want these buttons, you should write some js code (preferably jquery) and on the click event, store the selected value(s) in a hidden input that will get submitted. See here: Change a hidden input's value with jquery/javascript

Send Bootstrap Button-Group value in a form with Get or Post

2 Answers2

Linked