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?"