03.08.2010 Updated the article with another example on how to build the fields-object in a customized form.

This article describes how to use most of the solutions found in this blog with a customized form. The scripts which this article addresses, is the ones involving the function “init_fields()_v2”.

This was originally an answer to a comment in one of the articles.

I get this question a lot:
How can i use these scripts in a customized form?

The answer is simple, but i will explain it so that you understand why it’s not working.

This script relays in the function init_fields() to identify and “objectify” the form by it’s <TR> tags (table rows). What the function does is to find all the FieldInternalNames in the code by this “information-tag”:

<!-- FieldName="This is the DisplayName"
FieldInternalName="ThisIsTheFieldInternalName"
FieldType="SPFieldText"
-->

It then make an object which, when called with the FieldInternalName of a field, returns an object containing that table row (both formlabel and formtable).

When initiated like this:

fields = init_fields_v2();

You address a <TR> like this:

$(fields[FieldInternalName])

Where “FieldInternalName” is the FieldInternalName of your field. Read here how to identify the FieldInternalName.

This is the original function for use in standard SharePoint forms:

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

Customized form

When you modify the list form in SharePoint Designer, you loose the FieldInternalName and therefore the function init_fields_v2() does not return anything.

To address the fields on a custom form you have to find another way of addressing these fields and to “objectify” them in the same way as the script init_fields_v2(). Basically you could insert some kind of “identifier-attribute” on the <TR> tags, or you can go with the displayName – only remember that if you change the displayName – you have to update your script…

To use the a custom made ID attribute, replace the init_fields_v2() function with this one:

function init_fields_v2(){
  var res = {};
  $("td.ms-formlabel").each(function(){
  	var thisID = $(this).attr('id');
	  res[thisID] = $(this).parents('tr:first');
  });
  return res;
}

This approach requires that you add a unique ID attribute to the <TD> holding the formlabel. Here is an example of code from a customized form:

<table border="0" cellspacing="0" width="100%">
	<tr>
		<td width="190px" valign="top" class="ms-formlabel" id="TitleColumnCustomID">
			<H3 class="ms-standardheader">
				<nobr>Title<span class="ms-formvalidation"> *</span>
				</nobr>
			</H3>
		</td>
		<td width="400px" valign="top" class="ms-formbody">
			<SharePoint:FormField runat="server" id="ff1{$Pos}" ControlMode="New" FieldName="Title" __designer:bind="{ddwrt:DataBind('i',concat('ff1',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Title')}"/>
			<SharePoint:FieldDescription runat="server" id="ff1description{$Pos}" FieldName="Title" ControlMode="New"/>
		</td>
	</tr>
	<tr>
		<td width="190px" valign="top" class="ms-formlabel" id="ChoiceColumnCustomID">
			<H3 class="ms-standardheader">
				<nobr>MyChoiceColumn</nobr>
			</H3>
		</td>
		<td width="400px" valign="top" class="ms-formbody">
			<SharePoint:FormField runat="server" id="ff2{$Pos}" ControlMode="New" FieldName="MyChoiceColumn" __designer:bind="{ddwrt:DataBind('i',concat('ff2',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@MyChoiceColumn')}"/>
			<SharePoint:FieldDescription runat="server" id="ff2description{$Pos}" FieldName="MyChoiceColumn" ControlMode="New"/>
		</td>
	</tr>
</table>

Note the id attributes “TitleColumnCustomID” and “ChoiceColumnCustomID” in line 03 and 15.

To “get” the Title field you address it like this:

fields = init_fields_v2();
var myTitleField = $(fields['TitleColumnCustomID']);
alert(myTitleField.html());

Ask if anything is unclear.

Regards
Alexander