Hide fields on new and edit pages in SharePoint (2007 and 2010) via jQuery

What are you talking about?
When you are automating a certain process or site in SharePoint, sometimes you want to hide some fields. Let me give you an example:
I have a list to keep track of a process, say an RFP.
I can enter a new RFP, but when I create a new one, I don’t know the opening date, closing date or final date. Those fields are filled in via a workflow.
So if I don’t need to fill to them, why show them ? It would be better to hide those fields on my newform.aspx.

So how does this work ?
You add a new Content Editor webpart on your page and insert the script in the html source.
Link the script source to your Jquery script (that you have uploaded somewhere in a document library)
Now just fill in the field titles of the fields you want to hide.

The script

<script src="LINK TO YOUR JQUERY SCRIPT" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function() {
    $('nobr:contains("field1")').closest('tr').hide();
    $('nobr:contains("field2")').closest('tr').hide();
    $('nobr:contains("field3")').closest('tr').hide();
});
</script>

About: Marijn

Marijn Somers (MVP) has over 14 years experience in the SharePoint world, starting out with SP2007. Over the years the focus has grown to Office 365, with a focus on collaboration and document management. He is a business consultant at Balestra and Principal Content Provider for "Mijn 365 Coach" that offers dutch employee video training. His main work tracks are around user adoption, training and coaching and governance. He is also not afraid to dig deeper in the technicalities with PowerShell, adaptive cards or custom formatting in lists and libraries. You can listen to him on the biweekly "Office 365 Distilled" podcast.


6 thoughts on “Hide fields on new and edit pages in SharePoint (2007 and 2010) via jQuery”

  1. You say, "Link the script source to your Jquery script (that you have uploaded somewhere in a document library)" I'm not sure what this means and it's preventing us from being able to implement this tip. Thanks for the great info on your site.

  2. Dear Marjin,

    I can’t get the field to hide. I have applied the following code:

    $(document).ready(function() {
    $(‘nobr:contains(“ProcessedPO”)’).closest(‘tr’).hide();
    });

    and if I check in IE Developer Tools, the following shows:

    Indicating that the table should be hidden, and that the jQuery have run.

    What is wrong? 🙂

    1. Check if your code gets loaded after the webpart is loaded.(by putting the code in a webpart after the webpart with the fields).
      Also: are you on a new or edit page ?
      Is the field name correct ? (check in the source of the page if there actually is a nobr with the “ProcessendPO” text in it.)

  3. hi Marjin
    How can we add a condition to this script. Onlt hide hide fields when a value of another field is equal to some specific value
    Thanks in advance

    1. Hi Julia,

      You can add a condition is not hard, but has some quirks: the solution is different depending on the fieldtype (text, choice, yes/no, …) that you want to check on.
      Say you have a textfield called “Total Cost” and you only want to show a field when the value is “100” then the code would be something like this:

      $(document).ready(function() {
      var txtcost = $(‘h3:contains(“Total Cost”)’).closest(‘td’).next(‘td’).text();
      if(txtcost == “100”){
      $(‘nobr:contains(“field1”)’).closest(‘tr’).hide();
      }
      }

      You can get more info on this blogpost here: http://www.balestra.be/2011/09/get-the-field-value-from-dispform-aspx-in-sharepoint-via-jquery.html

Leave a Reply

%d bloggers like this: