Skip to content Skip to sidebar Skip to footer

How Should I Reorganize My Control Flow For Query Based On Radio Input Selected?

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

Solution 1:

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 = (newDate()).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 = (newDate()).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 = (newDate()).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;
}
#reportedlabel {
  background-color: #ccc;
  padding: 5px;
  margin: 5px;
  border-radius: 5px;
  cursor: pointer;
}
.query {
  padding: 5px;
  margin: 5px;
}
.query:before {
  content: "on "attr(data-method) ": ";
}
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><formid="reported"><inputtype="radio"name="filter"id="question"value="questions"checked="checked"><labelfor="question">Questions</label><inputtype="radio"name="filter"id="answer"value="answers"><labelfor="answer">Answers</label><inputtype="radio"name="filter"id="comment"value="comments"><labelfor="comment">Comments</label><inputtype="radio"name="filter"id="user"value="users"><labelfor="user">Users</label><inputtype="radio"name="filter"id="company"value="companies"><labelfor="company">Companies</label><divclass="query"data-method="click event"></div><divclass="query"data-method="change event"></div><divclass="query"data-method="click event with this"></div></form>

Post a Comment for "How Should I Reorganize My Control Flow For Query Based On Radio Input Selected?"