Issue on Using Bootstrap 3 Radio Group Buttons and Ajax Request

Question

Using Bootstrap 3 and Radio Toggle Button groups as following snippet.Now I am not sure how to get the checked/Selected radio and send it through ajax? I already tried using this way $('#loaditems').click but this is not working.

<div class="btn-group btn-group-sm" data-toggle="buttons" id="loaditems">
    <label class="btn btn-default active">
        <input type="radio" name="all" id="allItems"> All Items
    </label>
    <label class="btn btn-default">
        <input type="radio" name="wom" id="women"> Women
    </label>
    <label class="btn btn-default">
        <input type="radio" name="men" id="men"> Men
    </label>      
</div>  

<script>
    $('#loaditems').click(function(){
        $.post(
            'con/itemsList.php',
            { selType : this.id },
            function(data) {
                $('#selectPicker').html(data);
            }
        );
    });  
</script>

Can you please let me know how to fix this? Thanks

Answer 1

Try this:

$('.btn-default').on('click', function(){
    $.post(
        'con/itemsList.php',
        { selType : $(this).find('input').attr('id') },
        function(data) {
            $('#selectPicker').html(data);
        }
    );
}); 

In case that is not working (but it will 100%), try this one:

$('#loaditems').on('click', function(){
    $.post(
        'con/itemsList.php',
        { selType : $(this).find('label.active').find('input').attr('id') },
        function(data) {
            $('#selectPicker').html(data);
        }
    );
});