Hide columns in display form based on a value

Question

I have the below javascript to hide columns in New/Edit form:

jQuery(document).ready(function($)
{
    if ($("select[title='Column1']").val() == "Value1") 
    { 
        $('nobr:contains("Column2")').closest('tr').hide();
    } 
});

But in display form,this script is not working work.

Can someone point what I am doing wrong?

Answer 1

Finally i managed to hide columns(based on the value of another column) in display form by following the below steps:

1. Open SharePoint Designer and create a new display form.
2. Click Home tab(in ribbon) and select "Advanced Mode".
3. In the form,click the field in which you want to check the condition.For eg: Consider the field to be "Status"
4. Now add above the tag,that is we are adding a refernce id named "Status" for the Status field in the form.Add below tag.
5. In the form,now click the field which you want to hide.Consider this column name to be "Column1".Once you click the field(in the form),the code will highlight the table code for the field.
6. Now add id="Column1" within the tag like .We are adding an id named "Column1" to the row which displays the field Column1.
7. Follow Steps 5 and 6 and provide unique ids for all the fields you want to hide.Consider we are hiding another column named "Column2" by providing id="Column2" within the tag
8. Save the SharePoint Designer changes.
9. Now in the SharePoint Designer code,search for "PlaceHolderAdditionalPageHead".
10. Inside the "PlaceHolderAdditionalPageHead" Id,add the below script just above

<script>
$( document ).ready(function() {
if($("#Status").text()=="In Progress")
{
$("#Column1").hide();
}
else if($("#Status").text()=="Completed")
{
$("#Column2").hide();
}
});
</script>

1. In the above script ,"Status","Column1","Column2" are the unique ids we added for each field in Steps 4,6 and 7.
2. "In Progress" and "Completed" are the values in Status column,that is if the value of "Status" is "In Progress",then "Column1" will be hidden. ​If the value of "Status" is​ "Completed",then "Column2" will be hidden.

Answer 2

Try wrapping your code inside ExecuteOrDelayUntilScriptLoaded like:

ExecuteOrDelayUntilScriptLoaded(init,'sp.js');
function init(){
if ($("select[title='Column1']").val() == "Value1") 
    { 
        $('nobr:contains("Column2")').closest('tr').hide();
    } 
}

Answer 3

If you check the source code, you will see that there is no control rendered in the Display Form but only the value.

Ex:

 <td width="350" class="ms-formbody" id="SPFieldText" valign="top">
  <!-- FieldName="Column1"
    FieldInternalName="ProjectNumber"
    FieldType="SPFieldText"
    -->
  value 
 </td>

I have created this script, selecting the comment to retrieve the row.

 jQuery("*").contents().filter(function () {
       //nodeType 8 = comments
     return this.nodeType === 8 && this.nodeValue.indexOf('FieldInternalName="' + fieldName + '"') != -1;
  }).closest("tr").hide();

or using the field name

jQuery("[name=SPBookmark_" + fieldName + "]").closest("tr").hide();