Script to select checkbox based on dropdown does not trigger checkbox rule

[roattw]

Have a script that checks a check box if a specifc dropdown item is chosen (thanks Futurist!).  If "Role" = "Resident" then an Alumni checkbox gets checked.  With that, I also have a rule that says if Alumni box checked, show a field called Graduation Year.

<script type="text/javascript">
document.addEventListener('DataPageReady', function (event) {
    const selectElement = document.querySelector('#InsertRecordRole');

selectElement.addEventListener('change', (event) => {
if(selectElement.value == "Resident"){
document.querySelector("#InsertRecordAlumni").checked = true;
}else{
document.querySelector("#InsertRecordAlumni").checked = false;
}
});

});
</script>

The script does check then Alumni box when Resident chosen from dropdown.  However, whesn the "script" selects the alumni checkbox it does not trigger the rule to show Graduation Year field.  But if I manually uncheck the then recheck the alumni checkbox it does invoke rule to show graduation Year field.  

Remove the script, the rule works again.

It seems like a script-applied checkbox is not seen by the RFules code as an event.  Only a mnaully checked field can invoke the rule.

Script checks the box (no grad year rule triggered):

Manually check the box (rule triggered):

 

Thanks everyone!

[roattw]

Bump?  ;^)

[Wikiwi]

Instead of combining the the standard feature Rules and your script that is causing an issue. why not do all the logic within the script?

 

<script type="text/javascript">
document.addEventListener('DataPageReady', function (event) {
    const selectElement = document.querySelector('#InsertRecordRole');
    const Gradyear= document.querySelector('#InsertRecordGraduation_field'); //this is to get your graduation year field.

Gradyear.style.display= "none"; //by default this field is hidden

selectElement.addEventListener('change', (event) => {
if(selectElement.value == "Resident"){
document.querySelector("#InsertRecordAlumni").checked = true;
Gradyear.style.display= "block"; //if dropdown is Resident, alumni checkbox is checked and that also means graduation year should be visible.
}else{
document.querySelector("#InsertRecordAlumni").checked = false;
Gradyear.style.display= "none"; // incase a user changed the selectElement.value to another option
}
});

});
</script>

 

[roattw]

Success!  Thank you so much!

[roattw]

Hoping to put a slightly different slant on this.

If ROLE = Resident OR Faculty then check the Alumni box.

However, only show the Gradyear if Role = Resident.

Know just enough to make the call an array to check the box for Resident or Faculty, but not how to apply the resident/faculty conditionally to ResGradYEar to show:  

if(selectElement.value == "Resident","Faculty")

I guess It could just apply the Rule then, but JS is so much more interesting.

<script type="text/javascript">
document.addEventListener('DataPageReady', function (event) {
    const selectElement = document.querySelector('#InsertRecordRole');
 
selectElement.addEventListener('change', (event) => {
if(selectElement.value == "Resident","Faculty"){
document.querySelector("#InsertRecordAlumni").checked = true;
}
else{
document.querySelector("#InsertRecordAlumni").checked = false;
}
});

});
</script>

Then use Rule to hide Res_grad_year if Role = Resident.

[kpcollier]

Try breaking out the conditions - 

From

if(selectElement.value == "Resident","Faculty")

To

if(selectElement.value == "Resident" || selectElement.value == "Faculty")

JS won't understand the way you wrote it, the conditions need to be explicitly laid out.

|| in this situation means 'or', so it will be running on If selectElement.value = Resident OR if selectElement.value = Faculty.

For reference, && is the Logical AND, || is the Logical OR, and ! is the Logical NOT.