Paul Galvin's (old) SharePoint space [SharePoint

Just another WordPress.com site

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

This is another post in my on-going series on how to use jQuery with SharePoint.
If you want to learn more about jQuery, I highly recommend: jQuery in Action 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:

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:

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.

 

</end>

Subscribe to my blog.

Follow me on Twitter at http://www.twitter.com/pagalvin

Advertisements

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

  1. Unknown June 16, 2009 at 5:29 am

    what about this approach for finding the parent tr? First node in the collection of ancestor nodes that are tr elements, resulting in the closest parent tr..parents("tr:first")

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: