Easily Hide Columns on a SharePoint Form with jQuery

This is a really simple little thing. I end up writing little functions like this all the time, and never think much about them. But they are darn useful.

This little function will hide a list column’s row in the form. You might want to do this on a NewForm but not the EditForm, for instance, so setting the column to be hidden may not be a good answer. With this little function, you can hide the column’s row conditionally or on page load – whatever suits your fancy.

Here’s the function. All you need to pass it is the DisplayName of the column.

// Function to hide a column's row in the form
function hideColumn(c) {
  $(".ms-formlabel h3 nobr").filter(function() {
    var thisText = $.trim($(this).clone().children().remove().end().text());
 //   alert("::" + thisText + "::");
    return thisText.indexOf(c) === 0 && thisText.length === c.length;
  }).closest("tr").hide();
}

Then you might call the function like this:

$(document).ready(function() {
  hideColumn("Priority");
});

This will simply hide the column, but any value in it will still be submitted.

For instance, I just added a column to a list called “User Agent String”, set like so:

$("textarea[title='User Agent String']").val(navigator.userAgent);

and then hid it:

hideColumn("User Agent String");

Put it together and what have you got? (Bonus points to anyone who knows the next line in the song.)

$(document).ready(function() {

  // Set the User Agent String
  $("textarea[title='User Agent String']").val(navigator.userAgent);

  // Hide the columns which aren't relevant to the user
  hideColumn("User Agent String");

});

// Function to hide a column's row in the form
function hideColumn(c) {
  $(".ms-formlabel h3 nobr").filter(function() {
    var thisText = $.trim($(this).clone().children().remove().end().text());
 //   alert("::" + thisText + "::");
    return thisText.indexOf(c) === 0 && thisText.length === c.length;
  }).closest("tr").hide();
}