Show or Hide SharePoint List Form Fields based on Another Field’s Value using jQuery

What: Show or Hide a SharePoint list form field based on another field’s value.

How: Use Query script to show/hide the dependent field from the list form based on the current field’s value.

jQuery to Show or Hide Fields based on another Field Value:

//Place this code just below the place holder "PlaceHolderMain" in Custom List Form.
<script type="text/javascript" src="/_layouts/1033/jquery-1.4.4.min.js"></script> //Or Get refer it from "http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"
<script type="text/javascript">
 $(document).ready(function()
  {
     //alert('jQuery Works');

      //Hide Reason fields initially 
      $("textarea[title$='Question2Reason']").parent('span').parent('td').parent('tr').hide();

     //Associate a function with Drop down change event
  $("select[title$='Question 2:']").change(function()
      {
        if($(this).val()=='Yes')
         {
            $("textarea[title$='Question2Reason']").parent('span').parent('td').parent('tr').show();
         }
        else
         {
            $("textarea[title$='Question2Reason']").parent('span').parent('td').parent('tr').hide();
         }
     });
 });
</script>

and the output: No value selected
Show or Hide SharePoint List Form Fields based on Another Field's Value using jQuery
Reason filed visible on selecting the drop-down value as: Yes

show field based on another field valueReason filed is hidden on selecting the drop down value as: No
hide list form field based on another field

Instead, hide, If you want to Disable/Enable Fields, Use this code:

if($(this).val()=='Yes')
{
   $("textarea[title$='Question2Reason']").attr('disabled', false);
}
else
{
   $("textarea[title$='Question2Reason']").attr('disabled', true);
}

Related post: Disable “Save” Button Until User Selects “I Agree”

Salaudeen Rajack

Salaudeen Rajack is a SharePoint Architect with Two decades of SharePoint Experience. He loves sharing his knowledge and experiences with the SharePoint community, through his real-world articles!

7 thoughts on “Show or Hide SharePoint List Form Fields based on Another Field’s Value using jQuery

  • April 1, 2019 at 1:48 PM

    i tryed with this code

    $(document).ready(function()
    {
    //alert(‘jQuery Works’);

    //Hide Reason fields initially
    $(“textarea[title$=’Вођа тима – одобрење’]”).parent(‘span’).parent(‘td’).parent(‘tr’).hide();

    //Associate a function with Drop down change event
    $(“select[title$=’Обрађивач – одобрење’]”).change(function()
    {
    if($(this).val()==’Да’)
    {
    $(“textarea[title$=’Вођа тима – одобрење’]”).parent(‘span’).parent(‘td’).parent(‘tr’).show();
    }
    else
    {
    $(“textarea[title$=’Вођа тима – одобрење’]”).parent(‘span’).parent(‘td’).parent(‘tr’).hide();
    }
    });
    });

    that hide another dropdown fieled but my code is not working. why?

    Reply
  • January 28, 2014 at 10:10 AM

    Hai, i want to disable the email-recipient (person or sharepoint group ) column based on user selection yes or no…..i

    f user select yes then it should display otherwise not.

    src=”/SiteAssets/home-jquery/jquery1.4.4.min.js”

    $(document).ready(function()
    {
    //alert(‘jQuery Works’);

    //Hide Reason fields initially
    $(“textarea[title$=’Assign to’]”).parent(‘span’).parent(‘td’).parent(‘tr’).hide();

    //Associate a function with Drop down change event
    $(“select[title$=’IfAssign’]”).change(function()
    {
    if($(this).val()==’Yes’)
    {
    $(“textarea[title$=’Assign to’]”).parent(‘span’).parent(‘td’).parent(‘tr’).show();
    }
    else
    {
    $(“textarea[title$=’Aassign to’]”).parent(‘span’).parent(‘td’).parent(‘tr’).hide();
    }
    });
    });

    please give me your suggestion please….

    Reply
    • January 28, 2014 at 3:04 PM

      Use the code from: https://www.sharepointdiary.com/2013/09/disable-people-picker-lookup-fields-in-list-forms.html to hide People Picker Fields.

      Reply
  • September 17, 2013 at 2:38 PM

    Helllo,

    I tried with your code, but its won’t workign for me.
    Can you tell me, from where did you take “Question2Reason” value?

    Reply
    • September 17, 2013 at 3:03 PM

      Verify jQuery is working on your environment first by placing some javascript alerts. In the above code, It binds a function on Drop-down’s change event.

      Reply
    • September 17, 2013 at 3:49 PM

      Yes, jQuery is working on my environment. I tried yours Disable “Save” Button Until User Selects “I Agree”.
      Its working as it is. But its not working in my case.

      I have one dropdown field “Project Status(Dropdown)” with New, Closed, Hold, Killed.
      The another column is close date (Date and Time column). So when i select Closed or Hold or Killed only the close date to be show other wise its to be hide.

      I implemented same your code but its not working.
      ********************************************************
      My Code is:

      ((I put same your source “src=”/_layouts/1033/jquery-1.4.4.min.js”in Script))

      $(document).ready(function()

      {

      $(“textarea[title$=’Close Date’]”).parent(‘span’).parent(‘td’).parent(‘tr’).hide();

      $(“select[title$=’Project Status’]”).change(function()

      {

      if($(this).val()==’Closed’)

      {

      $(“textarea[title$=’Close Date’]”).parent(‘span’).parent(‘td’).parent(‘tr’).show();

      }

      else

      {

      $(“textarea[title$=’Close Date’]”).parent(‘span’).parent(‘td’).parent(‘tr’).hide();

      }

      });

      });

      ****************************************

      CAN YOU PLEASE HELP ME ON THIS.IT IS VERY URGENT.

      Reply
    • September 17, 2013 at 4:10 PM

      To hide Date Time field, You should use: $(“input[title$=’Close Date’]”).parent(‘span’).parent(‘td’).parent(‘tr’).hide();

      Reply

Leave a Reply