Manipulate a List Form Field Using JavaScript

Below Post show the full example of the script I use to set the default value of a Lookup field based on an ID stored in the querystring. setting a Lookup field is a bit more complicated than some other field types. The reason is that Lookup FormFields are rendered with different HTML when the target list contains more than 20 items.

Here’s a partial table of SharePoint column types and their corresponding “identifiers” and “tagNames”:

SharePoint Field Type	identifier	tagName
Single Line of Text	TextField	input
Multiple Lines of Text	TextField	input
Number	TextField	input
Currency	TextField	input
Choice (dropdown)	DropDownChoice	select
Lookup (single)*	Lookup	select
Lookup (multiple)	SelectCandidate; SelectResult	select
Yes/No	BooleanField	input

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.

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.

<script type="text/javascript">

_spBodyOnLoadFunctionNames.push("PageOnLoad"); 

 function PageOnLoad() {

//find your lookupElement from the page.

     var lookupElement = GetLookupField(’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("Value got 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.