Using Query String Variables to Populate SharePoint Form Fields

If you have a parent/child relationship between two lists, you will undoubtedly want your users to be able to create child items without having to type in the common key or ID.  I’m not going to go into the full architecture of this here, but here’s an important part of the process.

Let’s say that you’ve built a nice custom page which lists your parent items, perhaps a list of projects, and you have a links next to each projects to ‘Add Status’.  This link points to the page where you provide the user with a form to add an item to the project status list (the child list).  This link probably will look something like this:

http://[servername]/Shared%20Documents/NewProjectStatus.aspx?ProjectID=[n]

Wouldn’t it be great to be able to grab that ProjectID from the Query String and populate the ProjectID column on the child (Project Status) list?  No problem; a little JavaScript will do it.

Open the NewProjectStatus.aspx page in SharePoint Designer, and add the following JavaScript (If you aren’t sure where it goes, try looking for where the script: var navBarHelpOverrideKey = “wssmain”; lives):

<script type="text/javascript">
_spBodyOnLoadFunctionNames.push("fillDefaultValues");
var vals = new Object();
var navBarHelpOverrideKey = "wssmain";
function fillDefaultValues() {
  var qs = location.search.substring(1, location.search.length);
  var args = qs.split("&");
  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];
  }
  setLookupFromFieldName("ProjectID", vals["ProjectID"]);
}
// setLookupFromFieldName: Set a form field value using its //    fieldname to find it in the page
// Arguments:
//        fieldName:    The name of the list column
//        value:        Set the fieldName to this value
//
 function setLookupFromFieldName(fieldName, value) {
        if (value == undefined) return;
        var theInput = getTagFromIdentifierAndTitle("input","",fieldName);
        if(theInput != null) {
            theInput.value = value;
        }
    }
// getTagFromIdentifierAndTitle: Find a form field object using its tagName,//     identifier, and title to find it in the page
// Arguments:
//        tagName:    The type of input field (input, select, etc.)
//        identifier:    The identifier for the instance of the fieldName//                       (ff1, ff2, etc.)
//        title:        The title of the list column
//
 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 (tags[i].title == title && (identifier == "" ||                  tempString.indexOf(identifier) == tempString.length - len)) {
                return tags[i];
            }
        }
        return null;
    }
</script>

The form field named ‘ProjectID’ (in this case) will be set to the value passed in on the Query String.  See some of my previous posts showing the JavaScript needed to set other types of form fields like a People Picker.

NOTE (July 12): AutoSponge pointed out a few deficiencies in this post, which I thank him for (see below).  I also should have referenced this post as the original source for this approach.