CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
Георги Димитранов
Георги Димитранов

Reputation: 1299

Add Event listener for Click/change on Bootstrap radio buttons

I'm making a shop filter and I need to dynamically get the value of the radio button that has been selected and execute a filter function with the value as a parameter.

my HTML is 

<div class="btn-group-vertical btn-group-toggle pl-2" data-toggle="buttons">
    <label class="btn btn-secondary active">
        <input type="radio" name="option_all" id="option_gender" autocomplete="off" value="All" checked=""> Unisex
    </label>
    <label class="btn btn-secondary">
        <input type="radio" name="option_man" id="option_gender" autocomplete="off" value="Male"> Man
    </label>
    <label class="btn btn-secondary">
        <input type="radio" name="option_woman" id="option_gender" autocomplete="off" value="Female"> Woman
    </label>
</div>

My idea was something like 

$(document).ready(function(){
    $('#option_gender').click(function(){
        filtefFunction(this.value)
    });
});

or an addEventListener('click' func()) to each radio button ... but i dont know how can i do this.

I prefer of the solution is in vanilla js, because I'm trying to advance my sills in it :) thank you

Upvotes: 1

Views: 8532

Answers (5)

oniondomes
oniondomes

Reputation: 2063

What I prefer to do in cases like this is to delegate an event to the parent container:

const select = document.getElementById('gender-selection');

select.addEventListener('click', ({ target }) => { // handler fires on root container click
  if (target.getAttribute('name') === 'option_gender') { // check if user clicks right element
    alert('Filter by: ' + target.value);
  }
});
<div class="btn-group-vertical btn-group-toggle pl-2" id="gender-selection" data-toggle="buttons">
  <label for="option_gender-unisex">Unisex</label>
  <input type="radio" name="option_gender" id="option_gender-unisex" value="All" checked="">

  <label for="option_gender-man">Man</label>
  <input type="radio" name="option_gender" id="option_gender-man" value="Male">

  <label for="option_gender-woman">Woman</label>
  <input type="radio" name="option_gender" id="option_gender-woman" autocomplete="off" value="Female">
</div>

As a sidenote you don't want to use same id's for different elements, on the other hand if you want your radio group allowing to select only one value — use same name attribute. Also autocomplete attribute is redundant for inputs of radio type. It won't do anything.

UPD: removed unnecessary loop from the handler.

Upvotes: 4

Halyna
Halyna

Reputation: 196

//get NOD-object of clicking element
var button = document.getElementById('get_gender');
//method .onclick is prefer becouse not so much load the browser like EventListener
button.onclick = function(e) {
  e.preventDefault();//this line stop send data to server
  console.log('hi');//this is work:) we check it
}
<!--Replase name and id, becouse id is an unique name and proporty 'name' groupe radio-buttons -->
<div class="btn-group-vertical btn-group-toggle pl-2" data-toggle="buttons">
  <label class="btn btn-secondary active">
            <input type="radio" id="option_all" name="option_gender" autocomplete="off" value="All" checked=""> Unisex
          </label>
  <label class="btn btn-secondary">
            <input type="radio" id="option_man" name="option_gender" autocomplete="off" value="Male"> Man
          </label>
  <label class="btn btn-secondary">
            <input type="radio" id="option_woman" name="option_gender" autocomplete="off" value="Female"> Woman
          </label>

  <button id="get_gender">Click</button>
</div>

Upvotes: 1

Tiramonium
Tiramonium

Reputation: 867

Supposing you edit your radios so all of them have the same name, you assign a function to their check event so it only triggers when you change the input value.

$(document).on("check", "[name='option_gender']", function (){
    filterFunction($(this).val());
});

Upvotes: 0

nhaht
nhaht

Reputation: 1227

You can use global variable to save the value of the radio button that has been selected

Try this:

var selectedGender;
function executeFilter(input) {
    // do filter
}
$(document).ready(function(){
    $('input.option_gender').click(function(){
        selectedGender = (this).attr('value'));
        executeFilter(selectedGender);
    });
});

You should give to each input a class name, id just match the first element!

Example:

<label class="btn btn-secondary active">
    <input type="radio" name="option" class="option_gender" autocomplete="off" value="All" checked=""> Unisex
</label>

Upvotes: 1

keja
keja

Reputation: 1363

A few things, your input should have same name to group them together, and not use the same id. i have replaced your id with class.

function getActive(){
	console.log( document.querySelector('.option_gender:checked').value );
}
document.querySelectorAll(".option_gender").forEach( input => input.addEventListener('click', getActive) );
<div class="btn-group-vertical btn-group-toggle pl-2" data-toggle="buttons">
        <label class="btn btn-secondary active">
            <input type="radio" name="option" class="option_gender" autocomplete="off" value="All" checked=""> Unisex
          </label>
        <label class="btn btn-secondary">
            <input type="radio" name="option" class="option_gender" autocomplete="off" value="Male"> Man
          </label>
        <label class="btn btn-secondary">
            <input type="radio" name="option" class="option_gender" autocomplete="off" value="Female"> Woman
          </label>
</div>

Upvotes: 2

Related Questions