Important notice

Please note that this blog is discontinued here. All the posts are also coppied to my new blog at http://boris.gomiunik.net.
Important: Due to large amount of comment spam further commenting has been disabled here. If you wish to send me a comment, plase look up the same post on my new blog and leave comment there. Thanks!

4/04/2008

Add functions and events to SharePoint form fields

Do you sometimes wish to make some special form validation or other javascript actions on SharePoint form fields (like for example onchange, onfocus, onblur, etc?). You can add special functions on events to the SharePoint form fields using JavaScript. All you need to do is

1. Write your JavaScript function
2. Use the getField function I was writing about to refference the SharePoint Fiedl
3. write the following code:

getField('[field_type]','[field_title]').[event] = function() {[function_name]};

Let me demonstrate in an example below. I have a SharePoint List with a field "Menu" that is a lookup field to Title list "Menu". I've created another field "Menu_id" that is a lookup to the same list, but instead of Title it should select the ID. These two fields need to select the same item from the list Menu.

 

Now we'll prepare a one-way synchronization. We'll want those two fields synchronized when selecting the item from the "Menu" dropdown. So we'll add an "onchange" event to the "Menu" select field.

1. Add a Content Editor Web part to the page using this method

2. Edit the Source of the content editor web part add the script code, insert the getField function, write your function and use function above. The full code is below

<script type="text/javascript">
function getField(fieldType,fieldTitle) {
    var docTags = document.getElementsByTagName(fieldType);
    for (var i=0; i < docTags.length; i++) {
        if (docTags[i].title == fieldTitle) {
            return docTags[i]
        }
    }
}

function syncDropDowns() {
selectedId = getField('select','Menu').options[getField('select','Menu').selectedIndex].value;
for (i=0; i<getField('select','Menu_id').options.length; i++) {
  if(getField('select','Menu_id').options[i].value == selectedId) getField('select','Menu_id').options[i].selected='selected';
}
}

getField('select','Menu').onchange = function() {syncDropDowns()};

</script>

This is an example made with CEWP and in the SharePoint. The same works also in the Data View Webpart.

Oznake ponudnika Technorati: ,

32 comments:

Hal Angseesing said...

Great stuff, I was looking for a solution to this very same problem and had just gone down the custom field control route. I'm going to back out my half working code and do it this way istead. Sooo much simpler. Nice solution.

Cliff said...

Thank you very much for the article.

I wanted to do some simple javascript functions based on the "onFocus" method of a textfield.

However, the

getField('input','DriverName').onchange = function() {WriteValues()};

I have inplace does not seem to bind the "onFocus" event to the field. Do I need to set up a "listener" to check the field every 10 milli-seconds or so?

It just seems that the onFocus call needs to be directly attached to the field.

Any thoughts on this would be appreciated.

Cliff

Boris Gomiunik said...

If you need to add onFocus event, then change from

getField('input','DriverName').onchange = function() {WriteValues()};

tp

getField('input','DriverName').onfocus = function() {WriteValues()};

However, the onFocus will only trigger when you select the field. If you want keystroke interactivity, I suggest using the onkeyup event rather.

gvijaikumar said...

Really cascading dropdown post was good, I had followed the step you mentioned, but where to add the "onchange" event when I open the newform.aspx page in sharepoint designer I cannot add "onchange" change, Can you please tell me how to add the "onchange" event where and how?

Thanks
Vijai Kumar G

Luca said...

Hi ,
Nice post .
I have a problem .
We want to change the FormFilds for the lookup list mutivalue .
Now there are two list box and you can move one element from one box to another box . Now we need to remove the left box and use a tree view
can someone help me ?

Regards Luca

karen said...

I can't get the code to fire. I know what my fieldTitle is but maybe it's because I don't know the fieldType? How do I determine which field type to plug into the code? I've seen you use 'select' and 'input' used... Thank you!

Boris Gomiunik said...

@ karen:
Which type of field do you want to manipulate? Maybe the Internet Explorer Developer Toolbar can help you to reference the field.

@luca:
Can you explain a bit more. Do you perhaps have some link or screenshot?

@gvijaikumar:
Sorry for not replying for long. You don't even need SharePoint designer in the newform.aspx page. You can add the parameters &PageView=Shared&ToolPaneView=2 to the URL of the newform. Then you can add the content editor webpart, edit it's source and then make the code in there.

Anna said...

I did all that was said above.
But when I select a particular item in one drop down list, the other is not getting updated. What could be the issue. Could you please help me out.

Boris Gomiunik said...

Hi Anna.

Reasons can be different. If there is one error in javascript the whole script stops working.

How I usually debug such scripts is to put alerts in different phases of javascript to see untill where the functions is working correctly.

Anonymous said...

Hi, I would like to say thanks for your article and I was able to manipulate the lookup field values. Basically I just wanted to display another field if a particular value was chosen in the lookup field and was banging my head how to do it...

brilliant work!

Christophe said...

My understanding is that this code only works if the lookup list has less than 20 items. Have you tested it with more than 20?

chris said...

Hi,
What is the tag name of a person field?

Thanks
Regards

Chris

Pam said...

Hi
I managed to get this code working for a list that was >20 items. Are you able to advise the code that would be needed to use if a drop down lookup list has greater >20 items and uses "theInput".

Thanks
Pam

Anonymous said...

how to get load event of page in sharepoint..?

Anonymous said...

I have used this code on a list with less than 20 items and it works great, however it does not work on lists over 20 items.

My question is the same as pam's, is there a way to use this technique for lists that have more than 20 items?

John

Anonymous said...

Hello,
Can i do this when on edit mode of a page in a publishing page?
I need to do a validation of two drop downs that are fields of a content type
Thanks

Anonymous said...

hi
i try to ad a functions to my newForm.aspx
and iv'e a problem , the 'getfield' function does not recognize the control ( the element )
i try this for drodownlist with header 'menu' :
getField('select','menu').onchange = function() {syncDropDowns()};

where im go wrong ?

uiyui said...
This comment has been removed by a blog administrator.
Matt said...

For some reason it does not work for me.
I put alerts to see where the code stops working and it seems that it does not catch onchange event.

For test reasons I inserted the following lines:
alert('First')
getField('input','Title').value = 'test'
alert('second')

and only the first alert has been displayed.

Matt said...

OK, I figured it out. The content editor web part should be placed below the drop down lists. It wasn't obvious to me ;)

Now it works.

BTW, I wonder if javascript requires java installed on the system.

Boris Gomiunik said...

Yes. You need to put the CEWP below the form, otherwise the script gets executed before the control is rendered. So the getField doesn't have anything to render

Anonymous said...

Thank you!! This is perfect

jc.

Swati said...

I am having similar problem but not able to solve it.I need to call javascript function at the onclick event of Image of Calendar (which is the DateTime control of Sharepoint). I used Content Web Part on the page and added the javascript code in Source editor.But they are not getting called.Also in function,
getField('select','Menu').onchange = function() {syncDropDowns()};
For the image,
should the field type be IMG and title is not present ,now I added title .
On Save of editor,its showing error cannot save the changes.

Swati said...

To Boris ,
I have added the CEWP control below the form now.But again when I try to save the code in Source Editor, it gives error cannot save the changes.
Can you please help me out in this.
Can I use document.getElementByID instead of tagName.

Can you provide me with more simple code to check if i can save it in Source editor of CEWP.

ritesh said...

Hi....can someone please let me know "how to read the excel file contents from sharepoint document library"??

Anonymous said...

I've tried using it (because i've been looking for this for a while now), but the event doesn't get fired.
Does this work on WSS 3?

I've added the content editor webpart on the newform.aspx below the DataFormWebPart.

Added the code
function getField(fieldType,fieldTitle) {
var docTags = document.getElementsByTagName(fieldType);
for (var i=0; i < docTags.length; i++) {
if (docTags[i].title == fieldTitle) {
return docTags[i]
}
}
}
function syncDropDowns() {
alert('me');}
}
getField('select','Customer').onchange = function() {syncDropDowns()};

but when I select a value from the drop down list, nothing happens.
Any suggestions?

Anonymous said...

Hi,
Getting back on the previous comment. I found the answer (after a long search), so I like to share it with you !

I had to add the following in the javascript (besides the getField and syncDropDowns functions):

_spBodyOnLoadFunctionNames.push("SetDropDownEvent");

function SetDropDownEvent(){
getField('select','Customer').onchange = function() {syncDropDowns()};
}

Anonymous said...

You are a bloody legend Anonymous

This worked a treat!

_spBodyOnLoadFunctionNames.push("SetDropDownEvent");

function SetDropDownEvent(){
getField('select','Customer').onchange = function() {syncDropDowns()};
}

Anonymous said...

Any solution to having more than 20 items?

Joe said...

Awesome. I searched all over and this is just what I needed! Well done.

Boris Gomiunik said...

For resolving more than 20 items lookup I recommend the method from SharePoint Designer Team Blog:
http://blogs.msdn.com/sharepointdesigner/archive/2007/06/13/using-javascript-to-manipulate-a-list-form-field.aspx

web design India said...
This comment has been removed by a blog administrator.