Tuesday, April 27, 2010

Disable OK button in SharePoint using jQuery

Hi All,

It is really funny but today I come to know the real power of jquery. I know that jQuery is real cool dude in web world. However when I applied some stuff, it got my relief because it solved my two problems.

When you want to disable OK button in NewForm, Editform of list or document library in SharePoint, you can achieve this with the help of jQuery and it helps a lot. Let us say that you have some requirement like if status is suspended then nobody should be allowed to make any changes in the status field.

Let us add complexity to this. We have attached a workflow that triggers on update. Now the problem with SharePoint is even though nothing is updated, then also it triggers the workflow. So if you do not disable OK button and you go and click on edit item. And then when you do not update anything, click on OK. Boom...workflow triggers. Man…I don’t like this.

Here comes jQuery to save us. Disable the status and disable OK button. That will solve the purpose.

What do you need to do? Well, I have created dummy list to demonstrate this.

I have few fields and one of them is status. Statuses are New, In Progress, Archived and suspended.

When the status is suspended, I do not want to allow any of the users to change the status and also there is workflow attached to this list which triggers if we update any item. Workflow is attached from the SharePoint designer. Hence we are even not writing a code in event handler to check for the item has changed or not in ItemAdding event.

So write down this jQuery in content editor web part. Just add CEWP on top with appending &toolpaneview=2 to the URL.

Add following code to the content editor web part. If you observe we have taken reference of jquery from shared document. You can download the jQuery and then give href to the document library path. What we have done in this jQuery is simply finding all drop downs and then checking its value. If it’s suspended, then we are again checking button OK by its class and once found, we are disabling the button. Hummm…Easy ha? Yes it is.

And see the result.

Get ready for some more exciting stuff with jQuery.


Mark said...

I can not get this code to execute. I have placed CEW on the page with the test list, and the "OK" button is not disabled. I added a closing script tag to your code. Are you sure your JS code is correct?

SharePoint Kings said...

Absolutely YES. You can see the second image that OK button is disabled and that is based on the code shown in first image.

Check your code again by placing alerts on each step. Let us know if this works fine for you.

SharePoint Kings said...


Our scenario is based on suspended status, try to place the function which desabled the OK button seperately outside of suspended function.

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