I am using YUI3 and Internet Explorer 8 and Firefox. I am trying to determine when a radio button has changed selection.
My HTML:
<div id="test">
<input name="test1" value="a" type="radio">
<input name="test1" value="b" type="radio">
<input name="test1" value="c" type="radio">
</div>
My JavaScript:
YUI().use('event', 'node', function (Y) {
Y.one('input[name=test1]').on('change', function (e) {
alert('changed');
});
});
This doesn't work because the page loads nothing is selected in the radio button group. When I select the first item nothing happens, no alert pops up. When I click the second button then it pops up. How do I determine when a radio button selection has changed?
Also how do I get the value of the selected radio button, I think there are IE issues? This bombs out:
var value = Y.one('input[name=test1]:checked').get('value');
alert(value);
And this bring back nothing:
var value = Y.all('input[name=test1]:checked').get('value');
alert(value);
You can use event delegation to listen to the "click" event. If you don't know what event delegation is, check out this short intro. The change event has issues in older browsers so stick to the click event. All you need to do is get the parent element with Y.one and set up a delegation listener:
YUI().use('node', function (Y) {
Y.one('#test').delegate('click', function (e) {
alert(e.target.get('value'));
}, 'input[type=radio]');
});
Related
For <input> wrapped in a <label> tag (e.g., <label> <input type="checkbox"> Some Text </label>), click events on <label> tag are also received by the <input> tag.
However Firefox will not pass the click event to <input> if shift key was also pressed while clicking on the <label> (other browsers work fine). As answered in this SO answer, this is a Firefox specific behaviour.
Is there a way to turn this off (or override) in Firefox, so that shift+click events are received by <input> when a shift+click happens on <label>?
Since firefox prevent this you will need to create this behavior yourself.
Here is a quick example (note that you might need to add/change things due to the shift key:
function show(event){
el = event.srcElement||event.target;
if (el.nodeName == "LABEL") {
event.preventDefault();
ev = new Event('click');
document.getElementById(el.getAttribute('for')).dispatchEvent(ev);
} else {
el.checked = !el.checked;
alert((el).id);
}
}
document.getElementById('checkbox').addEventListener('click', show, false);
document.getElementById('label').addEventListener('click', show, false);
<input type="checkbox" id="checkbox"/>
<label for="checkbox" id="label">Click me!</label>
The problem I am having is that the radio buttons in my scenario are not being selected when they are clicked. I have created a JSFiddle to show the code and the issue.
For whatever reason, I have an entire area that is surrounded in an element.
<a href="/link">
//some stuff
<div class="protected">
<input type="radio" name="b1" value="1" /> Button 1
<input type="radio" name="b1" value="2" /> Button 2
</div>
//some stuff
</a>
There is a small section within this tag that needs to be protected from the default behaviour of the link. This section contains some radio inputs which need to be selectable.
The way I currently have it, I am protecting the "protected" section with an event listener and:
$('.protected').off('click').on('click', function (e) {
e.preventDefault();
});
I also have an event listener on the radio buttons so that I can perform the change of property when they are clicked.
$('.protected > :radio').off('click').on('click', function (e) {
$(this).siblings(':radio').removeAttr('checked');
$(this).attr('checked', 'checked');
});
Unfortunately, this is setting the checked attribute in the dom however the radio button is not being filled in on the screen for the user.
Any help would be greatly appreciated.
You need to add stopPropagation()
$('.protected > :radio').off('click').on('click', function (e) {
e.stopPropagation();
//$(this).siblings(':radio').removeAttr('checked');
//$(this).attr('checked', 'checked');
});
Also, make sure to comment out
$(this).siblings(':radio').removeAttr('checked');
$(this).attr('checked', 'checked');
You don't need them as the browser handles this for you.
DEMO
What was happening is, since you had preventDefault in the container click handler, the nested click event was propagating to that click handler and was preventing the radio button from being set.
I have page with around 20 to 30 controls based on the query string values. I need to change a button as disabled based on the value changes in the controls. For examble in the list of Check boxes if something is checked or unchecked, some texts added or removed etc... for all the controls.
The controls are textbox, option buttons, check boxes, select controls and list boxes.
I don't want to add static methods to all controls. I do have an idea of doing the late binding to all the controls and to attach events. And that events will disable the button whenever the event gets fired.
Is there any other way to do this functionality in a simple way(Like Keypress or using event property window object)?
As #ekhaled pointed out you can use the same handler to handle all the click and change events.
Here's a somewhat convoluted example:
<div id="container">
<input id="input1" type="text" value="" />
<select>
<option value="1">ABC</option>
<option value="2">EFG</option>
</select>
<input type="button" value="Submit" />
</div>
and the javascript for it:
$('#container').on("change click", ":input", function (event) {
if (event.target.nodeName == "SELECT") {
if ($(event.target).val() == "2") {
console.log("disable");
$(":button").prop("disabled", true);
} else {
$(":button").prop("disabled", false);
console.log("enable");
}
}
if (event.target.id == "input1" && $(event.target).val() == "") {
$(":button").prop("disabled", true);
}
});
See it working here.
However if you main concern is validation you should have a look at jquery validation
With jQuery validation you can set specific rules for each of the inputs that will make up the validation of the whole form. It is very customizable, you can change where and how the errors are displayed, when is the validation triggered, etc.
You can use event delegation and bind your event to the parent element, and then write all your logic inside that one event handler.
Can't really show you much, because you haven't included any examples or code. But something along the lines of:
$("body").on('change click', 'input, select', function(){
var _this = $(this);
if(_this.is('input[type=checkbox].className')){
//follow one logic
}
if(_this.is('input[type=radio].className')){
//follow another logic
}
//etc, etc
})
I have a page which contains input fields of type radio and checkbox. I want to be able to trigger an event when the user presses a key whilst one of these input fields are focused.
My code is:
<li class="duplicatable">
<input type="radio" name="a" value="v" />
</li>
And in document load I apply the event handling:
$('.duplicatable').keypress(function(event) {
console.log('pressed: ' + event);
});
I have also tried:
$(document).on('keypress', '.duplicatable', function(event) {
console.log('pressed: ' + event);
});
I have also tried:
$('.duplicatable > li') etc...
I have tested the click event which does work in Chrome and Firefox, but when this is a key event, Firework works, but Chrome does nothing.
Is Chrome not handling key events at all on radio and check boxes (or, rather li elements)?
Have you tried bind the event directly on the input:
$('.duplicate input:checked').click(/*...*/)
I have a very strange issue with jQuery where I am triggering a click on a radio button but it is not firing completely and is not being captured by an on click function, however a similar call to jQuery trigger is being captured.
In the following jQuery I am selecting a <div> and using find to search for the suitable content.
var prev_chosen_d_option = $('#d_options_table .d_option_row[data-option-id="' + d_option_for_jq + '"]');
// this works, and the on click is captured
prev_chosen_d_option.find('.hover_target').trigger("click", true);
// this selects the radio button, but DOES NOT fire the on click function seen below
prev_chosen_d_option.find('#d_standard_use_b_as_s_no').trigger("click", true);
These are my radio buttons:
<input type="radio" value="yes" id="d_standard_use_b_as_s_yes" name="d_standard_use_b_as_s">
<input type="radio" value="no" id="d_standard_use_b_as_s_no" name="d_standard_use_b_as_s">
$("#d_options_table .d_option_row .hover_target").on("click", function(e, isFirstLoad) {
// it comes in here fine!
});
$('input[name=d_standard_use_b_as_s], input[name=d_next_day_use_b_as_s], #del_standard_use_b_as_s_no').on("click", function(e, isFirstLoad) {
// it DOESN'T come in here
});
I can't see how jQuery is able to select the radio button and successfully check it, but the on method doesn't pick it up as a click...especially when I have a very similar setup running in close proximity in the code.
I know for sure that the radio buttons are within the selector as I can dump it out to the console with a console.log. Interestingly, when I dump out the events attached to it to the console I get undefined from this after the trigger:
console.log(prev_chosen_d_option.find("#_standard_use_b_as_s_no").data('events'));
(I am using jQuery 1.7.2 and testing in FF).
Instead of
$('input[name=del_standard_use_b_as_s], input[name=del_next_day_use_b_as_s], #del_standard_use_b_as_s_no').on('click', function(e) {
//
});
Try :
$(document).on('click', 'input[name=del_standard_use_b_as_s], input[name=del_next_day_use_b_as_s], #del_standard_use_b_as_s_no', function(e) {
//
});
The reason for this not working was simply I had the click handler below where I was actually triggering the click in the code.