Showing posts with label Show/Hide Lookup Fields using Jquery. Show all posts
Showing posts with label Show/Hide Lookup Fields using Jquery. Show all posts

Thursday, May 10, 2012

Show/Hide Lookup fields with jQuery

In my previous post i have introduced you about the hiding the fields using Jquery but that is for the normal site columns. If you are using the Lookup fields then you have to adopt some different approach.

I am just taking any example and explain you by this :

I am hiding the field in the SharePoint Edit Page based on the text value in below column.
Refer to the images that would explain you more clearly

What i am trying to do is when you enter the AU as a Text value in Test Value(Column) then the Test_Status(Column) will hide otherwise it is visible.


In above image Test_Status control is not visible.
In aboe image the control is visible.

Now comes the code :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    // add change handler
    $("input[title='Test Value']").change(function() {
        MasterSelectChange();
    });
    // call the change function to set up form for first display:
    MasterSelectChange();
});


function MasterSelectChange()
{
    var thisVal =  $("input[title='Test Value']").val();
    if(thisVal == "AU")
    {
     $("select[title='
Test_Status']").closest("tr").hide();
   
      }
    else
    {
      $("select[title='Test_Status']").show();

    }
}
</script>


Just simply put this code in the body section.


If still there is any issue , please tell me i will try to solve.
Comments Most Welcome...!! :)