.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
 
Sign In
Register
 
Win Surprise Gifts!!!
Congratulations!!!


Top 5 Contributors of the Month
Sharon Maxwell

Home >> Articles >> SharePoint >> Post New Resource Bookmark and Share   

 Subscribe to Articles

SharePoint 2013: Different JQuery Operations On SharePoint List Form-Part 2

Posted By:Sagar Pardeshi       Posted Date: April 05, 2016    Points: 200    Category: SharePoint    URL: http://www.dotnetspark.com  

In this article you will learn about different JQuery operations on SharePoint List Form.
 

Introduction
In this article, I will explain the various operations on new, edit and display form using jQuery viz. Hide a field, make read only, set the value at runtime, etc. And I will also explore SPUtility.js,
People Picker Field
Disable People Picker / Lookup fields in SharePoint list forms (EditForm.aspx).
Before
edit

Steps
Open the list where you want to implement the logic and put the following code inside a script editor web part in the NewForm.aspx (Edit the page, then Add web part and select a script editor web part.

  1. <scriptlanguage="javascript"src="/JSLibrary/jquery-1.9.0.min.js"type="text/javascript"></script>  
  2. <scriptlanguage="javascript"type="text/javascript">  
  3. $(document).ready(function ()   
  4. {  
  5.     var control = $("textarea[title='People Picker']")[0];  
  6.     /* Detect browser*/  
  7.     if (navigator.appName == 'Microsoft Internet Explorer')  
  8.         {  
  9.             control.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.childNodes[1].style.display = "none";  
  10.         }  
  11.         else  
  12.         {  
  13.             control.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.childNodes[2].style.display = "none";  
  14.         }  
  15.         var innerHtml = control.parentNode.parentNode.innerHTML;  
  16.     control.parentNode.style.display = "none";  
  17.     control.parentNode.parentNode.parentNode.parentNode.parentNode.innerHTML = control.parentNode.parentNode.parentNode.parentNode.parentNode.innerHTML + "<span class='fieldsTitle'>" + $('.ms-inputuserfield #content').text() + "</span>";  
  18. });  
  19. </script>  
Result
edit
Adding a title on form:A custom title can be added on the list form on runtime using jQuery.

Before

title
Steps
Open the list where you want to implement the logic and put the following code inside a script editor web part in the NewForm.aspx. Edit the page, Add web part and then select a script editor web part.

  1. <scriptlanguage="javascript" src="/JSLibrary/jquery-1.9.0.min.js" type="text/javascript">  
  2.     </script>  
  3.     <scriptlanguage="javascript" type="text/javascript">  
  4.         $(document).ready(function ()   
  5.        {   
  6.       var table = $('table.ms-formtable'); // Add a row with the ID in table.prepend("  
  7.         <tr>  
  8.             <td class='ms-formlabel'>  
  9.                 <h3 class='ms-standardheader'><strong>Employee Details</strong></h3></td>" + "  
  10.             <td class='ms-formbody'></td>  
  11.         </tr>"); });  
  12.   
  13.      </script>  
Result:

result

 Subscribe to Articles

     

Further Readings:

Responses

No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend