Originally posted on: http://geekswithblogs.net/SoYouKnow/archive/2009/07/06/setting-sharepoint-form-fields-using-javascript.aspx
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.
Families in Germany who are facing divers health problem, such persons can buy drugs from the Web without prescription. With the market flooded with divers web-sites selling sundry medicaments, purchasing medicines from th WEB is no longer a trouble for common man. Certain medications are used to treat infections caused by dental abscesses. Of course it isn’t all. If you’re concerned about erectile soundness problem, you probably know about Xenical and Hoodia. Probably either adult knows about Garcinia. (Read more PhentermineXenical). The symptoms of sexual health problems in men include impossibility to have an hard-on sufficient for sexual functioning. Certain medications may add to sex drive difficulties, so its vital to cooperate with your soundness care professional so that the prescription can be tailored to your needs. Preparatory to taking Levitra or other preparation, speak to your dispenser if you have any allergies. Talk to your health care provider for more details. Preparatory to ordering this remedy, tell your doc if you are allergic to anything.