Add individual label for each choice in multichoice list


This post describes how to add individual labels for each choice in a multi choice list.
This is a follow-up on the post on how to modify formlabel in SharePoint form.

The end result looks like this:
IMG

Read the previous post to get the basics, then modify the code like this:

<script type="text/javascript" src="/test/English/Javascript/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
fields = init_fields();

var myNewLabel = "<br><div>Here is some custom text added by adressing the formlabel with jQuery!</div>" +
				 "<br><div>You can insert images to:<br><img src='/test/English/Shared%20Documents/jQuery_img.jpg' border='0'></div>"

$(fields['MyChoice']).find(".ms-formlabel h3").after(myNewLabel);

// Array of all descriptions - must be the same number of elements as the number of choices in the choice-list
var arrMyChoice = ['Description for choice 1',
				'Description for choice 2',
				'Description for choice 3',
				'Description for choice 4',
				'Description for choice 5',
				'Description for choice 6',
				'Description for choice 7',
				'Description for choice 8',
				'This is the longest: Description for choice 9',
				'Description for choice 10',
				'Description for choice 11',
				'Description for choice 12',
				'Description for choice 13',
				'Description for choice 14',
				'Description for choice 15',
				'Description for choice 16',
				'Description for choice 17',
				'Description for choice 18',
				'Description for choice 19',
				'Description for choice 20'];

// Call the script that inserts the descriptions
descriptionBeforeChoice('MyChoice',arrMyChoice,300);

function descriptionBeforeChoice(FieldInternalName,arrName,widthOfCustomLabel){
	$(fields[FieldInternalName]).find(".ms-formbody").find(":checkbox").each(function(idx){
		// Add alternating style to make it easier to follow the lines in the form
		var trClass = '';
		if(idx%2==0){
			trClass = 'ms-alternatingstrong';
		}
		$(this).before("<span style='display:inline-block;width:" + widthOfCustomLabel + ";white-space:nowrap'>" + arrName[idx] + "</span>")
			.parent().css({'white-space':'nowrap'})
			.parents('tr:first').addClass(trClass);
	});
}

function init_fields(){
  var res = {};
  $("td.ms-formbody").each(function(){
	  if($(this).html().indexOf('FieldInternalName="')<0) return;	
	  var start = $(this).html().indexOf('FieldInternalName="')+19;
	  var stopp = $(this).html().indexOf('FieldType="')-7; 
	  var nm = $(this).html().substring(start,stopp);
	  res[nm] = this.parentNode;
  });
  return res;
}
</script>

Follow up: Get variables in a script from another list

Feel free to ask if anything is unclear!
Alexander

12 Responses to “Add individual label for each choice in multichoice list”

  1. Charlie Epes Says:

    Hi Alexander:
    Thanks for this too!

    I have a basic JQuery question for this and any other solution you have devised…

    Can the options that appear under the “var arrMyChoice” portion of your script reference options that might come from another List?… so the List can be the control for the options, instead of the script?

    Thanks-

    Charlie Epes
    Buffalo, NY

  2. Alexander Says:

    Look here for your answer:
    Get variables in a script from another list

    Alexander

  3. larry Says:

    its your favorite pain in the butt. what would it take to make this script display the description , after the field and after the field label. when I change line 42 from before to after it writes the description between the field and field label.

  4. Alexander Says:

    Larry,
    The checkbox and it’s lable are two separate objects, try it like this:

    $(this).next().after(...
    

    Alexander

  5. larry Says:

    that was perfect. what I did was take you wrap choice script and added this to the page. it flows much cleaner.

    thanks again

  6. larry Says:

    I see in this script you have some what accomplished it but I can not duplicate it. I like the alternating row color. I am not using this script, but I do want to apply a row color to several fields. I have 10 groups of fields. each group has 5 fields attached. each label ends with a number. so group one fields will all end in 1, Activity1, Owner1… I was trying to do this:
    $(fields['Activity1']).find(“tr .ms-formlabel”).css(“background-color”, “#FFE59C”);
    it applies the color but only to the first column (for that field) and I am not sure how to do the row like you did here:
    “.parent(‘tr:first’).addClass(trClass); ”

    I know the “^” means like, but cant figure out how to apply it here so I can color each group.

    then there is the alternating color, can I still use “idx mod 2″ to alternate row color by row and group?

    • Alexander Says:

      Hi,
      The color is added by adding the class “ms-alternatingstrong” (the same class used in the list view style “shaded”) to every other row. The “function” that does this is found between line 38-41, and the class is added to the “tr” in line 44. The “class” will be an empty string for every other row, and “ms-alternatingstrong” for the rest.

      To use this method you have to make a “$.each(..” loop to iterate trough the rows adding this class.

      Note:
      To color the full row try this:

      $(fields['Activity1']).addClass('ms-alternatingstrong');
      

      Alexander

    • larry Says:

      that helped. How about fields with similar names. can I apply a class or color to multiple fields using the “^”?

    • Alexander Says:

      Hi Larry,
      Try this:

      <script type="text/javascript" src="/test/English/Javascript/jquery-1.3.2.min.js"></script>
      <script type="text/javascript">
      fields = init_fields();
      
      $.each(fields,function(FieldInternalName){
      	var fieldLastChar = FieldInternalName.charAt(FieldInternalName.length - 1);
      	if(fieldLastChar % 2 == 0){
      		$(fields[FieldInternalName]).addClass('ms-alternatingstrong');
      	}
      });
      
      function init_fields(){
        var res = {};
        $("td.ms-formbody").each(function(){
      	  if($(this).html().indexOf('FieldInternalName="')<0) return;
      	  var start = $(this).html().indexOf('FieldInternalName="')+19;
      	  var stopp = $(this).html().indexOf('FieldType="')-7;
      	  var nm = $(this).html().substring(start,stopp);
      	  res[nm] = this.parentNode;
        });
        return res;
      }
      </script>
      

      It iterates trough all fields and adds the class “ms-alternatingstrong” to all fields ending on an even number.

      Alexander

    • larry Says:

      perfect, thanks a million

  7. larry Says:

    k, last question on this. This will only add color to the first column. How can I carry the color over the the field column, the entire row?

    • Alexander Says:

      Hi,
      I looked at it and my first solution is to remove the class “ms-formbody” as it overrides other css-styles added. If you do that you have to readd css to have alignment and border etc.

      The css for the “ms-formbody” is as follows:

      .ms-formbody {
      -moz-background-clip:border;
      -moz-background-inline-policy:continuous;
      -moz-background-origin:padding;
      background:#EBF3FF none repeat scroll 0 0;
      border-top:1px solid #D8D8D8;
      font-family:verdana;
      font-size:0.7em;
      padding:3px 6px 4px;
      vertical-align:top;
      }
      

      If you replicate it and edit the “background”, you should get it.

      Alexander

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Connecting to %s


Follow

Get every new post delivered to your Inbox.

Join 435 other followers