Jump to content

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


Recommended Posts

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):

role1.png.f227df06a58cf9dbea9c3d83070fc76c.png

Manually check the box (rule triggered):

image.thumb.png.df595c484a3d29f98244ed7eaf56a7b4.png

 

Thanks everyone!

role2.png

Link to comment
Share on other sites

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>

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...