August 18, 2014 Brushed up the code example as it had some faulty quotes due to an error in the migration of the contents when I moved the blog some time ago.

25.03.2011 Fixed a bug in the DispForm code – thanks to Brian for noticing.

13.09.2010 Updated to support shared fields in the arrays – as requested by Larry.

This is a follow up on this article. You must read this article to get the basics before proceed with this one.

I will here give an example on how to use a multi select in stead of the single choice dropdown used in the previous article.

The only modification to the form from the previous , is the field “MySelect” which now should be changed to “Checkboxes (allow multiple selections)”.

The code for NewForm and EditForm should now be like this:

<!-- The jQuery version must be 1.6 or above -->
<script type="text/javascript" src="/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">

var fields = init_fields_v2();
// Arrays of fields to show or hide
var arrRed = ['ShowIfRed1','ShowIfRed2'];
var arrBlue = ['ShowIfBlue1','ShowIfBlue2'];

// Multiselect
$(fields['MySelect']).find('input').each(function(i){
	// On page load
	if(i==0){ // call this only once
		multiSelectdynamicDisplay($(this));
	}
	// Add onclick
	$(this).click(function(){
		multiSelectdynamicDisplay($(this));
	});
});

function multiSelectdynamicDisplay(inp){
	var objChecked = {};
	var arrToHide = [];
	var arrToShow = [];
	var inpAll = inp.parents('td.ms-formbody:first').find('input');
	$.each(inpAll,function(){
		objChecked[$(this).next().text()] = $(this).prop('checked');
	});
	// Check each option
	if(objChecked['Red']){
		arrToShow = arrToShow.concat(arrRed);
	}else if(!objChecked['Red']){
		arrToHide = arrToHide.concat(arrRed);
	}
	
	if(objChecked['Blue']){
		arrToShow = arrToShow.concat(arrBlue);
	}else if(!objChecked['Blue']){
		arrToHide = arrToHide.concat(arrBlue);
	}	
	if(objChecked['Yellow']){
		//alert("No array defined for "Yellow"");
	}else if(!objChecked['Yellow']){
		// Has no array defined
	}
	// Hide
	toggleArr(arrToHide,true);
	// Show
	toggleArr(arrToShow,false);
}

function toggleArr(arr,hide){
	if(hide){
		for(i=0;i<arr.length;i++){
			$(fields[arr[i]]).hide();
		}
	}else if(!hide){
		for(i=0;i<arr.length;i++){
			$(fields[arr[i]]).show();
		}
	}
}

function init_fields_v2(){
	var res = {};
	$("td.ms-formbody").each(function(){
	var myMatch = $(this).html().match(/FieldName="(.+)"\s+FieldInternalName="(.+)"\s+FieldType="(.+)"\s+/);	
		if(myMatch!=null){
			// Display name
			var disp = myMatch[1];
			// FieldInternalName
			var fin = myMatch[2];
			// FieldType
			var type = myMatch[3];
			if(type=='SPFieldNote'){
				if($(this).find('script').length>0){
					type=type+"_HTML";
				}else if($(this).find("div[id$='TextField_inplacerte']").length>0){
					type=type+"_EHTML";
				}				
			}
			if(type==="SPFieldLookup"){
				if($(this).find("input").length>0){
					type=type+"_Input";
				}
			}
			// HTML Calc
			if(type==='SPFieldCalculated' && $(this).text().match(/(<([^>]+)>)/ig)!==null){
				$(this).html($(this).text());
			}		
			// Build object
			res[fin] = this.parentNode;
			$(res[fin]).attr('FieldDispName',disp);
			$(res[fin]).attr('FieldType',type);
		}		
	});
	return res;
}
</script>

The code for DispForm should now be like this:

<script type="text/javascript" src="/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
var fields = init_fields_v2();
// Arrays of fields to show or hide
var arrRed = ['Title','ShowIfRed1','ShowIfRed2'];
var arrBlue = ['Title','ShowIfBlue1','ShowIfBlue2'];

// Hide all onload
var arrToHide = [];
arrToHide = arrToHide.concat(arrRed,arrBlue);
toggleArr(arrToHide,true);

// Find the ones selected
var c = $(fields['MySelect']).find('.ms-formbody').text().replace(/xA0/g,'');
cSplit = c.split('; ');
$.each(cSplit,function(idx,color){
	dynamicDisplay($.trim(color));
});

function dynamicDisplay(color){
var arrToShow = [];
	if(color=='Red'){
		arrToShow = arrToShow.concat(arrRed);
	}	
	if(color=='Blue'){
		arrToShow = arrToShow.concat(arrBlue);
	}	
	if(color=='Yellow'){
		// No array defined
	}
	// Show
	toggleArr(arrToShow,false);
}

function toggleArr(arr,hide){
  if(hide){
    for(i=0;i<arr.length;i++){
      $(fields[arr[i]]).hide();
    }
  }else if(!hide){
    for(i=0;i<arr.length;i++){
      $(fields[arr[i]]).show();
    }
  }
}

function init_fields_v2(){
	var res = {};
	$("td.ms-formbody").each(function(){
	var myMatch = $(this).html().match(/FieldName="(.+)"\s+FieldInternalName="(.+)"\s+FieldType="(.+)"\s+/);	
		if(myMatch!=null){
			// Display name
			var disp = myMatch[1];
			// FieldInternalName
			var fin = myMatch[2];
			// FieldType
			var type = myMatch[3];
			if(type=='SPFieldNote'){
				if($(this).find('script').length>0){
					type=type+"_HTML";
				}else if($(this).find("div[id$='TextField_inplacerte']").length>0){
					type=type+"_EHTML";
				}				
			}
			if(type==="SPFieldLookup"){
				if($(this).find("input").length>0){
					type=type+"_Input";
				}
			}
			// HTML Calc
			if(type==='SPFieldCalculated' && $(this).text().match(/(<([^>]+)>)/ig)!==null){
				$(this).html($(this).text());
			}		
			// Build object
			res[fin] = this.parentNode;
			$(res[fin]).attr('FieldDispName',disp);
			$(res[fin]).attr('FieldType',type);
		}		
	});
	return res;
}
</script>

This article is, as mentioned above, a follow up on anther article. Read the previous article to get the basics.

Ask if anything is unclear.

Regards
Alexander

In another post i received a request on how to identify the content type in NewForm to execute “content type specific code”. Here’s a quick description of one method.

The method relies on a script, init_fields(), which loops trough all fields in the form and makes an object of all table rows and their HTML. This way all fields can be addressed by their FieldInternalName, returning the full HTML of that field.

The function init_fields() is a modified version of Erucy’s function for finding fields in a SharePoint form. My modified version uses FieldInternalName rather than DisplayName to locate the fields.

As always we start like this:
Create a document library to hold your scripts (or a folder on the root created in SharePoint Designer). In this example i have made a document library with a relative URL of “/test/English/Javascript” (a sub site named “test” with a sub site named “English” with a document library named “Javascript”):

The jQuery-library is found here. The pictures and the sourcecode refers to jquery-1.3.2.min. If you download another version, be sure to update the script reference in the sourcecode.

The code below uses the FieldInternalName of a specific field to ensure that the field is rendered – if so – it executes the code wrapped in that “if-statement”. The field used to identify the ContentType must reside only in that content type.

Add a CEWP below – it is essential that it is placed below – your list-form as briefly described here, and add this code:

<script type="text/javascript" src="/test/English/Javascript/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
fields = init_fields();
/*
 This example shows how you can check what ContentType is used by checking if
 a field you know is in that specific ContentType is rendered
*/

// Check if the field with FieldInternalName of "OnlyInContentType1" is rendered
if(fields['OnlyInContentType1']!=undefined){
	alert("This is content type nr 1");
	// Execute any code that addresses the first content type
}

// Check if the field with FieldInternalName of "OnlyInContentType2" is rendered
if(fields['OnlyInContentType2']!=undefined){
	alert("This is content type nr 2");
	// Execute any code that addresses the second content type
}

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>

The code above does work in NewForm, DispForm and EditForm.

To get the “FriendlyName” of the content type in DispForm or EditForm you can use the script below. This script also enables you to hide the “Content type selector” from EditForm.

<script type="text/javascript" src="/test/English/Javascript/jquery-1.3.2.min.js"></script>
<script type="text/javascript">

// This example shows how you can get the "FriendlyName" of the ContentType
// You can optionally hide the "ContentType selector from EditForm"

// Get the name and hide the selector
var contentType = getContentFriendlyNameOptionalHide(true);
alert(contentType);

function getContentFriendlyNameOptionalHide(hide){
if(hide){
	$("select[id$='ContentTypeChoice']").parents('tr:first').hide();
}
	// EditForm
	var value = $("select[id$='ContentTypeChoice']").find('option:selected').text();
	// DispForm
	if(value==''){
		value = $("span[id$='InitContentType']").text();
	}
return value;
}
</script>

Ask if something is unclear.

Regards
Alexander