Guest Author: Mark Rackley
The SharePoint Hillbilly

In a few of my previous blog posts I have used JavaScript to set SharePoint form fields in NewForm.aspx. Using JavaScript to set these fields comes in really handy whether you are setting fields based upon query string variables (see previous posts) or setting a field to some other value.

So, I’m going to quickly breakdown the JavaScript I used to set those fields and hopefully make it a little more understandable. Again, I did not “come up” with this JavaScript. I stole it from some of the site templates that Microsoft provides.

Getting Query String Variables

If you happen to be passing values in your Query String that you want to use (see previous posts), you’ll need to parse them out to get their names and values. The following JavaScript loops through the Query String names and values and stores them in a hashMap using the name as the key.

  //store the query string
    var qs = location.search.substring(1, location.search.length);
    //split query string by name value pairs
    var   args = qs.split("&");
    var vals = new Object(); 

  //loop through name value pairs and   store
    //in a hashmap using field name as key
    for (var i=0; i <   args.length; i++) {
    var nameVal = args[i].split("=");
    var temp =   unescape(nameVal[1]).split('+');
    nameVal[1] = temp.join(' ');
    vals[nameVal[0]] = nameVal[1];
    }

Finding The Form Field to Set

Next, we need to write a function that finds the field we are wanting to set (or read) the value of. The following function can be used to return a specific field object based upon its type, identifier, and name.

  //getTagFromIdetifierAndTitle
    //Get form field by   type & title
    //parameters: tagName: type of tag to return ('input'   & 'select' are the ones I use)
    // identifier: Optional   identifier of the tagName in question
    // title: The   specific title (name) of the field you would like to retrieve
    //returns:   field object to set or get value of (or do whatever you want I guess)
    function getTagFromIdentifierAndTitle(tagName,   identifier, title) {
     var len = identifier.length;
     var tags =   document.getElementsByTagName(tagName);
     for (var i=0; i <   tags.length; i++) {
     var tempString = tags[i].id;
     //if you are not sure what the actual title of your   field is, uncomment this alert
     //alert(tags[i].title);
     if (tags[i].title == title && (identifier == "" ||   tempString.indexOf(identifier) == tempString.length - len)) {
       return tags[i];
     }
     }
     return null;
    }

Calling Methods To Set Various Field Types

Okay, now let’s put everything together and set a couple of form field values. The code is slightly different depending on the type of field you are wanting to set/get.

Text Boxes

Below is the code for calling the above methods and setting a text box value. This code assumes there is a query string variable named “status”.

  var theTextBox = getTagFromIdentifierAndTitle("input","","status");
    theTextBox.value =   vals["status"];

Check Boxes

Check Box objects are retrieved the same as as text boxes. Let’s say you want to find a check box field named “notify me” and set it as checked.

  var theCheckBox = getTagFromIdentifierAndTitle("input","","notify me");
    theCheckBox.checked = true;

Select Boxes

There’s a little more involved when setting the value of a select list. First you need to find the select object, then you need to set the selected option.

When all is said and done and you create the following functions, you can set the value of a select as follows (let’s assume we have a drop down called “status” and we want to set its value to “active”).

  setLookupFromFieldName("status","active");
  //setLookupFromFieldName
    //Sets   the value of a select of a given name to the option of the given value
    //parameters: fieldName: name of select to set
    // value:   option to set select to
    //returns: nada
    function   setLookupFromFieldName(fieldName, value) {
     if (value == undefined)   return;
     var theSelect =   getTagFromIdentifierAndTitle("select","Lookup",fieldName);
     //if the select wasn't found, try getting it as an 'input'   type
     if (theSelect == null) {
     var theInput =   getTagFromIdentifierAndTitle("input","",fieldName);
       ShowDropdown(theInput.id);
     var   opt=document.getElementById(theInput.opt);
     setSelectedOption(opt,   value);
     OptLoseFocus(opt);
     } else {
       setSelectedOption(theSelect, value);
     }
    }
 //setSelectedOption
    //Set the   value of a select to the given option
    //parameters: select: Select object   to set
    // value: Value in options to set select to
    //returns: true if value was set, false if option could not be found to set   value to
    function setSelectedOption(select, value) {
     //get list of options
     var opts =   select.options;
     var l = opts.length;
     if (select == null)   return;
     //loop through all the options
     for (var i=0; i < l; i++) {
     //if the option is   found that is the same as the value, set the value
     if   (opts[i].value == value) {
     select.selectedIndex = i;
     return true;
     }
    }
     return false;
    }

That’s it… why… what were you expecting?

So, there you have it. If you aren’t using JavaScript at all, hope this makes it a little less daunting when setting those field values. Get comfortable with it, you’ll probably want to start using jQuery at some point. :)

As always, your comments are always welcome. This blog is for you guys.

Guest Author: Mark Rackley

Mark has been developing software applications for over 15 years filling the roles of Project Manager, Business Analyst, Lead Developer, and Software Architect.  He has been involved in projects for such companies as Dell, Motorola, Intel and Agilent Technologies. He has worked in large corporate environments, small software start-ups, and as a consultant.  Mark currently works for UNFI where he was introduced to the world of SharePoint and has taken on a lead SharePoint architect role within his organization making key development, administration, and architecture decisions.  Mark’s goal is to help ever new architect and developer avoid the frustrations and brick walls he ran into while learning SharePoint.

Blog:  http://www.sharepointhillbilly.com
Email: [email protected]
Twitter: http://www.twitter.com/mrackley