Tuesday, July 17, 2012

Toggle multiline text area in SharePoint using jQuery

Hi All,

Let us explore more in to area of jQuery with respect to SharePoint. When we want some field to not appear in the NewForm or EditForm or so we can make a use of jQuery to hide them.

When we want to toggle the visibility of any field on the form, we can achieve the same with the jQuery.

jQuery has helped a lot in the world of SharePoint.

I’ve created one test list and I have one column named status. There are four entries in that as you can see in below figure.



Now I want to toggle the Reason text area below that. So I’ve written the following code in jQuery. Just add content editor web part and write down the following code. You have to modify your HTML portion based on your field name. Just observe the view source and check the hierarchy level for span, td and tr for the field and accordingly make the change.



Note: One big change. make sure that you write == sign to compare instead of = sign. make this change while writing the code for above figure.

We are handling the change event of dropdown here; you can do the same stuff with checkbox, just make sure to change the change event function to click function. That is the only change required if you would like to go with checkbox.

When I select the drop down and change the value, I get to see text area also toggles.



And when I change the drop down value



You can also use hide () and show () function to get the desired field on the page and use these methods to perform your own functions as per the need.

No comments:

Post a Comment