Wednesday, April 28, 2010

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.

4 comments:

Anonymous said...

Great Option wish your instructions where a little biut more complete, like do you add your script to form page or the listview page using designer also what do you mean by replacing compare = with ==

Parth Patel said...

its not on list view its on newform/editform and also its without using designer

Checkout this link
http://www.sharepointkings.com/2008/05/how-to-edit-list-forms-like-newformaspx.html

other answer to question is
compare using == in javascript:
the screen shot showing javascript is using = to compare (selecteditem="suspended") which is wrong so keep the note just below image and hoping reader can understand.

Pzcar said...

Hello SharePoint Kings, I tried to implement the code but the feature is not working for me... this is the code I'm using: is there any sintax error?


$("select[title$='Status']").change(function()

{

var selecteditem = $("ctl00$m$g_e2e95f61_cbcb_43da_af5c_c38a5544eff3$ctl00$ctl04$ctl01$ctl00$ctl00$ctl04$ctl00$DropDownChoice :selected").text();

if(selecteditem = "Suspended")

{
$("textarea[title$='Reason'].parent('span').parent('td').parent('tr').parent('table').toggle();

SharePoint Kings said...

is it showing you any JavaScript error or script is not working?




Share your SharePoint Experiences with us...
As good as the SharePointKings is, we want to make it even better. One of our most valuable sources of input for our Blog Posts comes from ever enthusiastic Visitors/Readers. We welcome every Visitor/Reader to contribute their experiences with SharePoint. It may be in the form of a code stub, snippet, any tips and trick or any crazy thing you have tried with SharePoint.
Send your Articles to sharepointkings@gmail.com with your Profile Summary. We will Post them. The idea is to act as a bridge between you Readers!!!

If anyone would like to have their advertisement posted on this blog, please send us the requirement details to sharepointkings@gmail.com