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

    if ($("select[title='Column1']").val() == "Value1") 

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

Can someone point what I am doing wrong?

  • why is there a break tag inside the JQuery script?
    – Keerthi
    Commented Jul 9, 2015 at 13:34
  • @Keerthi : Break tag was added here only as i was not able to present the code better.But your modification rendered it correctly
    – George
    Commented Jul 9, 2015 at 13:40

3 Answers 3


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
$( document ).ready(function() {
if($("#Status").text()=="In Progress")
else if($("#Status").text()=="Completed")
  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.
  • Although you've already done what was needed, have a look at the SPUtility.js. It's designed for this kind of cases.
    – moe
    Commented Jul 16, 2015 at 10:21

Try wrapping your code inside ExecuteOrDelayUntilScriptLoaded like:

function init(){
if ($("select[title='Column1']").val() == "Value1") 
  • :I have the below code and it didn't work: jQuery(document).ready(function($) { ExecuteOrDelayUntilScriptLoaded(init,'sp.js'); function init() { if ($("select[title='Column1']").val() == "Value1") { $('nobr:contains("Column2")').closest('tr').hide(); } } });
    – George
    Commented Jul 9, 2015 at 15:01
  • Take the jQuery(document).ready(function($) { out of your code. Just add the code from my answer
    – Keerthi
    Commented Jul 9, 2015 at 15:11
  • It still didn't work after removing jQuery(document).ready(function($) {
    – George
    Commented Jul 9, 2015 at 15:17

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


 <td width="350" class="ms-formbody" id="SPFieldText" valign="top">
  <!-- FieldName="Column1"

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;

or using the field name

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.