• Insights

Adding events to SharePoint list item form fields

Kraft Kennedy

< 1 min read

All Insights

SharePoint 2007 lists use aspx forms for new item, edit item, and view item forms.  These forms can be modified to customize the look and feel of the forms, and add additional functionality.  For example, you could add client side javascript to do additional validation or to show and hide sections based on where a user clicks.  You could also add javascript events to list items, such as onchange and onclick events.

(Note: SharePoint 2010 adds the option to use InfoPath forms for lists, but this still might apply in certain cases.)

Here’s a good primer on using SharePoint Designer 2007 to edit or create a new list item form:

http://office.microsoft.com/en-us/sharepoint-designer-help/create-a-custom-list-form-HA010119111.aspx

Adding client-side javascript events is where it gets a bit tricky.  You could look at the source code for the page in a browser in order to find the ID of the control you wish to add an event to.

Then you could add a function in javascript to assign another function to run after an event.  Note, you can’t just simply add the event into the control in the source code, since the control is a server-side SharePoint control.  So you’d have to have a separate function where you assign the event, as shown below.

function addEvents(){
//Add event functions here

document.all.<ID-OF-CONTROL>.onclick = function(){EventCode()};

document.all.<ID-OF-CONTROL>.onchange = function(){EventCode()};

}

function EventCode(){
//Actual code to respons to event

alert('test');
 }

The next tricky thing I found is that if you simply call the “addEvents” function in script or in the page load, it doesn’t actually do anything.  This seems to be because the page needs to be fully built and loaded before the events are added.  So adding the following timeout to the script, in order to wait a second after the page loads before assigning the events, seems to do the trick.

setTimeout('addEvents()', 1000);