Changing the design of Newform and Editform using javascript

Javascript to convert the newform and editform table structure as 2x2 matrix.

Introduction

 

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: