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?](https://stackoverflow.com/questions/901712/how-do-i-check-whether-a-checkbox-is-checked-in-jquery) — Don't Panic, Mar 28 '22 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, Mar 28 '22 at 22:39

score -1 · Answer 1 · answered Mar 28 '22 at 22:29

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.

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

1 Answers1