SharePoint form: present fields side-by-side

I got this request from Khan:

Alexander,
… Another question I have is how I can display two fields (and their labels) in the same row? I know I am asking too much. But I really hope you can give me some advice o this. Thanks man.

Here is an image of a few random fields put side-by-side:

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.

Add a CEWP below your NewForm/DispForm/EditForm with this code:

<script type="text/javascript" src="/test/English/Javascript/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/test/English/Javascript/FieldsSideBySide.js"></script>
<script type="text/javascript">
  // Append fields to the field "User"
  arrToPutSideBySide = ['StartTime','EndTime'];
  customSideBySide(arrToPutSideBySide,'User');
  // Appends another set of fields to the field "User"
  arrToPutSideBySide = ['FirstName','MiddleName','LastName'];
  customSideBySide(arrToPutSideBySide,'User');

  // To append the fields to the top use this code:
  //arrToPutSideBySide = ['FirstName','MiddleName','LastName'];
  //customSideBySide(arrToPutSideBySide,'',true);
</script>

This code is not the full code from the screenshot above. Each horizontal “section” is made with a separate call to the function “customSideBySide()”.

Parameters explained:

• arr: Array or fields to put in one line.
• insertAfterField: If you want to append the fields below another field, insert the FieldInternalName here. Set this parameter to “” if you want to use the next parameter.
• appendToTop: To insert the fields in the top of the form, set it to true. To insert at the bottom of the form, set it to false.

The sourcecode for the file “FieldsSideBySide.js” looks like this:

/* Sharepoint form: Present fields side-by-side
 * ---------------------------------------------
 * Created by Alexander Bautz
 * alexander.bautz@gmail.com
 * http://sharepointjavascript.wordpress.com
 * v1.0
 * LastMod: 26.01.2010
 * ---------------------------------------------
 * Must include reference to:
 *  jQuery - http://jquery.com
 * ---------------------------------------------
*/

function customSideBySide(arr,insertAfterField,appendToTop){
if(typeof(fields)=='undefined')fields = init_fields();
// Does the field specified as "insertAfterField" exist?
if(insertAfterField!='' && typeof(fields[insertAfterField])=='undefined'){
	alert("The FieldInternalName \"" + insertAfterField + "\", which is specified as \"insertAfterField\" does not exist.");
	return false;
}
	var str = '';
	$.each(arrToPutSideBySide,function(i,fin){
		// Check if FieldInternalName is correct
		if(typeof(fields[fin])=='undefined'){
			alert("The FieldInternalName \"" + fin + "\" does not exist.");
			return false;
		}
		// Adapt width of single line and multi lines of text
		if($(fields[fin]).html().indexOf('FieldType="SPFieldText"')>0){
			$(fields[fin]).find('input').css({'width':'100%'});
		}else if($(fields[fin]).html().indexOf('FieldType="SPFieldNote"')>0){
			$(fields[fin]).find('textarea').css({'width':'100%'});
		}
		var tdWidth = Math.round(100/arr.length);
		str += "<td class='ms-formbody' style='width:"+tdWidth+"%'>" + $(fields[fin]).find('.ms-formlabel').html() + $(fields[fin]).find('.ms-formbody').html() + "</td>";
		// Remove original field
		$(fields[fin]).remove();			
	});
	str = "<tr><td colspan='2'><table cellpadding='0' cellspacing='0' style='width:100%'><tr>" + str + "</tr></table></td></tr>";	
	if(insertAfterField!=''){
		$(fields[insertAfterField]).after(str);
	}else{
		if(appendToTop){
			$("table.ms-formtable tbody:first").prepend(str);
		}else{
			$("table.ms-formtable tbody:first").append(str);
		}
	}
}

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;
}

Save as “FieldsSideBySide.js” – mind the file extension, and upload to the script library as shown above.

Ask if something is unclear.

Regards
Alexander