Asked Jul 12 '17 at 14:05

Active Jul 12 '17 at 14:12

Viewed 667 times

Question

I have this HTML

<div class="btn-group">
     <input type="button" name="meat" class="btn btn-default active" value="Both">
     <input type="button" name="meat" class="btn btn-default" value="Red">
     <input type="button" name="meat" class="btn btn-default" value="White">
     <input type="button" name="meat" class="btn btn-default" value="None">
</div>

This with addition os some css gives this resoult:

I use this code to only allow one active:

 $(".btn-group > .btn").click(function(){
     $(this).siblings().removeClass("active");
     $(this).addClass("active");
 });

But it is just visual, and when I try to input vía php POST (within a form) I don't get nothing.

If i change to type=radio, the PHP works fine, but it is uglier.

¿Any magical idea to make it work keeping it fancy?

The php code for testing is:

<html>
<body>

MegaUltraTest <?php echo ($_POST["meat"]); ?>

</body>
</html>

Thank you.

_"If i change to type=radio, the PHP works fine, but it is uglier."_ So style the radio buttons to work like the buttons you have above. It looks like you're using Bootstrap, so use Bootstrap's styles. — j08691, Jul 12 '17 at 14:10
Use an `` and set it's value within the `onclick` event of your buttons. Its value will be transmitted when you POST the page. — MadMarc, Jul 12 '17 at 14:12
I'm trying with the radio styling, seems to be an easy solution, I feel stupid now XD Thx — Gatoninja, Jul 12 '17 at 14:17

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

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

Source : Send Bootstrap Button-Group value in a form with Get or Post by nkwinder

Thanks, I've been searching for hours :D – Gatoninja Jul 12 '17 at 14:15 — Gatoninja, Jul 12 '17 at 14:15

score 0 · Answer 2 · edited Jul 12 '17 at 14:12

You can check if $_POST['meat'] exists and check if the value is equal to it: Implement it like this:

<div class="btn-group">
     <input type="button" name="meat" class="btn btn-default <?= isset($_POST['meat']) && $_POST['meat'] === 'Both' ? 'active' : ''; ?>" value="Both">
     <input type="button" name="meat" class="btn btn-default" value="Red">
     <input type="button" name="meat" class="btn btn-default" value="White">
     <input type="button" name="meat" class="btn btn-default" value="None">
</div>

Asked Jul 12 '17 at 14:05 Active Jul 12 '17 at 14:12 Viewed 667 times

2 Answers2

Asked Jul 12 '17 at 14:05

Active Jul 12 '17 at 14:12

Viewed 667 times