SharePoint Lookup type can allow
user to pick up the items from existing List, when editing the item it will
show as a dropdown box (<SELECT> Element in HTML ). Sometimes
we may want to fire the onchange event when the selected item changed.
This is easy by using JavaScript to bind the onchange event to the control.
First we find out the Element by <SELECT> tag and then bind the onchange
to it.
<script type="text/javascript">
_spBodyOnLoadFunctionNames.push("PageOnLoad");
function
PageOnLoad() {
//find your lookupElement from the
page.
var lookupElement =
GetElementByTypeAndTitle(‘SELECT’,’My Lookup Field’);
if (
lookupElement != null)
lookupElement.onchange = function() { OnChanged() };
}
function OnChanged(){
Alert( ‘selected item changed’);
}
function
GetElementByTypeAndTitle(elementType, elementTitle) {
//get the Element by tag name.
var allElements =
document.getElementsByTagName(elementType);
for (var i = 0; i
< allElements.length; i++) {
//compare the Title.
if (allElements [i].title == elementTitle)
return allElements [i];
}
return null;
}
<Script>
Open SharePoint Designer and add
above script to the page.
There is another way to add the
script to the page without using SPD, go to the Edit page, on the Browser URL
address bar, append ‘&toolpaneview=2’ at the
end of the url and hit Enter.it will go to web part page design UI. So just add
a ‘Content Editor WebPart’, click ‘Soruce Editor’ and paste above script into
it.
Now try it out, every time when you
select from Lookup column it should fire the onchange event. It’s pretty easy,
right?
Everything seems working fine when
the Lookup list not having too many items,actually less than 20 items. but when
the lookup list have more than 20 items the above script will stop working
without give you any warning( most of people will suffer this and try break
their head to figure out what happen? me too).
This is because when lookup list
items are more than 19, SharePoint try to give a more ‘user friendly’ contro.it
allow user to input and search for items. This is good when lookup list have
large number of items, but shouldn’t it give us warning ahead?
Now when you check the page source
you will find out the lookup field it’s now rendered as <INPUT> Element
but not <SELECT>, so you are failed to find the Element by <SELECT>
tag, so whenever we need to bind onchange to the Look Up field, we need to
handle thses 2 situation,items less than 20 or more.
<script type="text/javascript">
_spBodyOnLoadFunctionNames.push("PageOnLoad");
function
PageOnLoad() {
//find your lookupElement from the
page.
var lookupElement = GetLookupField(’My Lookup
Field’);
//because browser render Lookup
field diferrent when items number below or more than 20.
//so we bind diffrent event to the Lookup.
if (lookupElement.length < 20)
lookupElement.onchange = function() { OnChanged
() };
else //for more than 20
items
lookupElement.onblur = function() { OnChanged
() };
}
function OnChanged(){
Alert( ‘selected item changed’);
}
//this function is used to get
Lookup dropdown element.
function
GetLookupField(elementTitle) {
//first we try to see if it’s being rendered as
<select> tag. for items less then 20
var lookupElement = GetElementByTypeAndTitle('SELECT', elementTitle);
//if more than 20 items, it will be render as <input>
if (lookupElement == null)
lookupElement = GetElementByTypeAndTitle('INPUT',
elementTitle);
return lookupElement;
}
function
GetElementByTypeAndTitle(elementType, elementTitle) {
//get the Element by tag name.
var allElements =
document.getElementsByTagName(elementType);
for (var i = 0; i
< allElements.length; i++) {
//compare the Title.
if (allElements [i].title == elementTitle)
return allElements [i];
}
return null;
}
</script>
The above script should now be able
to handle select change no matter items number < 20 or not.
A small tips:
Modfiy the CORE.JS in MOSS HIVE\1033
a little bit to make above script works better.
Search this line:
var strHandler =
"ondblclick=\"HandleOptDblClick()\"
onkeydown=\"HandleOptKeyDown()\"";
and modify it as onclick.
var strHandler =
"onclick=\"HandleOptDblClick()\"
onkeydown=\"HandleOptKeyDown()\"";
this will allow user to just click
once to select item instead of double click.
Add the following 2 lines into
function HandleOptDblClick() to ensure OnChange event fired.
function HandleOptDblClick()
{
var
opt=event.srcElement;
var
ctrl=document.getElementById(opt.ctrl);
SetCtrlFromOpt(ctrl, opt);
SetCtrlMatch(ctrl, opt);
opt.style.display = "none";
//add this 2 lines here to fire blur
event.
ctrl.focus();
ctrl.blur();
////////////
}
