jquery serialize not picking up active bootstrap buttons

Question

I have the following code which is set on page load

<div class="btn-group" data-toggle="buttons">
                                        <label class="btn btn-default active" for="hrb">
                                            <input type="radio" id="hrb" name="period" value="hourly" /> Hourly
                                        </label> 
                                        <label class="btn btn-default" for="drb">
                                            <input type="radio" id="drb" name="period" value="daily" /> Daily
                                        </label> 
                                        <label class="btn btn-default" for="wrb">
                                            <input type="radio" id="wrb" name="period" value="weekly" /> Weekly
                                        </label> 
                                        <label class="btn btn-default" for="mrb">
                                            <input type="radio" id="mrb" name="period" value="monthly" /> Monthly
                                        </label> 
                                    </div>

If I use jquery serialize to get the selected values it returns nothing

$(document).ready(function () {
    var input = $(".btn-group").find('input');
    console.log(input);

    var data = input.serialize() ; //$( "form" ).serialize();
    console.log(data);
});

I managed to do the following, unless someone has a better way of doing it?

var group_period = 'period=';
            $('#group_period .active').each(function(){
                group_period += $(this).attr('data-value'); 
            }); 
    var requiredrole = "requiredrole=" + $("requiredrole").val();

    var data = requiredrole + "&" + group_period + "&" + $( "form" ).serialize();

Answer 1

your example is not working just because you don't have active element on page load, using checked="checked" you set a default selected element so your script will work

$(document).ready(function() {
  var input = $(".btn-group input");
  var data = $('input').serialize(); //$( "form" ).serialize();
  $('#result').html(data);
  
  $('.go').click(function(e){
    e.preventDefault();
    var data = $('input').serialize(); //$( "form" ).serialize();
    $('#result').html(data);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-default active" for="hrb">
    <input type="radio" checked="checked" id="hrb" name="period" value="hourly" /> Hourly
  </label>
  <label class="btn btn-default" for="drb">
    <input type="radio" id="drb" name="period" value="daily" /> Daily
  </label>
  <label class="btn btn-default" for="wrb">
    <input type="radio" id="wrb" name="period" value="weekly" /> Weekly
  </label>
  <label class="btn btn-default" for="mrb">
    <input type="radio" id="mrb" name="period" value="monthly" /> Monthly
  </label>
  <button class="go">
  SERIALIZE
  </button>
</div>
<div id="result">
</div>

Answer 2

Use name field value as an array like period[] instead of period.

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-default active" for="hrb">
        <input type="radio" id="hrb" name="period[]" value="hourly" /> Hourly
    </label> 
    <label class="btn btn-default" for="drb">
        <input type="radio" id="drb" name="period[]" value="daily" /> Daily
    </label> 
    <label class="btn btn-default" for="wrb">
        <input type="radio" id="wrb" name="period[]" value="weekly" /> Weekly
    </label> 
    <label class="btn btn-default" for="mrb">
        <input type="radio" id="mrb" name="period[]" value="monthly" /> Monthly
    </label> 
</div>

Answer 3

Your script seems to be working except could it be that you're trying to receive the serialized value whenever the form updates even though the input.serialize() is only fired once at the start?

Try binding:

var data = input.serialize() ; //$( "form" ).serialize();
console.log(data);

to an event such as .change() or perhaps .click() bound directly to the button elements. .change(), .click()

---

For reference, I tried your code with a manual updater:

$('.btn_test').click(function(){
    var data = input.serialize() ; //$( "form" ).serialize();
    console.log(data);
});

and put this directly below the button group:

<button class="btn_test">Click</button

Obviously this is not what you want, but proves that your input serialization works just fine. (Output was period=weekly in the console log upon clicking btn_test)

Edit: Damn, @Vanojx1 beat me to it.