SharePoint 2013 Different JQuery Operations on SharePoint List Form

sharepoint 2013 list form jquery validation 5.jpg
InfoPath alternatives for form designing SharePoint

In this SharePoint customization tutorial I will explain various operations like hide columns, make sharepoint list column read only, set value to list form at runtime using jQuery in SharePoint 2013. And also we will see how we can do using SPUtility.js

Hide fields SharePoint list form pages

Here we will see different ways to hide fields or hide columns in SharePoint 2013.  There are various ways we can hide sharepoint 2013 list form fields.

Hide columns in sharepoint list form using jQuery:

Now we will see how we can hide form fields using jQuery. In the below list form I want to hide Complete and Manager field.



Before

sharepoint 2013 list form jquery validation.jpg
sharepoint 2013 list form jquery validation.jpg

Step 1: Navigate to your SharePoint 2013 site.

Step 2: From this page select the Site Actions | Edit Page.

Edit the page, go to the “Insert” tab in the ribbon and click the “Web Part” option. In the “Web Parts” picker area, go to the “Media and Content” category, select the “Script Editor” Web Part and press the “Add button”.

Step 3: Once the Web Part is inserted into the page, you will see an “EDIT SNIPPET” link; click it. You can insert the HTML and/or JavaScript as in the following:



<script language=”javascript” src=”/JS/jquery-1.9.0.min.js” type=”text/javascript”></script>
<script language=”javascript” type=”text/javascript”>
$(document).ready(function() {
$(‘nobr:contains(“Complete”)’).closest(‘tr’).hide();
$(‘nobr:contains(“Manager”)’).closest(‘tr’).hide();
});
</script>

hide sharepoint list column using jQuery
hide sharepoint list column using jQuery

Hide columns in sharepoint list form using  SPUtility.js:

SharePoint 2013 using SPUtility.js. SPUtility.js is a powerful js file to work with list or library forms. You can do this by using the SPUtility.js library, As an example I have created a simple list with:

  • Title (simple text).
  • Country (Choice Field) [Tunisia, Switzerland, Canada, France, Other] – Other is the default value.
  • City (Simple text)

By default the City field is hidden if the Country field value is Other.

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.

<scripttype=”text/javascript” src=”http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js”>
</script>
<scriptsrc=”/SiteAssets/Script/sputility.min.js”>
</script>
<script>
// wait for the window to load
$(document).ready(function()
{
// Get a single select dropdown field
var countryField = SPUtility.GetSPField(‘Country’);

// create a function to show or hide City based on Country’s value
var showOrHideField = function()
{
var countryFieldValue = countryField.GetValue();
// Hide the City field if the selected value is Other
if (countryFieldValue === ‘Other’)
{
SPUtility.HideSPField(‘City’);
} else {
SPUtility.ShowSPField(‘City’);
}
};
// run at startup (for edit form)
showOrHideField();
// make sure if the user changes the value we handle it
$(countryField.Dropdown).on(‘change’, showOrHideField);
});
</script>

The result

sharepoint 2013 hide field in newform
sharepoint 2013 hide field in newform

Make column read only in sharepoint 2013 list form:

Now we will see how we can make column read only in SharePoint 2013 list form using jQuery.

SharePoint 2013 Make Text Field read only:

Disabled or read-only to multiple lines of text field and single line text in Edit form in SharePoint list.



Before

hide sharepoint list column using jQuery
hide sharepoint list column using jQuery

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.

<scriptlanguage=”javascript”src=”/JSLibrary/jquery-1.9.0.min.js”type=”text/javascript”></script>
<scriptlanguage=”javascript”type=”text/javascript”>
$(document).ready(function ()

{
ConvertTextboxToLable(‘Title’);
ConvertTextareaToLable(‘Description’);
});

//Convert Multiline Text Area to Lable
function ConvertTextareaToLable(colName)
{
var txtHTML = $(“textarea[Title='” + colName + “‘]”).html();
var tdColumn = $(“textarea[Title='” + colName + “‘]”).closest(‘td’);
var tdColumnHTML = $(tdColumn).html();

$(tdColumn).html(“<div style=’display:none’>'” + tdColumnHTML + “‘</div>”);
$(tdColumn).append(txtHTML);
}

//Convert Single Line Textbox to Lable
function ConvertTextboxToLable(colName)
{
var txtHTML = $(“input[type=text][Title='” + colName + “‘]”).val();
var tdColumn = $(“input[type=text][Title='” + colName +
“‘]”).closest(‘td’);
var tdColumnHTML = $(tdColumn).html();

$(tdColumn).html(“<div style=’display:none’>'” + tdColumnHTML +
“‘</div>”);
$(tdColumn).append(txtHTML);
}
</script>

Result

hide fields sharepoint list form pages using jquery
hide fields sharepoint list form pages using jquery

SharePoint 2013 Make People Picker/Lookup Field read only:

Now we will see how we can disable People Picker / Lookup fields in SharePoint list forms (EditForm.aspx).

Before

sharepoint 2013 conditionally hide form fields
sharepoint 2013 conditionally hide form fields

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.

<scriptlanguage=”javascript”src=”/JSLibrary/jquery-1.9.0.min.js”type=”text/javascript”></script>
<scriptlanguage=”javascript”type=”text/javascript”>
$(document).ready(function ()
{
var control = $(“textarea[title=’People Picker’]”)[0];
/* Detect browser*/
if (navigator.appName == ‘Microsoft Internet Explorer’)
{
control.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.childNodes[1].style.display = “none”;
}
else
{
control.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.childNodes[2].style.display = “none”;
}
var innerHtml = control.parentNode.parentNode.innerHTML;
control.parentNode.style.display = “none”;
control.parentNode.parentNode.parentNode.parentNode.parentNode.innerHTML = control.parentNode.parentNode.parentNode.parentNode.parentNode.innerHTML + “<span class=’fieldsTitle’>” + $(‘.ms-inputuserfield #content’).text() + “</span>”;
});
</script>

Result

make column read only in sharepoint 2013 list
make column read only in sharepoint 2013 list

Add Title in SharePoint List Form using jQuery:

A custom title can be added on the list form on runtime using jQuery.

Before

how to make a column non editable in sharepoint list
how to make a column non editable in sharepoint list

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.

<scriptlanguage=”javascript” src=”/JSLibrary/jquery-1.9.0.min.js” type=”text/javascript”>
</script>
<scriptlanguage=”javascript” type=”text/javascript”>
$(document).ready(function ()
{
var table = $(‘table.ms-formtable’); // Add a row with the ID in table.prepend(”
<tr>
<td class=’ms-formlabel’>
<h3 class=’ms-standardheader’><strong>Employee Details</strong></h3></td>” + ”
<td class=’ms-formbody’></td>
</tr>”); });


</script>

sharepoint 2013 make field read only jquery
sharepoint 2013 make field read only jquery

Hope this article will be helpful.


You May Also like the Following SharePoint Online Tutorials:

About Sagar Pardeshi

I am Developer working on Microsoft Technologies for the past 6+years. I am very much passionate about programming and my core skills are SharePoint, ASP.NET & C#,Jquery,Javascript,REST. I am running this blog to share my experience & learning with the community I am an MCP, MCTS .NET & Sharepoint 2010, MCPD Sharepoint 2010, and MCSD HTML 5,Sharepoint 2013 Core Solutions. I am currently working on Sharepoint 2010, MOSS 2007, Sharepoint 2013,Sharepoint 2013 App Dev, C#, ASP.NET, and SQL Server 2008.

View all posts by Sagar Pardeshi →

Leave a Reply