Highlighting a Cell in List Form using jQuery

This small post explains one of the methods of doing this.

There are times when we need to implement some business requirements that warrant us to highlight a few cells in a List / Library form ( NewForm / Edit Form ).



This small post explains one of the methods of doing this.

In the custom new form / edit form, to achieve this,

1. Open the form in SharePoint designer.
2. After the tag “<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">”, place the script tag and refer the “jquery.min.js” file as follows - <script language="javascript" type="text/javascript" src="../../jQuery Scripts/jquery.min.js"></script>
3. In another script tag, start the jQuery ready function as follows:
    

   <script language="javascript" type="text/javascript">

   $(document).ready(function() {
    

4. Inside the ready function, obtain the text box/text area controls in the form using their title attributes and set the “background-color” of their css to the desired color  as follows
    

   $("textarea[title='Updates']").css("background-color", "#FFF380");

   $("textarea[title='Updates - Based on BTG role']").css("background-color", "#FFF380");

   $("textarea[title='Future Plan']").css("background-color", "#FFF380");
    

5. Close the ready function and script tag
   
   });
   </script>
    
6. Save the file and test
    
   In this example, I have a text area to highlight; in case there is a text box, you may have to specify something like
   
   $("input[title='Updates']").css("background-color", "#FFF380");
   
   The screenshot of the changes in the new form using designer is given below for reference.