Pages

Subscribe:

Monday, November 26, 2012

Populate the fields based on Drop Down selection in NewForm.aspx using JQuery


Before doing that add the JQuery.js and SPServices.js reference in the Master Page. 

Then add the following script in the NewForm.aspx of the List 

<script type="text/javascript">
$(document).ready(function(){
        
         $().SPServices.SPDisplayRelatedInfo({
         columnName: "Project",
         relatedList: "Projects",
         relatedListColumn: "Title",
         relatedColumns: ["Client_x0020_Description","End_x0020_Date","ProjComments","Resources","Start_x0020_Date","Due_x0020_Date","Title"],
         displayFormat: "list",
         headerCSSClass: "ms-hidden",
        rowCSSClass:"ms-hidden",
        completefunc: SetFields
        });
});

function SetFields(){  
        
//Get the IDs of the fields to which you want to set the values
            var txtDescription = document.getElementById('ctl00_m_g_ff38e82a_f0dd_4c96_bd29_92038b50b4fb_ctl00_ctl04_ctl03_ctl00_ctl00_ctl04_ctl00_ctl00_TextField');
            var txtComment = document.getElementById('ctl00_m_g_ff38e82a_f0dd_4c96_bd29_92038b50b4fb_ctl00_ctl04_ctl12_ctl00_ctl00_ctl04_ctl00_ctl00_TextField');
            var txtAssignedTo= document.getElementById('ctl00_m_g_ff38e82a_f0dd_4c96_bd29_92038b50b4fb_ctl00_ctl04_ctl04_ctl00_ctl00_ctl04_ctl00_ctl00_UserField_downlevelTextBox');
         var txtEndDate = document.getElementById('ctl00_m_g_ff38e82a_f0dd_4c96_bd29_92038b50b4fb_ctl00_ctl04_ctl11_ctl00_ctl00_ctl04_ctl00_ctl00_DateTimeField_DateTimeFieldDate');
         var txtStartDate=document.getElementById('ctl00_m_g_ff38e82a_f0dd_4c96_bd29_92038b50b4fb_ctl00_ctl04_ctl08_ctl00_ctl00_ctl04_ctl00_ctl00_DateTimeField_DateTimeFieldDate');
         var txtDueDate=document.getElementById('ctl00_m_g_ff38e82a_f0dd_4c96_bd29_92038b50b4fb_ctl00_ctl04_ctl09_ctl00_ctl00_ctl04_ctl00_ctl00_DateTimeField_DateTimeFieldDate');
         var txtTitle=document.getElementById('ctl00_m_g_ff38e82a_f0dd_4c96_bd29_92038b50b4fb_ctl00_ctl04_ctl00_ctl00_ctl00_ctl04_ctl00_ctl00_TextField');
           
         $("div#SPDisplayRelatedInfo_Project td").each(function(index){
         debugger;
         switch(index)
         {
             case 0:
             var desc = $(this).html();
     //This is for the Multiline Rich Textbox in IE  $('#ctl00_m_g_ff38e82a_f0dd_4c96_bd29_92038b50b4fb_ctl00_ctl04_ctl03_ctl00_ctl00_ctl04_ctl00_ctl00_TextField_iframe').contents().find('body').text(desc);
         //This is for other browsers
             txtDescription.value = desc;
             break
            
             case 1:            
             var columnDate =$(this).html();
             var endDate = $.format.date(columnDate , "MM/dd/yyyy");            
            txtEndDate.value = endDate ;
            break;
            
             case 2:
             var comment = $(this).html();
         $('#ctl00_m_g_ff38e82a_f0dd_4c96_bd29_92038b50b4fb_ctl00_ctl04_ctl12_ctl00_ctl00_ctl04_ctl00_ctl00_TextField_iframe').contents().find('body').text(comment);
             txtComment.value = comment;
             break;
            
             case 3:
             var resource= "";
             $(this).find('a').each(function(){
                 resource = $(this).html()+ ";" + resource ;
                 txtAssignedTo.value = resource;
             $('#ctl00_m_g_ff38e82a_f0dd_4c96_bd29_92038b50b4fb_ctl00_ctl04_ctl04_ctl00_ctl00_ctl04_ctl00_ctl00_UserField_upLevelDiv').text(resource);                                    
             });
             break
            
                case 4:             
             var columnDate1 =$(this).html();                               
             var startdate = $.format.date(columnDate1, "MM/dd/yyyy");                          
            txtStartDate.value = startdate;
            break;
           
                case 5:             
             var columnDate2 =$(this).html();
             var Duedate = $.format.date(columnDate2 , "MM/dd/yyyy");       
        
            txtDueDate.value = Duedate;
            break;
           
                case 6:
                var titleval= $(this).html();
                txtTitle.value=titleval;
                break;        
         }          
     });
 };       

</script>

No comments:

Post a Comment