How to hide a field in SharePoint Display Form based on the field name (jQuery)?

Question

I have a SharePoint list with the following single line of text fields: Title, Year and Type or Location. I want to be able to hide the Type or Location table row in the default display form. I know that I should create a JavaScript script and put it in Content Editor web part inside DispForm.aspx.

I am not fluent with jQuery syntax, thus I need help with the code, i.e. I don't know how to reference the table row which contains Type or Location field and its value. Here's what I've done so far, but it doesn't work:

jQuery(document).ready(function($) {
   $("input[title='Type or Location']").closest("tr").hide();
});

I know that the "input[title='Type or Location']" part is incorrect; at least I think it's that. Could anyone help me out? Thank you.

Solution 1

Try:

jQuery(document).ready(function($) {
   $("h3.ms-standardheader:contains('Type or Location')").closest("tr").hide();
});

Solution 2

I am not sure why you want to use jQuery for that. In SharePoint, you can choose to make a field required, optional or hidden. In most cases, just switching to hidden will address your issue.

For the record, I would also try to avoid as much as possible the use of jQuery(document).ready, it might conflict with the SharePoint out of the box onload event. In your case it is not needed.

Update: here is a way to do this with jQuery:

$("td.ms-formlabel:contains('Type or Location')").parent().hide();

Comments

[Boris]

I am not sure if I was clear enough, Type or Location is just a title of one list field (or list column if it makes more sense to you). The problem is that it simply can't find the closest <tr> tag and then hide it.

[Jignesh Rajput]

have you try pravAll for find <tr>. you can get all tr collection and get :first of tr?

[Chris Gessler]

Since you're wanting to hide these elements immediately after the page loads, why not just set the style="display:none;" either server-side or with a stylesheet?

[Boris]

@ChrisGessler It is a requirement to use a jQuery, unfortunately.

[Chris Gessler]

@Boris - I believe jQuery is not finding the closest TR is because it can't find the INPUT. You need to implement multiple selectors: api.jquery.com/multiple-selector

[Boris]

The reason I want to use jQuery instead of simply hiding a field is because I just don't want it visible in the DispForm.aspx, but I do want it available to the user through Edit and Add New forms.

[LabGecko]

Christophe has a point. Setting ShowInDisplayForm to false will also hide the field on the display form, while still making it available in other forms and views. And while jQuery can do this as well, where jQuery really shines is that it can be used to conditionally hide a field based on other criteria (values of other fields in the list item, current user, etc) without requiring the creation of a custom field type.

[Christophe]

@Boris ok, got it. I have added a code sample. My second comment remains valid, you should not need jQuery(document).ready.

[Martijn Pieters]

Welcome to Stack Overflow! This is really a comment, not an answer. With a bit more rep, you will be able to post comments.

[Boris]

@AR Ebhendra Pagoti, thanks for the suggestion. It is definitely one way to go, but I actually have a restriction by the business which allows only scripting.

[Axiom]

this worked perfectly to hide the entire row (label plus field). thanks Rich

[Rebeka]

trying to use the above example to hide a field on my new and edit form. Where exactly do I insert the code? I have sharepoint designer 2010

[Christophe]

@Rebeka The most straightforward is to add a Content Editor Web Part to the page, below the form, and copy the script there. Note that you need to load jQuery first, so there's more to it than just a line of code. Some googling should allow you to find a tutorial.

[Rebeka]

where do I put the code? I'm trying to hide a field in a new form