Skip to main content

Mike Geyer's Blog

A fun place to read and collaborate about SharePoint and related technologies.
Go Search
  

Keep in touch: RSS Feed  


I'm a


My company is a


And we deliver

  (we're certified)
Mike Geyer's Blog > Posts > Using Javascript to Manipulate a List Form Field
Using Javascript to Manipulate a List Form Field

This post falls into the “don’t forget” category.  Special thanks to the SharePoint Designer team at Microsoft.

http://blogs.msdn.com/sharepointdesigner/archive/2007/06/13/using-javascript-to-manipulate-a-list-form-field.aspx

The key function is getTagFromIdentifierAndTitle which finds the HTML element rendered by a given SharePoint FormField control. 

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;
}

 

Be sure to read the MSDN blog for more details, but here’s a snapshot of the column types and their corresponding values for each parameter:

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

 

The following example of the script Microsoft provided to set the default value of a Lookup field based on an ID stored in the querystring.  Line 35 includes the function getTagFromIdentifierAndTitle.

   1:  <script type="text/javascript">
   2:   
   3:  // This javascript sets the default value of a lookup field identified 
   4:  // by <<FIELD DISPLAY NAME>> to the value stored in the querysting variable
   5:  // identified by <<QUERYSTRING VARIABLE NAME>>
   6:   
   7:  // Customize this javascript by replacing <<FIELD DISPLAY NAME>> and 
   8:  // <<QUERYSTRING VARIABLE NAME>> with appropriate values.
   9:  // Then just paste it into NewForm.aspx inside PlaceHolderMain
  10:   
  11:  _spBodyOnLoadFunctionNames.push("fillDefaultValues");
  12:   
  13:  function fillDefaultValues() {
  14:    var qs = location.search.substring(1, location.search.length);
  15:    var args = qs.split("&");
  16:    var vals = new Object();
  17:    for (var i=0; i < args.length; i++) {
  18:      var nameVal = args[i].split("=");
  19:      var temp = unescape(nameVal[1]).split('+');
  20:      nameVal[1] = temp.join(' ');
  21:      vals[nameVal[0]] = nameVal[1];
  22:    }  
  23:   
  24:    setLookupFromFieldName("<<FIELD DISPLAY NAME>>", vals["<<QUERYSTRING VARIABLE NAME>>"]);
  25:  }
  26:   
  27:  function setLookupFromFieldName(fieldName, value) {
  28:    if (value == undefined) return;
  29:    var theSelect = getTagFromIdentifierAndTitle("select","Lookup",fieldName);
  30:   
  31:  // if theSelect is null, it means that the target list has more than
  32:  // 20 items, and the Lookup is being rendered with an input element
  33:   
  34:    if (theSelect == null) { 
  35:      var theInput = getTagFromIdentifierAndTitle("input","",fieldName);
  36:      ShowDropdown(theInput.id); //this function is provided by SharePoint 
  37:   
  38:      var opt=document.getElementById(theInput.opt);
  39:   
  40:      setSelectedOption(opt, value);
  41:      OptLoseFocus(opt); //this function is provided by SharePoint 
  42:    } else {
  43:      setSelectedOption(theSelect, value);
  44:    }
  45:  }
  46:   
  47:  function setSelectedOption(select, value) {
  48:    var opts = select.options;
  49:    var l = opts.length;
  50:    if (select == null) return;
  51:    for (var i=0; i < l; i++) {
  52:      if (opts[i].value == value) {
  53:        select.selectedIndex = i;
  54:        return true;
  55:      }
  56:    }
  57:    return false;
  58:  }
  59:   
  60:  function getTagFromIdentifierAndTitle(tagName, identifier, title) {
  61:    var len = identifier.length;
  62:    var tags = document.getElementsByTagName(tagName);
  63:    for (var i=0; i < tags.length; i++) {
  64:      var tempString = tags[i].id;
  65:      if (tags[i].title == title && (identifier == "" || tempString.indexOf(identifier) 
  66:            == tempString.length - len)) {
  67:        return tags[i];
  68:      }
  69:    }
  70:    return null;
  71:  }
  72:   
  73:  </script>

 

Again, thanks to the SharePoint Designer team at Microsoft.

Comments

Another time saver

It looks like you're doing a lot with JavaScript and SharePoint.  Between this and your last post, I'm thankful.
Dan
at 8/9/2009 4:00 PM

 All Posts

Creating a SP List via Excel - Import from Spreadsheet
I've Moved to Hitachi Consulting
SharePoint 2010 Sneak Peak!
Business Intelligence During an Uncertain Time
Keeping In Touch with Family Around the US
Using Javascript to Manipulate a List Form Field
How to Use JavaScript to access SharePoint Query String
First Blog with Windows Live Writer
Microsoft to offer free classes and certification testing
Job Description - SharePoint Solution Architect
SharePoint Blogs as Status Reporting... and community building
Installing MOSS on WinServer 2008 with Hyper-V and SQL08
Keeping up with SP Blogs
Use Search as Content Roll-up
Web browser compatibility in InfoPath Forms Services
Picture Library: Getting to the Thumbnails
All about dates and SPD
Data View Web Part, learn it... love it!
MSFT's SharePoint 2007 Buzz Kit
Content Query Web Part (CQWP) for All List Types
Content Query Web Part (CQWP) with Anonymous Access
My Blog is Live
Examples of Common Formulas
Creating a Form to Add Items to a SharePoint List
Building a Blog Host
Scaling to Extremely Large Lists
Configuring Email Alert Templates
Populating Form Data from SharePoint List Views
SharePoint Designer Workflows and InfoPath Form Libraries
Restoring the Quick Launch Bar in Web Part Pages
Creating a Hyperlink to an InfoPath Form
Changes to SPD Created Workflows
How to find the CSS Class Applied to any SharePoint Element
Publishing an InfoPath 2007 Form Template to a Server Running InfoPath Forms Services
Why you Shouldn't Choose "Enable Rendering on a Mobile Device" when Publishing an InfoPath Form Template
Find Form Template for an Existing Library
Adding a Portal Breadcrumb to your My Site
Define Custom Permission Levels
Exchange 2003 Hotfix (Outlook 2007 and SP Alerts)
Copyright© 1997-2009 Mike Geyer
The posts on this weblog are provided “AS IS” with no warranties, and confer no rights. The opinions expressed herein are personal.