Saturday, April 6, 2013

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 an another field's value.

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

Code:

//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
Reason filed is hidden on selecting the drop down value as: No


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"



You might also like:
SharePoint Usage Reports
Usage reports, collaboration and audit for SharePoint.
Document SharePoint Farm
Automatically generate SharePoint documentation.
*Sponsored


Check out these SharePoint products:

6 comments :

  1. Helllo,

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

    ReplyDelete
    Replies
    1. 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.

      Delete
    2. 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.

      Delete
    3. To hide Date Time field, You should use: $("input[title$='Close Date']").parent('span').parent('td').parent('tr').hide();

      Delete
  2. 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....

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

      Delete

Please Login and comment to get your questions answered!

You might also like:

Related Posts Plugin for WordPress, Blogger...