1,804 articles and 14,849 comments as of Wednesday, May 18th, 2011

EndUserSharePoint has combined resources with NothingButSharePoint.com. You can now find End User (Mark Miller), Developer (Jeremy Thake) and IT Pro SharePoint content all in one place!

This site is a historical archive and is no longer being updated. Please update your favorites, bookmarks and RSS feeds.

NothingButSharePoint.com
Wednesday, June 17, 2009

Quick and Easy: Use jQuery to Hide a Text Field on a SharePoint Form

This is another post in Paul Galvin’s on-going series on how to use jQuery with SharePoint. If you want to learn more about jQuery, I highly recommend: jQuery in Actionhttp://www.assoc-amazon.com/e/ir?t=httppaulgalvi-20&l=ur2&o=1 by Bear Bibeault and Yehuda Katz.

UPDATE (already!): I did think of a better way to locate the <TR> tag I want to hide and wrote about it here.  You may still find this article interesting anyway so I’m leavnig it up.

I want to hide a text field, “Hide Me!” as shown:

Quick and Easy Hide a Text Field

The following jQuery does the trick for me:

      <script type="text/javascript">
      $(function() {
      $('input[title=Hide Me!]').parent().parent().parent().hide();
      });
      </script>
  

The code is saying, “find me all input fields whose title = Hide Me!.  Then, get its parent and then next parent and the *next* parent (phew!) and invoke the hide() method on that thing, whatever it happens to be.

I figured out that parent structure by viewing the HTML for the form that SharePoint created as shown:

      <TR>
      <TD nowrap="true" valign="top" width="190px" class="ms-formlabel">
      <H3 class="ms-standardheader">
      <nobr>Hide Me!</nobr>
      </H3>
      </TD>
      <TD valign="top" class="ms-formbody" width="400px">
        <!-- FieldName="Hide Me!"
        FieldInternalName="Hide_x0020_Me_x0021_"
        FieldType="SPFieldText"
        -->
        <span dir="none">
        <input
		name="ctl00$m$g_bdb23c2c_fde7_495f_8676_69714a308d8e$ctl00$ctl04$ctl02$ctl00$ctl00$ctl04$ctl00$ctl00$TextField"
		type="text"
        maxlength="255"
        id="ctl00_m_g_bdb23c2c_fde7_495f_8676_69714a308d8e_ctl00_ctl04_ctl02_ctl00_ctl00_ctl04_ctl00_ctl00_TextField"
        title="Hide Me!"
        class="ms-long" />
        <br>
        </span>
        </td>
  </tr>

This picture shows the same, but marked up with the parents:

Quick and Easy Hide a Text Field

The first parent (1) is a span tag.  Span’s parent (2) is a TD tag and then finally we get to the real parent I want to hide (3) which is the TR tag itself.

This is a pretty terrible approach I think because it’s extremely dependent on the very specific structure of this form.  When SharePoint 2010 comes out, this whole structure could change and break this approach.  What I really want to do is craft a jQuery selector that is along the lines of “find me all the TR’s (and only TR tags) that have somewhere in their child elements an input field whose title = Hide Me!”.  I starting from the bottom and moving up.  Assuming I figure this out, I’ll post an updated “quick and easy’ post.

Paul Galvin, MVPPaul Galvin, Microsoft MVP – SharePoint
Web site: Paul Galvin’s SharePoint Space

Paul is a Solutions Architect currently working most closely with Microsoft Office SharePoint Server 2007. He was recently awarded Microsoft MVP – SharePoint status for his work with the SharePoint community.

View all entries in this series: PaulGalvin - Quick and Easy jQuery»
 

Please Join the Discussion

8 Responses to “Quick and Easy: Use jQuery to Hide a Text Field on a SharePoint Form”
  1. Ricky Spears says:

    Paul – I realize that you wrote this to demonstrate the power of JQuery, and you probably already know this, but you can also do this without adding any code too.

    You can also hide a field from users by going to the list settings page and allowing management of content types in the Advanced settings section.

    Then click on the content type for the list. On the content type settings page, click on the name of the column you want to hide in your forms. Then set the field to be “hidden”. It won’t show up for users to enter or edit information then.

  2. Shereen says:

    Hi Ricky,

    Excellent point you made, however, i wanted to mention a scenario where this isn’t enough based on an exact experience with a client today. I enabled content types as you’d specified and hid the columns they requested. However, they have some custom edit forms they’ve built using sharepoint designer that they want those columns visible for. If i hide it within the content type, it hides for all forms, regardless.

    So i needed to use some jquery to only hide it within the new and editforms that the end users use and not affect the custom edit and new forms that they had built for their administrators.

  3. Nancy says:

    I need to hide- specifically- the Content Type field, which appears by default on all editforms for my list with multiple Content Types.

    Since I must allow attachments, I cannot use a custom editform. I have tried various bits of code but nothing works. Help!

  4. Ed M says:

    to fix the attachments problem with custom edit forms, find line <SharePoint:ItemHiddenVersion
    replace ControlMode="New"
    it works fine for me, Sharepoint Designer 12.0.6535.5002

Trackbacks

Check out what others are saying about this post...
  1. [...] on from Paul Galvin’s Post on how to hide a text field, i have added an extra on how to hide a date picker, similar to the [...]

  2. [...] again Paul Galvin’s Post on how to hide a text field definitely inspired to explore jquery and find other functions. Thanks [...]

  3. [...] Previously, I wrote about how to use jQuery to locate and hide a text field on a form.  I didn’t care for the specific approach (I was chaining parents – that’s simply isn’t done these days, at least in families of quality).  [...]




Notify me of comments to this article:


Speak and you will be heard.

We check comments hourly.
If you want a pic to show with your comment, go get a gravatar!