How should I reorganize my control flow for query based on radio input selected?

Question

I've been listening to the click event of label elements, but the selected input[type="radio"] does not seem to update during the event. Should I be listening to a different event or do I need to change my control flow somehow? Below is the code:

$(function() {
  $('#reported label').click(function() {
    var query = $('input[name="filter"]:checked').val();
    var time = (new Date()).toString();

    // this is filler but I'm actually making an xhr request here
    $('.query[data-method="click"]').html(query + ' at ' + time);
  });

  $('#reported input[name="filter"]').on('change', function() {
    var query = $('input[name="filter"]:checked').val();
    var time = (new Date()).toString();

    // this is filler but I'm actually making an xhr request here
    $('.query[data-method="change"]').html(query + ' at ' + time);
  });
});

input[name="filter"] {
  display: none;
}
#reported label {
  background-color: #ccc;
  padding: 5px;
  margin: 5px;
  border-radius: 5px;
  cursor: pointer;
}
.query {
  padding: 5px;
  margin: 5px;
}
.query:before {
  content: "on " attr(data-method) " event: ";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="reported">
  <input type="radio" name="filter" id="question" value="questions" checked="checked">
  <label for="question">Questions</label>

  <input type="radio" name="filter" id="answer" value="answers">
  <label for="answer">Answers</label>

  <input type="radio" name="filter" id="comment" value="comments">
  <label for="comment">Comments</label>

  <input type="radio" name="filter" id="user" value="users">
  <label for="user">Users</label>

  <input type="radio" name="filter" id="company" value="companies">
  <label for="company">Companies</label>

  <div class="query" data-method="click"></div>
  <div class="query" data-method="change"></div>
</form>

Edit

Right now, the query reflects the previously selected input rather than the currently selected one.

My expected behavior is for the query to reflect the input that was just selected, and for the function to be called every time a label is clicked.

Second Edit

I added in @Tushar's suggestion. I don't want this because it does not update the timestamp when the same label is clicked multiple times.

@Tushar `label`s don't have `change` events. The click is registering on the `label`, not the `input`. — Patrick Roberts, Jan 15 '16 at 16:37
@Tushar okay now I get what you're saying. But that doesn't work, because `change` does not get called when you click the same `label` twice. — Patrick Roberts, Jan 15 '16 at 16:39
What is expected behaviour? EDIT: ok, my bad, i see what you mean. But then what's wrong with using change event of radio button instead? Because anyway clicking on label for already checked radio shouldn't be an issue, is it? — A. Wolff, Jan 15 '16 at 16:39
@PatrickRoberts As the name suggests `change` is called when the checked status of the radio button changes, when you click on checked radio, it's not unchecked. So, change event will not fired. — Tushar, Jan 15 '16 at 16:43
@Tushar yes I understand, but as my question states, what's actually happening is that I'm calling an `xhr` request, so I want the query to be refreshed even when you click the same `label` twice. — Patrick Roberts, Jan 15 '16 at 16:44

score 0 · Accepted Answer · answered Jan 15 '16 at 17:11

I ended up using this to get the label, then used its for attribute to get the input element I needed:

$(function() {
  $('#reported label').click(function() {
    var query = $('input[name="filter"]:checked').val();
    var time = (new Date()).toString();

    // this is filler but I'm actually making an xhr request here
    $('.query[data-method="click event"]').html(query + ' at ' + time);
  });

  $('#reported input[name="filter"]').on('change', function() {
    var query = $('input[name="filter"]:checked').val();
    var time = (new Date()).toString();

    // this is filler but I'm actually making an xhr request here
    $('.query[data-method="change event"]').html(query + ' at ' + time);
  });
  
  $('#reported label').click(function() {
    var query = $('#' + $(this).attr('for')).val();
    var time = (new Date()).toString();

    // this is filler but I'm actually making an xhr request here
    $('.query[data-method="click event with this"]').html(query + ' at ' + time);
  });
});

input[name="filter"] {
  display: none;
}
#reported label {
  background-color: #ccc;
  padding: 5px;
  margin: 5px;
  border-radius: 5px;
  cursor: pointer;
}
.query {
  padding: 5px;
  margin: 5px;
}
.query:before {
  content: "on " attr(data-method) ": ";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="reported">
  <input type="radio" name="filter" id="question" value="questions" checked="checked">
  <label for="question">Questions</label>

  <input type="radio" name="filter" id="answer" value="answers">
  <label for="answer">Answers</label>

  <input type="radio" name="filter" id="comment" value="comments">
  <label for="comment">Comments</label>

  <input type="radio" name="filter" id="user" value="users">
  <label for="user">Users</label>

  <input type="radio" name="filter" id="company" value="companies">
  <label for="company">Companies</label>

  <div class="query" data-method="click event"></div>
  <div class="query" data-method="change event"></div>
  <div class="query" data-method="click event with this"></div>
</form>

How should I reorganize my control flow for query based on radio input selected?

1 Answers1

Linked