Author - Ishpreet Kaur Post Views - 81 views
jQuery trigger

jQuery trigger(‘change’) does not work for radio buttons

We programmers mostly use
$(selector).on('change', child-selector, function() {});

in our Jquery scripts.
The onchange event works well for all inputs.

In one of my projects, I have a requirement that shows the next form fields based on the current input selected value. For this, I have passed data-attr-parent to all the next fields and they are hidden initially. I need to display/hide the next fields according to the value selected.
To handle this, whenever any change event happens, then initially I made all fields hidden, then display form fields based on the selected value of the current field. Parent field can be of select or radio type inputs.
$(selector).on('change', 'select, input[type="radio"]', function() {
valueSelected = $(this).val();
abc(valueSelected);
});
function abc(valueSelected) {
resetDependentFields(valueSelected);
$('[data-attr-parent="'+valueSelected+'"]').trigger('change');
// script to Show/Hide next fields based on currently selected parent fields value with Ajax call
}

The above example shows that if I made any change on the select or radio button, then initially all child/dependent inputs will be hidden and their value will be reset, which means made 0, blank, and unchecked for radio and checkboxes.
A child input can be any type of textbox, number, date, select, radio button, checkbox, etc. If a child selects or radio button has its further children, and they have values, then they are not getting hidden when I fired a change event on the grand-parent field or grand-grand-parent field. Whenever I change a parent field, then all children and their grand-child should be hidden and their values should be reset. If a parent field has select or radio buttons as child fields, the child fields of these should also execute the Ajax code and reset functions. To handle this:

For this, I have added a line:
$('[data-attr-parent="'+valueSelected+'"]').trigger('change');

so that correct implementation should be done for grand-child fields also. Trigger(‘change’) worked well for select inputs, but not for radio buttons. So, I have added a few lines after the above line to handle the radio button issue:

newRadioStatus = {};
parentId = valueSelected;
$('[data-attr-parent="'+parentId+'"]').each(function() {
if($(this).attr('type') == 'radio') {
if($(this).attr('name') in newRadioStatus == false) {
newRadioStatus[$(this).attr('name')] = {};
}
newRadioStatus[$(this).attr('name')][$(this).attr('value')] = ($(this).is(':checked') ? 1:0);
radioParentId = $(this).attr('name');
radioParentVal = $(this).attr('value');
resetDependentFields(radioParentId);
}
});

That’s the way I handled the radio button on the change trigger.

If you have skills in PHP programming and you want to enhance your career in this field, a PHP Certification from StudySection can help you reach your desired goals. Both beginner level and expert level PHP Certification Exams are offered by StudySection along with other programming certification exams.

Leave a Reply

Your email address will not be published. Required fields are marked *

fiteesports.com rivierarw.com cratosroyalbet betwoon grandpashabet grandpashabet giriş deneme bonusu veren siteler casino siteleri