How to make Semantic UI button group selectable

Question

How do I make the Semantic UI Button Group selectable so that I can get the one that's selected in PHP?

Here is the button group:

<div class="huge ui buttons">
  <div class="ui button">One</div>
  <div class="ui button">Two</div>
  <div class="ui button">Three</div>
</div>

I would assume we are to treat the buttons like radio buttons where only one can be selected but Semantic UI doesn't really have any documentation on how to do the same with button groups.

How would I make the buttons selectable so I can send it to my PHP script?

EDIT:

Here is a jsFiddle showing how my button groups at the moment after trying to implement the toggle as shown here

score 2 · Accepted Answer · edited May 23 '17 at 12:20

2

Whenever a button is pressed Semantic UI gives that button a class name called active.

To select from your group you could do:

var selected = document.querySelector(".huge.ui.buttons").querySelector(".active");

This will select the UI group with the first part and returns the selected element with the second part. You can perform actions on the selected element like selected.textContent. This will return the display text of the element.

Since you've tagged jQuery, I will provide a jQuery example too:

var selected = $(".huge.ui.buttons").find(".active");

NOTE: Please not that you will likely create multiple groups with the same class names (huge ui buttons). You will need to discriminate between them. Either use document.querySelectorAll and select the proper element using its index or give every group a unique ID so you can access the group with document.getElementById.

NOTE 2: Semantic isn't documenting this, but they use additional code on their page to set the button to active. You can find it here. How to toggle content in Semantic UI buttons?. I modified it to work with your Fiddle. http://jsfiddle.net/cgz7sv4g/2/

Addon to Semantic UI:

semantic = {};
// ready event
semantic.ready = function() {

  // selector cache
  var
    $buttons = $('.ui.buttons .button'),
    $toggle  = $('.main .ui.toggle.button'),
    $button  = $('.ui.button').not($buttons).not($toggle),
    // alias
    handler = {

      activate: function() {
        $(this)
          .addClass('active')
          .siblings()
          .removeClass('active')
        ;
      }

    }
  ;

  $buttons
    .on('click', handler.activate)
  ;


// attach ready event
$(document)
  .ready(semantic.ready)
;

This block of code will extend your Semantic Buttons with a handler that adds the class active to currently clicked element and removes it from other elements in the group. You can extend Semantic UI's elements with this code. using basic jQuery, since Semantic UI is a platform build upon jQuery.

EDIT:

To send the content of the div in through a form request

needed a hidden input

Javascript

 var selected = $(".huge.ui.buttons").find(".active").text();
 $("#div_content").val(selected);

edited May 23 '17 at 12:20

Community

1
1

answered Mar 01 '15 at 14:22

Mouser

13,132
3
28
54

The problem is that Semantic UI is not giving the button an active class when I select something. Am I missing a piece of JavaScript that actually makes a button active? – user3574492 Mar 01 '15 at 14:32
@user3574492 does the appearance of the button change, like in the example page you've mentioned? – Mouser Mar 01 '15 at 14:33
No, it only has an onmousedown state, when I select a button the appearance doesn't change. – user3574492 Mar 01 '15 at 14:35
I have tried to implement the piece of code from the link and it does nothing Here is a jsFiddle http://jsfiddle.net/cgz7sv4g/ – user3574492 Mar 01 '15 at 15:27
@user3574492, the updated Fiddle (as well as the code in the post) should solve your problem. – Mouser Mar 02 '15 at 14:41
The fiddle still doesn't work, the buttons are not being selected. – user3574492 Mar 02 '15 at 15:08
Ah I see now it works, so how do I now check if one of the buttons is selected through PHP, for radio buttons I normally use `if(isset($_POST[''])...` – user3574492 Mar 02 '15 at 15:13
@user3574492 A post can work. Do you use ajax or forms? – Mouser Mar 02 '15 at 15:14
Currently using forms – user3574492 Mar 02 '15 at 15:16
@user3574492 use a hidden input in which you save the variable from the div. – Mouser Mar 02 '15 at 15:20
So I can't actually use POST to get the direct value because it's technically not an input right? – user3574492 Mar 02 '15 at 15:44
@user3574492, no you can't because forms only submit form elements, so you need to put a intermediary between it, ergo `` – Mouser Mar 02 '15 at 15:46
What do I actually put in the `value=""`? – user3574492 Mar 02 '15 at 22:48
@user3574492, the text value of the div (anything you want). – Mouser Mar 03 '15 at 02:16
But I have to get the value of the selected button in JavaScript right? e.g. `selected.textContent`? and then insert that into the div – user3574492 Mar 03 '15 at 12:37
@user3574492 I have edit my question, that should suffice for the thing you need (Answer in jQuery). – Mouser Mar 03 '15 at 14:49

How to make Semantic UI button group selectable

1 Answers1