CODEWITHSUNDEEP
javascriptjquery
bo-oz
bo-oz

Reputation: 2872

What event can I catch on the deselected item in a Bootstrap radio button group

I've got two Bootstrap buttons acting as radio buttons:

What I'd like to do, is change the value of a hidden form field and submit it based on the selection. Unfortunataly I have two hidden form fields for each state. So if visited is selected, I want to set the value of the hidden input with name "q_visited" in the form to true. This works perfectly. Howver, I'd also like to set the other input to false... what is the best way to catch the deselection event? Or is there a simpler solution?

The code:

$(".filter_links input").on('change', function() {
  var checkbox = $("#q_"+this.id)
  checkbox.attr("value", this.checked);
  $("form#search_form").submit()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='btn-group filter_links' data-toggle='buttons'>
  <label class='btn btn-primary'>
    <input id='visited' type='radio'>Visited</input>
  </label>
  <label class='btn btn-primary'>
    <input id='not_visited' type='radio'>Not visited</input>
  </label>
</div>

This currently only updates the field of the button that was clicked upon, but leaves the other value as is.

EDIT:

Ok, so to clarify, the problem is that while the buttons act as a radio group, the hidden form fields can't. This has to do with some backend requirements. The form basically looks like this:

<form>
   <input class="form-control hidden" value="false" type="hidden" name="q[visited]" id="q_visited" />
   <input class="form-control hidden" value="false" type="hidden" name="q[not_visited]" id="q_not_visited" />
</form>

Upvotes: 2

Views: 91

Answers (1)

Roy Scheffers
Roy Scheffers

Reputation: 3908

If I understand your question correctly, you're likely after grouping your radio-buttons. This way only one can be selected. In your case add to both of your inputs name='group-name' like below.

<label class='btn btn-primary'>
  <input id='visited' type='radio' name="radio-btn" value="Visited">Visited<br>
</label>
<label class='btn btn-primary'>
  <input id='not_visited' type='radio' name="radio-btn" value="Not visited">Not visited<br>
</label>

As you'd expect, do the same for your hidden inputs. The code to link the visible to the invisible buttons is pretty similar to what you already have. Changing one will change the other and as both are a group, and only one radio button will be selected. Here's the code that goes with it.

$(document).ready(function() {
  $(".filter_links input").on('change', function() {
    var checkbox = $("#q_"+this.id)
    checkbox.prop("checked", this.checked);
    $("form#search_form").submit();
  })
});

UPDATE
As the hidden inputs cannot have the same name. I would wrap the hidden input group in a div. Then iterate over each child and uncheck it. Then check the one that corresponds to the visible one that was clicked. This should do the job. I've updated the link to the JsFiddle as well.

$(document).ready(function() {
  $(".filter_links input").on('change', function() {
    // get all the imidiate children of the hidden inputs div
    var inputs = $('.hidden-inputs').children()
    inputs.each(function(i) {
        // iterate over them and disable all
        $(inputs[i]).prop('checked', false);
    });
    // select and set check the corresponding hidden input 
    var checkbox = $("#q_"+this.id)
    checkbox.prop("checked", this.checked);
    $("form#search_form").submit();
  })
});

See it in action in this JsFiddle

Upvotes: 2

Related Questions