Highlighting a Cell in List Form using jQuery

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.