Changing the design of Newform and Editform using javascript

This blog shows how to convert the default table structure of newform and editform into a 2x2 matrix based table

 

Required JS File

1. Latest jQuery library
2. Latest SPUtility.js file from codeplex

 Default New Form

 

 

Steps

1. Open the Newform.aspx for a list and click on Edit Page
2. Add a Content Editor Web part and add the <script src> for the above two JS files3.
   
3. Add the below code snippet

jQuery(document).ready(function() {

TablifyFields("FirstName", "BusinessUnit");

});

function TablifyFields(fromField, toField)
{
    jQuery(SPUtility.GetSPField(fromField).LabelRow).parent().css("display","block");

    var fromIndex = jQuery(SPUtility.GetSPField(fromField).LabelRow).index();
    var toIndex = jQuery(SPUtility.GetSPField(toField).LabelRow).index();

    var rowwidth = jQuery(SPUtility.GetSPField(fromField).LabelRow).parent().width();
    var trWidth = parseInt(rowwidth)/2 + "px";

    var tdwidth  = jQuery(SPUtility.GetSPField(fromField).LabelRow).children().eq(0).width();
    var tdWidth = parseInt(rowwidth)/2 - parseInt(tdwidth);

    var tBody = jQuery(SPUtility.GetSPField(fromField).LabelRow).parent().children();
    jQuery.each(tBody,function(index, value){
        if(index >= fromIndex && index <=toIndex)
        {
            ModifyFieldPosition(value, trWidth, tdWidth);
        }
    });

}

function ModifyFieldPosition(fieldtr, trwidth, tdwidth)
{
    jQuery(fieldtr).css("float","left");
    jQuery(fieldtr).css("width",trwidth);
    jQuery(fieldtr).children().eq(1).css("width",tdwidth+"px");
    var firsttdWidth = jQuery(fieldtr).children().eq(0).attr("width").replace("px","");
    var inputWidth = jQuery(fieldtr).children().eq(1).children().children().width();
    jQuery(fieldtr).children().eq(0).css("width",90/100*(parseInt(firsttdWidth))+"px");
    if(parseInt(inputWidth)>parseInt(tdwidth))
    {
        jQuery(fieldtr).children().eq(1).children().children().css("width",tdwidth+"px");
    }
}

 

Voila ! Customized New Form: