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

16 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

  4. Thank you so much for this. After scouring google for any hint at accomplishing this, I got lucky enough to find this blog entry.

    It’s important to note that Chrome and IE will block the jquery script from running without you specifically authorizing untrusted sources because it has http instead of https. To fix this, simply change “http://code.jquery.com/jquery-1.7.2.min.js” into “https://code.jquery.com/jquery-1.7.2.min.js”

    Like

  5. Hi Mohamed,
    Your post is very much helpful. thank you for the wonderful post.
    I followed the instructions and was able to make it work for “default new form” and “default display form”. However, when I try for “default edit form”, it is not working. Can you please help me to fix it?
    Once this is successful, I would like to implement this on the actual form which is bit lengthy but I hope it works. Request you to please help me on making the edit form work. Thank you!

    Like

  6. Hi Mohamed,
    Please disregard my previous comment. My bad. I had typed the column name in lower case while it should have been upper case. My colleague helped me identify it and it worked well. Great Article. Helped me a lot. Now, I will use this on my actual form and try.

    Like

  7. Hello from Canada. I’m pretty new to SharePoint and I’m working on a French-Canadian 2016 Online site. I tried your tutorial, but it does not work. Maybe it’s because I have to use ‘the New Experience’ ? I heard it does not have anymore. How can I get around that problem? Or maybe because my field has accents? How Javascript deal with accents? Thank you 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