Using Javascript to Manipulate a List Form Field

Using Javascript to Manipulate a List Form Field

Rate This

Hi, my name is Rob Howard, and I’m a Program Manager with the SharePoint Designer team. Like several of the other people posting here, I also built many of the Application Templates for Windows SharePoint Services.

If you’re familiar with them, you may have noticed that in several of the application templates we use a bit of Javascript to set default form values based on the query string. Because we found this to be useful in many different cases throughout our applications, I wanted to share our method with you guys so that you can include it in the applications you develop.

When might you use this?

It’s pretty easy to set a field’s default value through the list settings in the browser UI, so why might you need Javascript to set a default field value? The reason is that field default values can only take static values or simple formulae based on the current user or today’s date. If that meets your needs, then I’d definitely recommend sticking with that method. Sometimes, though, you may want the form to fill with default values based on the user’s interaction with the previous page, and that’s exactly where this method comes in.

How does it work?

In short, we add some Javascript to the page that runs when the body is loaded. This Javascript parses the page’s query string, locates the HTML objects that are rendered by the relevant SharePoint fields, and sets their value based on the information in the query string.

getTagFromIdentifierAndTitle

The most important part of our solution is the “getTagFromIdentifier” function. This function finds the HTML element rendered by a given SharePoint FormField control. It takes the following parameters:

  • tagName – The name of the tag rendered in the form’s HTML
  • identifier – The string associated with the SharePoint type of the relevant field
  • title – The value of the relevant HTML tag’s “title” attribute, which also matches the field’s display name

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

*Lookups are a bit more complicated because Lookup FormFields render differently when the target list contains more than 20 items. See the end of the post for an example.

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;

}

fillDefaultValues

Now that we have the HTML elements that we want to set, we need the values with which to set them. In our solution, we wrote the “fillDefaultValues” function, which parses the page’s querystring and then uses the values to set the field defaults.

function fillDefaultValues() {

  var qs = location.search.substring(1, location.search.length);

  var args = qs.split("&");

  var vals = new Object();

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

  } 

  // Set HTML element default values here

}

_spBodyOnLoadFunctionNames

In most cases SharePoint pages are based on a master page that contains the “body” element. These content pages can’t directly add a function to the body’s onload event. In order to work around this limitation, SharePoint provides the “_spBodyOnLoadFunctionNames” array. When the body is loaded, the onload event handler executes each function whose name is contained in this array. We added “fillDefaultValues” to the array so that it would run when the body’s onload event fires.

_spBodyOnLoadFunctionNames.push("fillDefaultValues");

All Together Now

With the script above, you can set most different field types to any value from the querystring – or any other source that javascript can access. Below is a full example of the script we use to set the default value of a Lookup field based on an ID stored in the querystring. You’ll notice that 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.

Enjoy!

<script type="text/javascript">

 

// This javascript sets the default value of a lookup field identified

// by <<FIELD DISPLAY NAME>> to the value stored in the querysting variable

// identified by <<QUERYSTRING VARIABLE NAME>>

 

 

// Customize this javascript by replacing <<FIELD DISPLAY NAME>> and

// <<QUERYSTRING VARIABLE NAME>> with appropriate values.

// Then just paste it into NewForm.aspx inside PlaceHolderMain

 

_spBodyOnLoadFunctionNames.push("fillDefaultValues");

 

function fillDefaultValues() {

  var qs = location.search.substring(1, location.search.length);

  var args = qs.split("&");

  var vals = new Object();

  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("<<FIELD DISPLAY NAME>>", vals["<<QUERYSTRING VARIABLE NAME>>"]);

}

 

function setLookupFromFieldName(fieldName, value) {

  if (value == undefined) return;

  var theSelect = getTagFromIdentifierAndTitle("select","Lookup",fieldName);

 

// if theSelect is null, it means that the target list has more than

// 20 items, and the Lookup is being rendered with an input element

 

  if (theSelect == null) {

    var theInput = getTagFromIdentifierAndTitle("input","",fieldName);

    ShowDropdown(theInput.id); //this function is provided by SharePoint

    var opt=document.getElementById(theInput.opt);

    setSelectedOption(opt, value);

    OptLoseFocus(opt); //this function is provided by SharePoint

  } else {

    setSelectedOption(theSelect, value);

  }

}

 

function setSelectedOption(select, value) {

  var opts = select.options;

  var l = opts.length;

  if (select == null) return;

  for (var i=0; i < l; i++) {

    if (opts[i].value == value) {

      select.selectedIndex = i;

      return true;

    }

  }

  return false;

}

 

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>

  • I had a small project in SharePoint 2007 where I needed to pull in Querystring variables from a URL into

  • The tagName for a multiple lines of text field seems to be "textarea".

    When i passed "input" as the tagName for a multi line text box, the multi line field were not being returned.

    It works with "textarea".

  • I have being trying to assign a value to a multi line text box using a javascript function.

    the value should get set when the user click on a link in the page.

    I could not set the value after the page is rendered.

    When I used _spBodyOnLoadFunctionNames.push() to execute the same javascript function on body load, the value is being set correctly.

    The same is not happening when the javascript function is called after the page is rendered(i.e. when the user clicks the link)

    Does anybody have any lead on this

  • Same as Jason's question, does anyone know where a complete list of SharePoint Field Type identifiers are?

    Thanks.

  • Does anyone know the identifier for a HiddenField?

  • I've also found a way to get a reference to a <strong>Radio Buttons Choice</strong> field type that was tricky to get at since it doesn't use the 'Title' attribute. Please see below:

    <a href="http://blog.markuso.com/posts/9/using-javascript-to-access-a-list-form-field-in-sharepoint-designer/">http://blog.markuso.com/posts/9/using-javascript-to-access-a-list-form-field-in-sharepoint-designer/</a>

  • I've also found a way to get a reference to a Radio Buttons Choice field. It was tricky to get at since it doesn't use the 'Title' attribute. Please see below:

    http://blog.markuso.com/posts/9/using-javascript-to-access-a-list-form-field-in-sharepoint-designer/

  • Thank you for the great script!  Does anyone know how to get the time portion of a date/time field (DateTimeFieldDate)?

  • Using Script from http://blog.markuso.com/posts/9/using-javascript-to-access-a-list-form-field-in-sharepoint-designer/

    how can i use?

    Original Poste (October 11, 2007 10:46 AM Denis Kitchen)

    var assignedToInput = getTagFromIdentifierAndTitle("div", "", "People Picker");

    assignedToInput.innerHTML = vals["Assigned_To"];

    So far I have this..... but it does not work and does not reference the particular one I need.... I am just trying to hide it.

       var tagName = "div"

       var identifier = ""

       var FieldName = "People Picker"

       var control = getTagFromIdentifierAndTitle(tagName,identifier,FieldName, Option);

       control.style.display=“none”;

    ------------------------------------------------------------------------------------------------------------------------

    Also note another method from CleverWorkarounds that might be usable......by someone who understands it.  I could not.

    http://www.cleverworkarounds.com/category/sharepoint/application-development/javascript/

    What they have noticed is every contol SharePoint creates marks it with a commented name.  So by searching for the commented name you should be able to locate the control with in that area perdicably per each control... I just lack understand of the code and it use/syntax to figure out why it does not work for me.

    function findacontrol(FieldName) {

      var ctrl = null;

      var arr = document.getElementsByTagName(‘!’);//get all comments

    for (var i=0;i < arr.length; i++ )

      {

         // now match the field name

          if (arr[i].innerHTML.indexOf(FieldName) > 0) {

             return arr[i];

          }      

      }

    }

    function hideFields() {

         var control = findacontrol(“Device Name”);

         control.parentNode.parentNode.style.display=“none”;

         control = findacontrol(“Comments”);

         control.parentNode.parentNode.style.display=“none”;}

         control = findacontrol(“Options”);

         control.parentNode.parentNode.style.display=“none”;}

    }

  • Wow, what a day.&#160; Some highlights: Kurt DelBene gave another keynote address following Bill Gates

  • Hi

    can you send me some code

    any user create only 1 item in lookup kist box

  • Good post, thanks for this.  It works well.

    However, I want to set a default value of a lookup field in a publishing page, only the first time a user creates the page.

    First problem, is setting the field value by actual value of the field, not the index.  Currently the comparison and assignemnt is done based on ID.  How can I assign a string value to the field?

    Second, this default value is set every time a user renders the page.  I need to find a way where the default value is only set the first time a page is created.

    Any help would be appreciated.

  • Great, Great Great. I combined this with a Insert Template and Magic !!!. Thanks very much.

  • hi Matt,

    From the earlier postings i understand that you had a problem with People field.

    Were u able to find the solution???

    i am facing the same problem.

    I have 3 to 4 user fields in my newform.aspx, how do i find them through javascript and set the default values.

    any help frm anybody would be appreciated..

  • thanks for the nice article. helped me out... yet i still have a javascript problem with sharepoint:

    I have a publishing site with some pages. i wanted to do something basic stuff like toggling a div visibility when someone clicks a link. i managed to include the javascript function in the page (in the ArticleLinks.aspx page... adding it to the master did not do the job) but looks like there is no way to call the javascript function from the page!

    each time i edit the page and go into the source code... adding the javascript function call to the URL or the OnClick is always removed... this is so annoying!!!

    such a thing should take 5 mintues and untill now it took me 4 hours...

    apperciate if you could help out with this,

    Ramadan

Page 4 of 12 (167 items) «23456»
Leave a Comment
  • Please add 1 and 7 and type the answer here:
  • Post