Get field value for all SharePoint FieldTypes or set field as read only in EditForm

16.10.2010 The function getFieldValue is posted in another – more updated – version here.

29.04.2010 Updated the code for the file “GetFieldValueOrSetAsReadonly.js” to support “SPFieldUserMulti” and for getting the field value in DispForm.

---

I have had several requests for a solution for setting fields as read only in EditForm. I have created this script to achieve this.

This script enables you to get the field value for any SharePoint field type in EditForm, and to set the field as read only by grabbing it’s value, hiding the <TD>, and adding a clean <TD> with the value in it’s place.

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.4.2.min. If you use another version, please update the reference in the code.

Read here how to add a CEWP to EditForm, and how to get the FieldInternalNames for your fields.

Add this code to a CEWP below the EditForm:

<script type="text/javascript" src="/test/English/Javascript/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/test/English/Javascript/GetFieldValueOrSetAsReadonly.js"></script>
<script type="text/javascript">
// Array of FieldInternalNames to make readonly
var arrToMakeReadOnly = ['Title','MySelect','MyPeoplePicker','Lookup','Bool','Hyperlink','DateTime','Multiline'];

// The function call must be wrapped in the "$(document).ready" to work with complex field types
$(document).ready(function(){
	readOnlyFieldArray(arrToMakeReadOnly);
});
</script>

The above code sets all fields in the array “arrToMakeReadOnly” as readonly. To simply get a fields value, do it like this:

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

// The function call must be wrapped in the "$(document).ready" to work with complex field types
$(document).ready(function(){
	var myValue = getFieldValue("Insert the FieldInternalName of your field here");
});
</script>

To get a fields value in DispForm, do it like this:

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

	var myValue = getFieldValue("Insert the FieldInternalName of your field here","disp");

</script>

The sourcecode for the file “GetFieldValueOrSetAsReadonly.js”:

/* Get field value for all field types, or set as readonly in EditForm 
 * ---------------------------------------------
 * Created by Alexander Bautz
 * alexander.bautz@gmail.com
 * http://sharepointjavascript.wordpress.com
 * v1.1
 * LastMod: 29.04.2010
 * LastChange: Supporting "SPFieldUserMulti" and for getting the field value in DispForm
 * ---------------------------------------------
 * Include reference to jquery - http://jquery.com
 * ---------------------------------------------
 * Call from a CEWP below the list form in EditForm like this:
	<script type="text/javascript" src="/test/English/Javascript/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="/test/English/Javascript/readOnlyForSharepointFields.js"></script>
	<script type="text/javascript">
	// Array of FieldInternalNames to make readonly
	var arrToMakeReadOnly = ['Title','MySelect','MyPeoplePicker','Lookup','Bool','Hyperlink','DateTime','Multiline'];
	
	// The function call must be wrapped in the "$(document).ready" to work with complex field types
	$(document).ready(function(){
		redOnlyField(arrToMakeReadOnly);
	});
	</script>
*/

function readOnlyFieldArray(arrayOfFieldInternalNames){
	$.each(arrayOfFieldInternalNames,function(i,fin){
		var fieldValue = getFieldValue(fin);
		if(!fieldValue)return false;
		thisField=$(fields[fin]);
		// Strip off any "formvalidation star"		
		thisField.find('.ms-formlabel span.ms-formvalidation').remove();
		// Set as "readOnly"
		thisField.find('td.ms-formbody').hide().after("<td class='ms-formbody' style='width:450px'>"+fieldValue+"</td>");
	});
}

function getFieldValue(fin,edit_OR_disp){
// If not already done - init all fields
if(typeof(fields)=='undefined')fields = init_fields();
// Return if FieldInternalName is not found
if(fields[fin]==undefined)return;
var thisField = $(fields[fin]);
// If "edit_OR_disp" is undefined, default to "edit"
if(edit_OR_disp==undefined)edit_OR_disp='edit';
	if(edit_OR_disp=='disp'){ // If "disp"
		var valRaw = $(fields[fin]).find('.ms-formbody').text();
		return (valRaw.replace(/[ \xA0]+$/,'')=='')?'':valRaw.replace(/[ \xA0]+$/,'');
	}else{ // If "edit"		
		var fieldType = $(fields[fin]).attr('FieldType');
		if(fieldType==undefined){
			alert("The attribute \"FieldType\" is missing.\nEnsure the function init_fields() used is the one included in the file \"GetFieldValueOrSetAsReadonly.js\".");
			return false;
		}
		returnVal = '';		
		switch(fieldType){
			case 'SPFieldText':
			case 'SPFieldNumber':
			case 'SPFieldCurrency':
				returnVal = thisField.find('input').val();
			break;
			case 'SPFieldChoice':
				if(thisField.find('input:radio').length>0){
					returnVal = thisField.find('input:radio:checked').next().text();
				}else{
					returnVal = thisField.find('select').val();
				}
			break;
			case 'SPFieldMultiChoice':
				var multiChoice = [];
				thisField.find('input:checkbox:checked').each(function(i,opt){
					opt = $(opt);
					multiChoice.push(opt.next().text());
				});
				returnVal = multiChoice.join('<br />');
			break;
			case 'SPFieldUser':
				var myPeoplePicker = thisField.find("div[id='divEntityData']");
				returnVal = myPeoplePicker.attr('displaytext');
				returnVal = (returnVal!=undefined)?returnVal:'';
			break;
			case 'SPFieldUserMulti':
				var userMulti = [];
				thisField.find("div[id='divEntityData']").each(function(i,div){
					thisVal = $(div).attr('displaytext');
					if(thisVal!=undefined){
						userMulti.push(thisVal);
					}				
				});
				returnVal = userMulti.join('<br />');
			break;
			case 'SPFieldLookup':
				if(thisField.find('select').length>0){
					returnVal = thisField.find('select option:selected').text();
				}else{
					returnVal = thisField.find('input').val();
				}
			break;
			case 'SPFieldLookupMulti':
				var lookupMulti = [];
				thisField.find("select:last option").each(function(i,opt){
					opt = $(opt);
					lookupMulti.push(opt.text());
				});
				returnVal = lookupMulti.join('<br />');
			break;
			case 'SPFieldBoolean':			
				returnVal = (thisField.find('input').attr('checked')==true)?true:false;
			break;
			case 'SPFieldURL':
				var link = thisField.find('input:first').val();
				var descr = thisField.find('input:last').val();
				returnVal = "<a href='"+link+"'>"+descr+"</a>";
			break;
			case 'SPFieldDateTime':
				var date = thisField.find('input:first').val();
				var hour = thisField.find('select:first option:selected').val()
					hour = (hour==null)?'':hour.match(/^[\d]+/)+":";
				var AMPM = thisField.find('select:first option:selected').val()
					AMPM = (AMPM==null)?'':AMPM.match(/AM|PM/);
				var minutes = thisField.find('select:last option:selected').val();
					minutes = (minutes==null)?'':minutes;
				returnVal = date+" "+hour+minutes+" "+AMPM;
			break;
			case 'SPFieldNote':
				returnVal = thisField.find('textarea:first').val();
			break;
			case 'customHeading':
				returnVal = '';
			break;
			default:			
			returnVal = "Unknown fieldType: <strong>"+fieldType+"</strong>, please check the script.";
		}
		if(returnVal==='')returnVal="&nbsp;";
		return returnVal;
	}		
}

function init_fields(){
	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";
				}
			}
			if(type=='SPFieldLookup'){
				if($(this).find('input').length>0){
					type=type+"_Input";
				}
			}
			// Build object
			res[fin] = this.parentNode;
			$(res[fin]).attr('FieldDispName',disp);
			$(res[fin]).attr('FieldType',type);
		}		
	});
	return res;
}

Save as “GetFieldValueOrSetAsReadonly.js”, mind the file extension, and upload to the scriptlibrary as shown above.

Note!
The function init_fields() used in this code is the new one posted here: Revised function init_fields()

It has additional functionality not found in previous versions. Be sure to update the function if adding this to existing code.

Ask if anything is unclear

Regards
Alexander