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.
