jQuery hiding column based on another column's value

Question

I've successfully used the following script in NewForm.aspx to hide a column 'Date SharePoint checked' when another column 'Check SharePoint?' is set to 'No'.

When I open the same list item in EditForm.aspx or ListForm.aspx I need it to also hide the column. The script works when the Yes/No column is changed, but I need it to work on the existing value when the item is opened. Can the existing script be modified for that? Thanks.

//Show/hide columns based on Drop Down Selection
$(&quot;select[title=&#39;Check SharePoint?&#39;]&quot;).change(function() {
if ($(&quot;select[title=&#39;Check SharePoint?&#39;]&quot;).val() != &quot;Yes&quot;)
{
$(&#39;nobr:contains(&quot;Date SharePoint Checked&quot;)&#39;).closest(&#39;tr&#39;).hide();
}
else
{
$(&#39;nobr:contains(&quot;Date SharePoint Checked&quot;)&#39;).closest(&#39;tr&#39;).show();
}
});

score 0 · Answer 1 · answered Jul 07 '20 at 12:41

Try adding below code on your EditForm.aspx page:

$(document).ready(function() {
    if ($("select[title='Check SharePoint?']").val() != "Yes") {
        $('nobr:contains("Date SharePoint Checked")').closest('tr').hide();
    }
    else {
        $('nobr:contains("Date SharePoint Checked")').closest('tr').show();
    }
});

OR*:

function runAfterPageLoads(){
    if ($("select[title='Check SharePoint?']").val() != "Yes") {
        $('nobr:contains("Date SharePoint Checked")').closest('tr').hide();
    }
    else {
        $('nobr:contains("Date SharePoint Checked")').closest('tr').show();
    }
}
_spBodyOnLoadFunctionNames.push("runAfterPageLoads");

If this doesn't work then try one of the solutions given in my answer in below link:

Run Javascript after page loads

score 0 · Answer 2 · answered Jul 08 '20 at 07:14

Use $(document).ready function to check the column value and hide another column, here is the final modified code snippet for your reference:

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    if ($("select[title='Check SharePoint?']").val() != "Yes") {
        $('nobr:contains("Date SharePoint Checked")').closest('tr').hide();
    }
    else {
        $('nobr:contains("Date SharePoint Checked")').closest('tr').show();
    }
    $(&quot;select[title='Check SharePoint?']&quot;).change(function() {
        if ($(&quot;select[title='Check SharePoint?']&quot;).val() != 'Yes')
        {
        $(&quot;nobr:contains('Date SharePoint Checked')&quot;).closest(&quot;tr&quot;).hide();
        }
        else
        {
        $(&quot;nobr:contains('Date SharePoint Checked')&quot;).closest(&quot;tr&quot;).show();
        }
    });


});
</script>

jQuery hiding column based on another column's value

2 Answers2