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...!! :)


7 comments:

  1. hi,

    Is it possible to show/hide fields based on a date field being entered?

    ReplyDelete
  2. Hey,

    Sorry i didn't check your question..??
    Yup we can do based on the Date. Question is Date is Static or Dynamic. If it is Static then it very simple just put the value and if it is Dynamic then create a variable and pass that variable into the field value, it is something tricky(A Jquery will be used).

    Please let me know if you want any more clarifications.
    Thanks

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. How do you apply this code when using checkboxes?

    ReplyDelete
  5. I have 2 check boxes where if checked a control displays. If not checked, the control is hidden. How to accomplish this using the code above?

    ReplyDelete
  6. Hi,

    I am using SharePoint 2010 custom list, Here I want to show last time data into the new item page and with editable mode, if they don’t want to use last item data, then they can remove and store new data. Could you please advise me how I can make it live,. Thanks in advance.

    Thank you
    Shilambu

    ReplyDelete
  7. Hi,

    I am having a custom list.

    In that document type field is a dropdown.
    My REQUIREMENT is if I select the drop down value as Minutes.
    Minute column should display.

    Please can you suggest me.
    I know this should be done with JavaScript.
    But I don't know coding for this.

    Please help me.

    Thank you,
    Sowjanya.

    ReplyDelete