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

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

In this article, we’ll explain How to “Show / Hide fields based on choice field selection using JQuery in SharePoint 2016 / 2013“.

Show / Hide fields based on choice field selection in SharePoint

We’ll also learn how to

Applies To

  • SharePoint 2016.
  • SharePoint 2013.
  • SharePoint 2010.

You might also like to read SharePoint Auto Populate Column based on another Column.


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

In this section, we’ll learn

  • Show and hide a column based on Choice field / Drop-down selection in New Form?
  • Show and hide a column based on Choice field / Drop-down selection in Edit Form?
  • Show and hide a column based on Choice field / Drop-down selection in Display Form?

Show / Hide fields based on choice field selection: Create a Custom List.

Steps

  • Open the SharePoint Site > Site Settings > Click on Add an app.
Add an app in SharePoint
  • Click on a Custom List.
new custom list
  • Specify your custom list name > Click on Create.
create custom list in SharePoint
  • The custom list is created successfully.
add 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.
Create a new column in sharepoint field
  • Again, Create a new column with a ‘Single line of text’.
column settings single line of text field
  • Now you should have two columns as shown below.
SharePoint List columns

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

In this section, we’ll explain how to show and hide fields based on Choice field selection in SharePoint List New Form by following the below steps:

Steps

  • In ‘All items’ Page, > From the above ribbon, > In ‘Customize List’ Section > Click on ‘Form Web Parts’ > Select Default New Form.
Edit default form
  • 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.

In SharePoint 2010, There is no a Script Editor web part, 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.
    $(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();
            }
        });
    });

Download the full code for New Form on GitHub at Show / Hide fields based on choice field selection in SharePoint

What you should change in your side, to get this code working

  • Replace the choice field name ‘City’ at $("select[title='City']").change(function() {if ($("select[title='City']").val() != "other") with your column name.
  • Replace the field name ‘OtherCity’ that you need to hide or show at $('nobr:contains("OtherCity")').closest('tr').hide();with your field name.

You can Show and 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 web part
  • 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 ‘other city’ field should be shown in a case of the ‘other’ option is selected from “City” drop-down field.
Show / Hide fields based on Choice field selection in New Form
  • Select any value else ‘other’ where the ‘OtherCity’ field will be hidden.
Hide Show columns in Custom List based on dropdown selection in New Form in SharePoint

You can also show hide another drop-down field based on a drop-down selection with the same code.

Hide Show columns in Custom List based on dropdown selection in new form

Note: if you have many columns, it will lead to having a long and complex code with many if/else conditions, in this case, you should use this workaround as mentioned at Show and Hide columns based on choice selection in SharePoint 2016


Show / Hide fields based on a lookup selection in Edit Form

In this section, we’ll explain how to show and hide fields based on Choice field selection in SharePoint List Edit Form by following the below steps:

Steps

  • In ‘All items’ Page, > From the above ribbon, > In ‘Customize List’ Section > Click on ‘Form Web Parts’ > Select Default Edit Form.
Edit default form in SharePoint
  • 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 web part
  • Click on EDIT SNIPPET.
edit snippet
  • Add the following code.
 $(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();
            }
        });
    }); 

Download the full code for Edit form on GitHub at Show / Hide fields based on choice field selection in SharePoint

What you should change in your side, to get this code working

  • Replace the choice field name ‘City’ at $("select[title='City']").change(function() {if ($("select[title='City']").val() != "other") with your column name.
  • Replace the field name ‘OtherCity’ that you need to hide or show at $('nobr:contains("OtherCity")').closest('tr').hide();with your field name.

You 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 web part
  • 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
Hide Show columns in Custom List based on dropdown selection in Edit Form in SharePoint

You might also like to read Auto Populate Field Values based on Lookup Selection In SharePoint.


Show / Hide fields based on Choice field selection in Display Form

In this section, we’ll explain how to show and hide fields based on Choice field selection in SharePoint List Display Form by following the below steps:

Steps

  • In ‘All items’ Page, > From the above ribbon,
  • In ‘Customize List’ Section > Click on ‘Form Web Parts’ > Select Default Edit Form.
Edit default form in SharePoint
  • The ‘Display Form‘ will be opened in ‘Edit Mode‘ > Add a Web Part > Media and Content > Script Editor.
Add Script Editor Web Part
  • Add the below code.
 $(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();
        }
    }); 

Replace the choice field name ‘City’ at if condition $('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”.
Show / Hide fields based on Choice field selection in Display Form in SharePoint
  • In a case of ‘City’ is “other”. so that, the “OtherCity” should be shown.
Hide Show columns in Custom List based on dropdown selection in Display Form in SharePoint

Download the full code for Display Form on GitHub at Show / Hide fields based on choice field selection in SharePoint


Conclusion

In conclusion, we have learned how to How to “Show / Hide fields based on choice field selection using JQuery in SharePoint 2016 / 2013“.

We have also learned, how to show and hide a column based on Choice field selection in SharePoint using JQuery for

  • SharePoint List New Form.
  • SharePoint List Edit Form.
  • SharePoint List Display Form.
Download

Download the full code from GitHub at Show / Hide fields based on choice field selection in SharePoint, also Please, don’t forget to Follow Me to get the latest updates.

You might also like to read
Have a Question?

If you have any related questions, please don’t hesitate to ask it at deBUG.to Community.

83 thoughts on “Show / Hide fields based on choice field selection using JQuery in SharePoint 2016”

  1. Pingback: Disable SharePoint Field in Edit Form | SPGeeks

  2. Can you have a code for new form that does a calculation and hide/show based on it? like a “quantity” field (text or number), a “price” field (Currency), and a “shipping cost” field (Currency).
    Quantity times Price plus Shipping Cost = total. if total is greater than X, hide/show.

  3. Hello Mohamed,

    I have a cascading drop down… Country, State and City
    Upon selecting Country, only those states of that country appears and upon selecting a State only those city in that state appear.

    I want to show / hide field if the city name = XYZ and used the below code but it’s not working. Upon form load it’s working but after loading if the drop down fields are changed this is not executing.
    I have added this code in new script editor and not in content editor where i have coded for cascading drop down

    https://code.jquery.com/jquery-1.7.2.min.js

    $(document).ready(function(){
    //Show/hide columns based on Drop Down Selection
    $(“select[title=’City Required Field’]”).change(function() {
    if ($(“select[title=’City Required Field’]”).val() != “XYZ”)
    {
    $(‘nobr:contains(“Whether this was”)’).closest(‘tr’).hide();
    $(“nobr:contains(‘Did failed to identify this’)”).closest(‘tr’).hide();
    $(“nobr:contains(‘tenure’)”).closest(‘tr’).hide();
    }
    else
    {
    $(‘nobr:contains(“Whether this was”)’).closest(‘tr’).show();
    $(“nobr:contains(‘Did failed to identify this’)”).closest(‘tr’).show();
    $(“nobr:contains(‘tenure’)”).closest(‘tr’).show();
    }
    });
    });

  4. The same is not working for me in hiding a field in display form.
    When I select “Track” as “Calls”, the field “Chatid” should be hidden in display form.

    https://code.jquery.com/jquery-1.7.2.min.js

    //viewitem
    $(document).ready(function(){
    if ($(‘h3:contains(“Track”)’).closest(‘td’).next(‘td’).text()
    .indexOf(‘Chat’) == -1)
    {
    $(‘h3:contains(“Chatid”)’).closest(‘tr’).hide();
    }
    else
    {
    $(‘h3:contains(“Chatid”)’).closest(‘tr’).show();
    }
    });

    Any help would be appreciated.

  5. I am struck while modifiying this code. I have made the 2nd text box “Testing2″ a mandatory field. If the text box is hidden, the form will not accept the save because the mandatory hidden field is blank. So I added a line in the code to insert value as space ” ” before hiding. Now the code is not working.

    https://code.jquery.com/jquery-1.7.2.min.js

    $(document).ready(function(){
    //Show/hide columns based on Drop Down Selection
    $(“select[title=’Testing1 Required Field’]”).change(function() {
    if ($(“select[title=’Testing1 Required Field’]”).val() != “Yes”)
    {
    $(‘nobr:contains(“Testing2”)’).val() != “” “”;
    $(‘nobr:contains(“Testing2”)’).closest(‘tr’).hide();
    }
    else
    {
    $(‘nobr:contains(“Testing2”)’).closest(‘tr’).show();
    }
    });
    });

Leave a Reply

Scroll to Top