Skip to main content

Validation or control form from JQuery - Default New and Edit forms



When you create a custom list, you get default edit and new forms with it. So when you are entering data or modifying it SharePoint provides you a form in a popup that enables you to enter or modify data.

But then, if you want to add custom features to the new or edit form, you can do so using JQuery. In the below example, based on the valued selected in the dropdown list, I want to enable or disable other control. And I want to add this JQuery code to the New and Edit forms of the custom list.

function HideColumn(stat, active) 
{  
        var activeObj = $("input[title='" + active + "']");
        
       //initially when the user opens the form, we need to check if the user has selected the status that we have written code for…
       //if selected value is other than Suspend, disable the control
        var initialVal = $("select[title='"+ stat +"']").find('option:selected').text();
        if(initialVal == 'Suspend')
        {$(activeObj).attr('disabled', false)}
        else
        {$(activeObj).attr('disabled', true)}

         //Now handle dropdown list’s change event. In this event we will check what is the selected value of the ddl, based on the value, we enable or disable the control…
 $("select[title='"+ stat +"']").change(function() 
 { 

  var selectedValue = $("select[title='"+ stat +"']").find('option:selected').text();
 
         if(selectedValue == 'Suspend') 
  {
              $(activeObj).attr('disabled', false)
          }
  else {
       $(activeObj).attr('disabled', true)
              }
 });
}

$(document).ready(function() {HideColumn('Status', ' Active');} );

In the above example, I have written a function HideColumn which will be called when the document is ready. The parameters to this function are the column names of dropdown list – ‘Status’ and other control which we want to enable/disable.

Now when the user opens the form in edit mode, the status ddl is already selected. At this time, we want to make sure based on the selected value, we change the state (enable/disable) of the other control. In SharePoint you are not aware of the ‘Id’ property of the control. Or this property will be having some junk value. But what you can depend on is the ‘Title’ property. So by passing the title property, we can create the control object.

var activeObj = $("input[title='" + active + "']");

You can get the selected text of the drop down list by using the find method as below.

var initialVal = $("select[title='"+ stat +"']").find('option:selected').text();

Once you are done with enabling and disabling the control at start up, you have to attach change event handler to the status drop down list. 

$("select[title='"+ stat +"']").change(function(){});

This function will fire every time you change the value in the drop down list. Now based on the selected value, you can enable or disable the other control.


Now, how do you put this on to the new and edit form? Well go to the list tab, click on ‘Form Web Parts’ and select ‘Default New form’. In the form, click on add web part, click on ‘Media and Content’. Add ‘Content Editor’ web part.



Now in the ‘Editing Tools’ – ‘Format Text’ tab, click on ‘HTML’ – ‘Edit HTML Source’. Paste you JQuery code in this popup dialog. Don’t forget to set the chrome type to ‘None’ in the web part properties.

Follow the same steps to configure JQuery code in the edit form also.

Happy SharePointing...

-Vighnesh
Labels:

Comments

Post a Comment

Popular posts from this blog

Create list view - Conditional Formatting in SharePoint Designer 2010

In this example, we are going to format a column based on certain condition. Here I already have a list called Projects. I also have workflow associated with it. So whenever I create a new item in the list, workflow status column shows ‘In Progress’. Subsequently when the workflow in completed, the workflow status column shows ‘Completed’. For demonstration purpose, I will set the background color of workflow status column to yellow when the status is ‘In Progress’ and to green when the status is ‘Completed’. In SharePoint Designer open the site on which you are working. Click on ‘Lists and Libraries’ link. Choose the ‘Projects’ list. In SharePoint Designer Navigation, choose ‘Lists and Libraries’. In the list settings page, click on ‘New’ in ‘Views’ section. Provide appropriate name for the view and click OK. After choosing list, click on ‘New’ in the Views section. Give appropriate name to the list. Now click on any column, then in the ribbon, click on List View Tools-&g
1 comment
Read more

SharePoint 2013 (SP 15) - Creating Custom Lists

As I am exploring SharePoint 2013, I found out that there are lot of things that are new and there are lot of thing that are old but presented in a different manner as compared to SharePoint 2010. For example, Site Actions was on the top left corner in SP 2010. But in SP 15 (SharePoint 2013) we dont have ‘Site Actions’ button. But instead we have a settings icon which is placed at top right corner. When you click on the settings icon select Add an App. This will basically allow you to add custom lists, documents libraries etc. Add an App is basically the same as More Options in SharePoint 2010. From now on custom lists & libraries will be called apps. Just like in Apple store or Android store you can develop apps for SharePoint and sell it. You can find more information here: http://officepreview.microsoft.com/en-us/store/apps-for-sharepoint-FX102804987.aspx When you click on Add an App you will be navigated to a different scree which will display different opti
1 comment
Read more

Working with large xml files in c# .net

Working with large (huge) xml files is always a pain in the … The reason? These files can’t be loaded in to memory. On my desktop, where I have 2 gigs memory, I can’t open the file in even notepad. I was presented with a challenge recently to manipulate one such large xml file. The xml file was of 550+ MB. I know many would say I have seen bigger xml files than this. But the heart of the matter is if I can’t open 550+ MB file in notepad or in xmldocument in c#, then I can’t open any file bigger than this. And hence the logic to play with these files would remain same. The scenario: We have an xml file from which we want to remove a single node without removing its children. In the below sample xml fragment, the node has to be removed. The children nodes, must then be attached to ( node’s parent) node. One Two 100.22 GoodDay 3 4 Five 200.09 Cra
3 comments
Read more