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


9 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
  8. Hi,

    I have a list with columns may 2017,june 2017.....dec 2020. When the page loads, I want to show the 12 months from current date and hide the remaining fields using Jquery. For example, Today is 21-aug-2017 so when the page loads the fields of aug 2017,sep 2017.....aug 2018 nd If this month is september then sep 2017-sep2018 fields should be shown other fields should be hidden. Please help with this ASAP (I am new to JQuery)

    ReplyDelete
  9. Hi brother, the code is not working for me, I tried to add this code by replacing the test value and task status with my own fields, I put this code in a default new form with script editor, but, still it is not working, can you explain please.

    ReplyDelete