Show / Hide fields based on choice field selection using JQuery in SharePoint

In this article, I’ll explain How to show and hide fields based on Choice field selection in New Form, Edit Form and Display Form in SharePoint 2013 / 2010 via Jquery?

Steps :

Create a Custom List.

  • Open the SharePoint Site > Site Settings > Click on Add an app.

Add an app

  • Click on a Custom List.customlist
  • Specify your custom list name > Click on Create.

create custom list

  • The custom list is created successfully.

new custom list added

  • At the above ribbon > List Tab >  Select List Settings.

list settings

  • Below Columns section > Click on Create column.

create column

  • Specify the column name > Select ‘Choice’ data type.

choice field

  • Type your choices and select Drop-Down Menu.

choice field 1

  • Again, Create a new column with a ‘Single line of text’.

single line of text field

  • Now you should have two columns as shown below.

columns

Show / Hide fields based on Choice field selection in New Form.

  • In ‘All items’ Page, > From the above ribbon, > In ‘Customize List’ Section > Click on ‘Form Web Parts’ > Select Default New Form.

Form web Parts

  • The ‘New Form‘ will be opened in ‘Edit Mode‘ > Click on ‘Add a Web Part‘.

add new webpart

  • Inside Media and Content > Script Editor > Click on Add.

noteIn Sharepoint 2010, There is no a script Editor web part, So you should follow the same below steps by using Content Editor Web Part.

add script editor.PNG

  • Click on EDIT SNIPPET.

edit snippet

  • Add the following code.
<script src="http://code.jquery.com/jquery-1.7.2.min.js" type=text/javascript></script>
<script type="text/javascript">
// Execute the following JavaScript after the page has fully loaded, when it's ".ready"
$(document).ready(function(){
 
//Show/hide columns based on Drop Down Selection 
$("select[title='City']").change(function() {
if ($("select[title='City']").val() != "other") 
{
$('nobr:contains("OtherCity")').closest('tr').hide();
} 
else 
{
$('nobr:contains("OtherCity")').closest('tr').show();
}
});
});
</script>

noteReplace the choice field name ‘City’ at $("select[title='City']").change(function() {
if ($("select[title='City']").val() != "other") with your columns name.

Replace the field name ‘OtherCity’ that you need to hide or show at $('nobr:contains("OtherCity")').closest('tr').hide();with your field name.

hint-iconYou can Show / Hide multiple fields by repeating the code with your second field name in IF-Else block as shown below

if ($("select[title='City']").val() != "other")
{
$('nobr:contains("OtherCity")').closest('tr').hide();
$('nobr:contains("Field2")').closest('tr').hide();
}
else {
$('nobr:contains("OtherCity")').closest('tr').show();
$('nobr:contains("Field2")').closest('tr').show();}
  • Click on Insert.

edit script editor

  • In the above ribbon > Page Tab > Click on Stop Editing.

stop editing

  • Go back to test your code and Click on Add New Item.
  • The ‘othercity’ field should be shown in a case of the ‘other’ option is selected from “City” drop down field.

other city selected

  • Select any value else ‘other’ where the ‘OtherCity’ field will be hidden.

other city selected 1Show / Hide fields based on Choice field selection in Edit Form.

  • In ‘All items’ Page, > From the above ribbon, > In ‘Customize List’ Section > Click on ‘Form Web Parts’ > Select Default Edit Form.

Form web Parts

  • The ‘Edit Form‘ will be opened in ‘Edit Mode‘ > Click on ‘Add a Web Part‘.

add new webpart

  • Inside Media and Content > Script Editor > Click on Add. (Note: in SharePoint 2010 there is only Content Editor).

add script editor

  • Click on EDIT SNIPPET.

edit snippet

  • Add the following code.
<script src="http://code.jquery.com/jquery-1.7.2.min.js" type=text/javascript></script>
<script type="text/javascript">
$(document).ready(function(){
if ($("select[title='City']").val() != "other")
{
$('nobr:contains("OtherCity")').closest('tr').hide();
}
else
{
$('nobr:contains("OtherCity")').closest('tr').show();
}

//Show/hide columns based on Drop Down Selection
$("select[title='City']").change(function() {
if ($("select[title='City']").val() != "other")
{
$('nobr:contains("OtherCity")').closest('tr').hide();
}
else
{
$('nobr:contains("OtherCity")').closest('tr').show();
}
});
});
</script>

noteReplace the choice field name ‘City’ at $("select[title='City']").change(function() {
if ($("select[title='City']").val() != "other") with your columns name.

Replace the field name ‘OtherCity’ that you need to hide or show at $('nobr:contains("OtherCity")').closest('tr').hide();with your field name.

hint-iconYou can Show / Hide multiple fields by repeating the code with your second field name in IF-Else block as shown below

if ($("select[title='City']").val() != "other")
{
$('nobr:contains("OtherCity")').closest('tr').hide();
$('nobr:contains("Field2")').closest('tr').hide();
}
else {
$('nobr:contains("OtherCity")').closest('tr').show();
$('nobr:contains("Field2")').closest('tr').show();}
  • Click on Insert.

edit script editor

  • At the above ribbon > Click on Stop Editing.

stop editing

  • Go back to test your code and Click on Edit Item.where “OtherCity” field should be hidden in a case of the selected city was not “other” option

edit item1Show / Hide fields based on Choice field selection Display Form

  • In ‘All items’ Page, > From the above ribbon, > In ‘Customize List’ Section > Click on ‘Form Web Parts’ > Select Default Edit Form.

Form web Parts

  • The ‘Display Form‘ will be opened in ‘Edit Mode‘ > Add a Web Part > Media and Content > Script Editor.
  • Add the below code.
<script src="http://code.jquery.com/jquery-1.7.2.min.js" type=text/javascript></script>
<script type="text/javascript">
//viewitem
$(document).ready(function(){
if ($('h3:contains("City")').closest('td').next('td').text()
.indexOf('other') == -1)
{
$('h3:contains("OtherCity")').closest('tr').hide();
}
else
{
$('h3:contains("OtherCity")').closest('tr').show();
}
});
</script>

noteReplace the choice field name ‘City’ at if if ($('h3:contains("City")').closest('td').next('td').text() with your columns name.

  • Open Display form, the ‘OtherCity’ field should be hidden if the selected city was not “other”.

viewitem1

  • In a case of ‘City’ is “other”. so that, the “OtherCity” should be shown.

viewitem2Enjoy 🙂

Check also Show / Hide fields based on a drop down field using SPUtility.js

Advertisements

9 thoughts on “Show / Hide fields based on choice field selection using JQuery in SharePoint

  1. Great article. Question: how would your code in the Edit form look if you wanted to display the OtherCity text field if more than one choice field was selected. For example if you had the following choice fields…Cairo, New York, Los Angeles and Other. And we wanted to display the OtherCity text field if New York was selected or if Other was selected the text field would be displayed. However if the choice field was blank, Cairo or Los Angeles it will still not be displayed. Thanks

    Like

    1. Sorry for delay 😦 if you need to show other city text box based on a selection raher than other as New Yourk, you just need to use or || in this condition if ($(“select[title=’City’]”).val() != “other” || $(“select[title=’City’]”).val() != “New York” )

      Please don’t hesitate to tell me if you need any clarification 🙂

      Like

  2. What do you have to change with the code if the control field is just a currency field and not a choice field?

    Like

  3. Hello. Thanks for this, I got the New item to work. My question is if I want the field to be hidden until a selection is made in the previous list element? For instance I have an Other Filings. I want Other Description to only show when “Other” is selected from that drop down. Right now, it shows until I make a selection. Thanks in advance for your time!

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s