This project has moved and is read-only. For the latest updates, please go here.

Populating Notes field from Second Dropdown Selection

Dec 14, 2009 at 4:12 PM

The purpose of my form is to generate a basic trouble ticket.

I have a form with 3 fields.

The first is a Category dropdown (hardware, software, etc).

The second is a Summary dropdown (Software - Purchase, Software - Install, etc.)

The third is a Notes field (multi-line text) for asking the user for some predefined explanation.

Depending on the selection of second dropdown, I have specific text I need to propulate.

I have the cascading dropdown functionality working with the first two dropdowns.

Can anyone explain how to populate the notes field based on the second dropdown?

I do have the Notes text in a List with the matching Category and Summary fields.



Dec 14, 2009 at 4:52 PM


I don't have a canned function for this, but you could build it up with an SPServices call to GetListItems.  What you'd basically want to do is call GetListItems with the CAML to filter by the Summary value, returning the value you want from the Notes text list.  You can then parse out the resulting XML and pop the text into the Notes column in the DOM.  You can attach your code to the change event on Summary.  If you take a look at SPDisplayRelatedInfo's code, it might give you a decent starting point.


Dec 14, 2009 at 6:45 PM

OK. So technically I could create another 'case' for SPDisplayRelatedInfo to populate a Notes field?

 case "notes":
      var outString = "Please provide supporting information:";
      for (i=0; i < opt.relatedColumns.length; i++) {
       $(xData.responseXML).find("[nodeName=z:row]").each(function() {
        outString += "* " + relatedColumnsXML[i].attr("DisplayName") + " *";
        outString += "* " + showColumn(relatedColumnsXML[i], $(this).attr("ows_" + opt.relatedColumns[i]), opt) + " *";


      $("#Notes" + encodeColumn(opt.columnName)).html("").append(outString);

I'm just not sure on the correct append string there at the end.



Dec 14, 2009 at 7:02 PM

You're probably just about there. The selector in the line $("#Notes" + encodeColumn(opt.columnName)).html("").append(outString); is going to vary based on what type of Multiple lines of text column Notes is, meaning Rich Text, etc.  The selector won't be as simple as just an ID with the value of Notes, as you have above.


Dec 15, 2009 at 4:44 PM

OK. Figured it out.

Created a new 'CASE' for SPDisplayRelatedInfo. Note: This is hardcoded to look for a multiline textbox named "Notes"

// append to Notes field
      case "notes":
      var outString = "Please provide supporting information:"; // This does display on page load

      // Get relevant Notes from relatedlist
      for (i=0; i < opt.relatedColumns.length; i++) {
       $(xData.responseXML).find("[nodeName=z:row]").each(function() {
       // outString += "* " + relatedColumnsXML[i].attr("DisplayName") + " *";
        outString += "* " + showColumn(relatedColumnsXML[i], $(this).attr("ows_" + opt.relatedColumns[i]), opt) + " *";
      // alert(outString); Debugging
      setTextFromFieldName("Notes", "" + outString + "");   

// end of new 'CASE'

At the end of the jquery.SPServices-0.4.6.js, I have added the following functions:

  // Find the Notes field
 function setTextFromFieldName(fieldName, value) { 
  if (value == undefined) return;  
 // alert(value);
 var theTextBox = getTagFromIdentifierAndTitle("textarea","",fieldName);theTextBox.value=value
    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;


 // End of new functions

Here's the actual call from the Form page:

 columnName: "",
 relatedList: "",
 relatedListColumn: "",
 relatedColumns: [""],
 displayFormat: "notes", // new case


Hope this helps.



Dec 15, 2009 at 4:56 PM

Glad you got it working!

jQuery selectors make it much easier to find and set things in the DOM that JavaScript.  For instance, rather than your function call setTextFromFieldName("Notes", "" + outString + "");, you could use a jQuery selector and set the html, probably in one simple line of code.


Feb 23, 2010 at 12:27 PM

Hi Team:

I have One dd box and one text box In new item aspx

When user chnage the dd box the textbox need to be filled.

Let me know how to do the same



Feb 23, 2010 at 5:10 PM

@pgopal: What you're trying to do can be done without SPServices. I read your question as setting the value of a text box to a particular value when x is picked from the dropdown. Take a look at the jQuery documentation, in particular the .change() event and val() attribute. Your logic would be something along the lines of: on dropdown change, if value equals x, text field value equals y. This is all accomplished easily with OOTB jQuery.

Feb 23, 2010 at 5:37 PM

I did accomplish this if you read my previous reply above.

Feb 23, 2010 at 6:16 PM

Yes, I did see your reply, I was answering pgopal who jumped on the end of your thread with a different question.

Apr 30, 2012 at 5:06 PM

This is exactly what I need.  Do you have a step-by-step in a blog post?  I need to loop through a "multiple lines of text" field.