What is the formal way to hide fields from the buit-in New and edit forms using jquery

Question

I am facing some problems in hiding fields from the New and edit forms, if I chose to do so from the Content Type settings and set the column as hidden. As there seems to be some scenarios where these settings will get overridden, such as changing the default value of the hidden field.

So I am now trying to hide columns using jQuery instead, but I am asking what is the best approach to hide columns using jQuery? For example inside my issue tracking's New Form i got a column named "Item number" which I want to hide , so how I can hide it using jQuery ?

The related mark up is :-

<table width="100%" class="ms-formtable" style="margin-top: 8px;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="113" class="ms-formlabel" nowrap="true" valign="top">
<h3 class="ms-standardheader">

<nobr>Item Number</nobr>

</h3></td>


<td width="350" class="ms-formbody" valign="top">

<span dir="none"><input title="Item Number" class="ms-long ms-spellcheck-true" id="_x0049_D1_806a702b-1716-47f5-a93c-16067f502daf_$TextField" type="text" maxlength="255" value=""><br></span>

<span class="ms-metadata">Do not customize at the list level</span>


</td></tr></tbody>

So how I can hide this field? Also I have another form used inside my calendar list and seems there are columns that can not be hidden from the content type such as the All day event check box, so I am thinking of using JavaScript to hide them.

Edit2:-

here is a screenshot when i entered "item number" in the Description field:-

Answer 1

You can hide the fields by:

 $('nobr:contains("Item Number")').closest('tr').hide();

Answer 2

You can try below script which will hide the table

jQuery('input [title="Item Number"]').closest('table').hide();

If you want to hide on input box then use

jQuery('input [title="Item Number"]').hide();

Update

jQuery('input [title="Item Number"]').closest('tr').hide();

Update2

        $('.ms-formtable tr').each(function () { 
            $(this).find('td').each(function () { 
                var str_text = $(this).html(); 
                if (str_text.indexOf('Item Number') > -1) { 
                    $(this).closest('tr').hide(); 
                } 
            }); 
        }); 

Answer 3

If you are using SP 2013, you can use Client Side Rendering to override how the fields are rendered in the new and edit form, and hide them that way.

I have not personally done this (yet), but I know it is a mechanism that is available for customizing forms in 2013.

Here is an article that goes in to CSR for list forms, and here is one that specifically addresses hiding controls.

Because CSR is how SharePoint itself is rendering the forms, and by using this method you are literally overriding the default rendering code, I would say that this is the "formal" way of manipulating forms with Javascript/jQuery.

Answer 4

You can create custom list forms for NewForm.aspx/EditForm.aspx

Check here you can remove the fields which you don't want to display

Only drawback of this implementation is that if you add new column to list you will have to manually add the field to it again or recreate the form