Conditionally Hide/Show Field on Custom Edit Form

Question

After exhausting all resources Google can provide, I've decided it best to toss my question to all of you smart folks, directly.

In my SP 2016 environment, I have a custom Edit form containing a field that should be hidden until certain conditions are met. There are tons of blogs, forum posts, etc. out there on how to hide/show Field A when Field B changes value but that's not exactly what I'm trying to do. Unfortunately, IP or Nintex aren't options for this list.

Here's the rundown:

Field A is a single line of text field that is updated by the workflow (it keeps track of the current step).

Field B is a single line of text that the user will edit and should only be displayed if Field A = "X".

In the code below, I understand where and why it works when Field A changes value.

<script type="text/javascript"> 
$(document).ready(function(){
$("input[title='Field A']").change(function() {
if ($("input[title='Field A']").val() != "X")
{
$('nobr:contains("Field B")').closest('tr').hide();
}
else
{
$('nobr:contains("Field B")').closest('tr').show();
}
});
});
</script>

I've tried the below to get the value of Field A on load but it does't work; Field B is displayed, regardless of the value in Field A.

 $(document).ready(function(){
 if ($("input[title='Field A']").val() != "X")
 {
 $('nobr:contains("Field B")').closest('tr').hide();
 }
 else
 {
 $('nobr:contains("Field B")').closest('tr').show();
 }
 });
 });
 </script>

Any insight is greatly appreciated!

Answer 1

Sometimes what you might find is that document.ready fires before Sharepoint is done populating all the values on the page. For that reason, it's usually better to use ExecuteOrDelayUntilScriptLoaded.

So for you that might look like:

ExecuteOrDelayUntilScriptLoaded(FormSetup,"sp.js");

function FormSetup() {
    if ($("input[title='Field A']").val() != "X") {
        $('nobr:contains("Field B")').closest('tr').hide();
    }
    else {
        $('nobr:contains("Field B")').closest('tr').show();
    }
}