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:

image

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:

image

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

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

  1. Jaap Vossers

    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")

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *