Hiding fields based on email value AND boolean yes/no field using JavaScript

Question

I have a Microsoft Power Apps Portals page on my portal that requires a bit of customization through JavaScript. I would like to hide fields based on an email address entered, which works fine. However, when the user enters the email domain that will show some fields, I would like to apply additional formatting.

Here is the code I currently have:

$(document).ready(function () { $("#emailaddress1").change(onShowHideEmployeeFields); onShowHideEmployeeFields(); }); function onShowHideEmployeeFields() { var varEmail = $("#emailaddress1").val() //alert(varEmail) if (varEmail.includes("@example.org")) { $('#xxx_employeeid').parent().parent().show(); $('#xxx_employeeid').prop('required', true); $('#xxx_employeeid').closest(".control").prev().addClass("required"); $('#xxx_defaultfacilityid').parent().parent().show(); $('#xxx_defaultfacilityid').prop('required', true); $('#xxx_defaultfacilityid').closest(".control").prev().addClass("required"); $('#xxx_positiontitle').parent().parent().show(); $('#xxx_officer').parent().parent().show(); $('#xxx_officer').prop('required', true); $('#xxx_officer').closest(".control").prev().addClass("required"); $('#xxx_jopositiontitle').parent().parent().show(); } else { $('#xxx_employeeid').parent().parent().hide(); $('#xxx_defaultfacilityid').parent().parent().hide(); $('xxx_defaultfacilityid_label').parent().parent().hide(); $('xxx_positiontitle_label').parent().parent().hide(); $('#xxx_positiontitle').parent().parent().hide(); $('#xxx_officer').parent().parent().hide(); $('#xxx_jopositiontitle').parent().parent().hide(); } }

The code works fine, however, I want to extend the code by showing the JO Position Title IF the Officer field has been marked as 'Yes' (it is a boolean yes/no radio checkbox field).

I've tried testing this component separately using the below code:

function onShowHideEmployeeFields() { $('xxx_officer').change(function () { var varJO = $("$xxx_officer").val(); //alert(varJO) if (varJO === 'Yes') { $('xxx_jopositiontitle').parent().parent().show(); } else { $('xxx_jopositiontitle').parent().parent().hide(); } }) }

This code doesn't seem to do anything. Any thoughts on this issue?

Thank you!

Does this answer your question? How do I check whether a checkbox is checked in jQuery? — Don't Panic
– Don't Panic, Commented Mar 28, 2022 at 22:29
Your code is a very good example of exactly how to create horrible coupling between the HTML and JS. What a nightmare to work with as soon as the HTML changes... Completely unmaintainable. — connexo
– connexo, Commented Mar 28, 2022 at 22:39

Don't Panic · Accepted Answer · 2022-03-28 22:29:33Z

AFAICT your question boils down to how can I check if a checkbox is checked?. The code you tried is on the right track, but that's not how you get a checkbox's state. A quick search turns up many many examples:

$('xxx_officer').change(function () { var varJO = $("$xxx_officer").prop('checked'); if (varJO) { $('xxx_jopositiontitle').parent().parent().show(); } else { $('xxx_jopositiontitle').parent().parent().hide(); } });

There are many, many examples of this here on SO, and I've voted to close this question as a duplicate.

Collectives™ on Stack Overflow

Hiding fields based on email value AND boolean yes/no field using JavaScript

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related