Dynamic expand/collapse fields or array of fields by multi select

August 18, 2014 Brushed up the code example as it had some faulty quotes due to an error in the migration of the contents when I moved the blog some time ago.


25.03.2011 Fixed a bug in the DispForm code – thanks to Brian for noticing.


13.09.2010 Updated to support shared fields in the arrays – as requested by Larry.


This is a follow up on this article. You must read this article to get the basics before proceed with this one.

I will here give an example on how to use a multi select in stead of the single choice dropdown used in the previous article.

The only modification to the form from the previous , is the field “MySelect” which now should be changed to “Checkboxes (allow multiple selections)”.

The code for NewForm and EditForm should now be like this:

<!-- The jQuery version must be 1.6 or above -->
<script type="text/javascript" src="/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">

var fields = init_fields_v2();
// Arrays of fields to show or hide
var arrRed = ['ShowIfRed1','ShowIfRed2'];
var arrBlue = ['ShowIfBlue1','ShowIfBlue2'];

// Multiselect
$(fields['MySelect']).find('input').each(function(i){
	// On page load
	if(i==0){ // call this only once
		multiSelectdynamicDisplay($(this));
	}
	// Add onclick
	$(this).click(function(){
		multiSelectdynamicDisplay($(this));
	});
});

function multiSelectdynamicDisplay(inp){
	var objChecked = {};
	var arrToHide = [];
	var arrToShow = [];
	var inpAll = inp.parents('td.ms-formbody:first').find('input');
	$.each(inpAll,function(){
		objChecked[$(this).next().text()] = $(this).prop('checked');
	});
	// Check each option
	if(objChecked['Red']){
		arrToShow = arrToShow.concat(arrRed);
	}else if(!objChecked['Red']){
		arrToHide = arrToHide.concat(arrRed);
	}
	
	if(objChecked['Blue']){
		arrToShow = arrToShow.concat(arrBlue);
	}else if(!objChecked['Blue']){
		arrToHide = arrToHide.concat(arrBlue);
	}	
	if(objChecked['Yellow']){
		//alert("No array defined for "Yellow"");
	}else if(!objChecked['Yellow']){
		// Has no array defined
	}
	// Hide
	toggleArr(arrToHide,true);
	// Show
	toggleArr(arrToShow,false);
}

function toggleArr(arr,hide){
	if(hide){
		for(i=0;i<arr.length;i++){
			$(fields[arr[i]]).hide();
		}
	}else if(!hide){
		for(i=0;i<arr.length;i++){
			$(fields[arr[i]]).show();
		}
	}
}

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";
				}else if($(this).find("div[id$='TextField_inplacerte']").length>0){
					type=type+"_EHTML";
				}				
			}
			if(type==="SPFieldLookup"){
				if($(this).find("input").length>0){
					type=type+"_Input";
				}
			}
			// HTML Calc
			if(type==='SPFieldCalculated' && $(this).text().match(/(<([^>]+)>)/ig)!==null){
				$(this).html($(this).text());
			}		
			// Build object
			res[fin] = this.parentNode;
			$(res[fin]).attr('FieldDispName',disp);
			$(res[fin]).attr('FieldType',type);
		}		
	});
	return res;
}
</script>

The code for DispForm should now be like this:

<script type="text/javascript" src="/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
var fields = init_fields_v2();
// Arrays of fields to show or hide
var arrRed = ['Title','ShowIfRed1','ShowIfRed2'];
var arrBlue = ['Title','ShowIfBlue1','ShowIfBlue2'];

// Hide all onload
var arrToHide = [];
arrToHide = arrToHide.concat(arrRed,arrBlue);
toggleArr(arrToHide,true);

// Find the ones selected
var c = $(fields['MySelect']).find('.ms-formbody').text().replace(/xA0/g,'');
cSplit = c.split('; ');
$.each(cSplit,function(idx,color){
	dynamicDisplay($.trim(color));
});

function dynamicDisplay(color){
var arrToShow = [];
	if(color=='Red'){
		arrToShow = arrToShow.concat(arrRed);
	}	
	if(color=='Blue'){
		arrToShow = arrToShow.concat(arrBlue);
	}	
	if(color=='Yellow'){
		// No array defined
	}
	// Show
	toggleArr(arrToShow,false);
}

function toggleArr(arr,hide){
  if(hide){
    for(i=0;i<arr.length;i++){
      $(fields[arr[i]]).hide();
    }
  }else if(!hide){
    for(i=0;i<arr.length;i++){
      $(fields[arr[i]]).show();
    }
  }
}

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";
				}else if($(this).find("div[id$='TextField_inplacerte']").length>0){
					type=type+"_EHTML";
				}				
			}
			if(type==="SPFieldLookup"){
				if($(this).find("input").length>0){
					type=type+"_Input";
				}
			}
			// HTML Calc
			if(type==='SPFieldCalculated' && $(this).text().match(/(<([^>]+)>)/ig)!==null){
				$(this).html($(this).text());
			}		
			// Build object
			res[fin] = this.parentNode;
			$(res[fin]).attr('FieldDispName',disp);
			$(res[fin]).attr('FieldType',type);
		}		
	});
	return res;
}
</script>

This article is, as mentioned above, a follow up on anther article. Read the previous article to get the basics.

Ask if anything is unclear.

Regards
Alexander

34 thoughts on “Dynamic expand/collapse fields or array of fields by multi select”

  1. Hey Alex,

    How are you?

    Well I tried to implement that solution with a bit difference, I inlcluded more checkboxes fiels with only one option loading 5 fields each option and my code for New Form and Edit stays like that:

    <script type="text/javascript" src="http://teams3.sharepoint.hp.com/teams/1903/project/Javascript/jquery-1.4.js"></script>
    <script type="text/javascript">
    fields = init_fields();
    // Arrays of fields to show or hide
    var arraddone = ['Date1','Reason1','Justification1','Amount1','CostCenter1'];
    var arraddtwo = ['Date2','Reason2','Justification2','Amount2','CostCenter2'];
    var arraddthree = ['Date3','Reason3','Justification3','Amount3','CostCenter3'];
    var arraddfour = ['Date4','Reason4','Justification4','Amount4','CostCenter4'];
    
    
    
    // Multiselect
    $(fields['Addone']).find('input').each(function(i){
    	// On page load
    	if(i==0){ // call this only once
    		MultiSelectdynamicDisplay($(this));
    	}
    	// Add onclick
    	$(this).click(function(){
    		MultiSelectdynamicDisplay($(this));
    	});
    });
    $(fields['Addtwo']).find('input').each(function(i){
    	// On page load
    	if(i==0){ // call this only once
    		MultiSelectdynamicDisplay($(this));
    	}
    	// Add onclick
    	$(this).click(function(){
    		MultiSelectdynamicDisplay($(this));
    	});
    });
    $(fields['Addthree']).find('input').each(function(i){
    	// On page load
    	if(i==0){ // call this only once
    		MultiSelectdynamicDisplay($(this));
    	}
    	// Add onclick
    	$(this).click(function(){
    		MultiSelectdynamicDisplay($(this));
    	});
    });
    $(fields['Addfour']).find('input').each(function(i){
    	// On page load
    	if(i==0){ // call this only once
    		MultiSelectdynamicDisplay($(this));
    	}
    	// Add onclick
    	$(this).click(function(){
    		MultiSelectdynamicDisplay($(this));
    	});
    });
    
    function MultiSelectdynamicDisplay(inp){
    var objChecked = {};
    var inpAll = inp.parents('td.ms-formbody:first').find('input');
    	$.each(inpAll,function(){
    		objChecked[$(this).next().text()] = $(this).attr('checked');
    	});
    	// Check each option
    	if(objChecked['Click to add one']){
    		toggleArr(arraddone,false);
    	}else if(!objChecked['Click to add one']){
    		toggleArr(arraddone,true);
    	}
    
    	if(objChecked['Click to add two']){
    		toggleArr(arraddtwo,false);
    	}else if(!objChecked['Click to add two']){
    		toggleArr(arraddtwo,true);
    	}
    
    	if(objChecked['Click to add three']){
    		toggleArr(arraddthree,false);
    	}else if(!objChecked['Click to add three']){
    		toggleArr(arraddthree,true);
    	}
    
    	if(objChecked['Click to add four']){
    		toggleArr(arraddfour,false);
    	}else if(!objChecked['Click to add four']){
    		toggleArr(arraddfour,true);
    	}
    
    }
    
    function toggleArr(arr,hide){
      if(hide){
        for(i=0;i<arr.length;i++){
          $(fields[arr[i]]).hide();
        }
      }else if(!hide){
        for(i=0;i<arr.length;i++){
          $(fields[arr[i]]).show();
        }
      }
    }
    
    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;
    }
    </script>
    

    But something is wrong with my Display view, I included the following code but is not working, do you have any idea what is happening?

    <script type="text/javascript" src="http://teams3.sharepoint.hp.com/teams/1903/project/Javascript/jquery-1.4.js"></script>
    <script type="text/javascript">
    fields = init_fields();
    // Arrays of fields to show or hide
    var arraddone = ['Date1','Reason1','Justification1','Amount1','CostCenter1'];
    var arraddtwo = ['Date2','Reason2','Justification2','Amount2','CostCenter2'];
    var arraddthree = ['Date3','Reason3','Justification3','Amount3','CostCenter3'];
    var arraddfour = ['Date4','Reason4','Justification4','Amount4','CostCenter4'];
    
    // Hide all onload
    var arrToHide = [];
    arrToHide = arrToHide.concat(arraddone,arraddtwo,arraddthree,arraddfour);
    toggleArr(arrToHide,true);
    
    // Find the ones selected
    var c = $(fields['Addone']).find('.ms-formbody').text().replace(/s|xA0/g,'');
    cSplit = c.split(';');
    $.each(cSplit,function(idx,color){
    	dynamicDisplay(color);
    });
    // Find the ones selected
    var c = $(fields['Addtwo']).find('.ms-formbody').text().replace(/s|xA0/g,'');
    cSplit = c.split(';');
    $.each(cSplit,function(idx,color){
    	dynamicDisplay(color);
    });
    
    // Find the ones selected
    var c = $(fields['Addthree']).find('.ms-formbody').text().replace(/s|xA0/g,'');
    cSplit = c.split(';');
    $.each(cSplit,function(idx,color){
    	dynamicDisplay(color);
    });
    // Find the ones selected
    var c = $(fields['Addfour']).find('.ms-formbody').text().replace(/s|xA0/g,'');
    cSplit = c.split(';');
    $.each(cSplit,function(idx,color){
    	dynamicDisplay(color);
    });
    
    function dynamicDisplay(color){
    	if(color=='Click to add one'){
    		toggleArr(arraddone,false);
    	}
    	if(color=='Click to add two'){
    		toggleArr(arraddtwo,false);
    	}
    	if(color=='Click to add three'){
    		toggleArr(arraddthree,false);
    	}
    	if(color=='Click to add four'){
    		toggleArr(arraddfour,false);
    	}
    }
    
    function toggleArr(arr,hide){
      if(hide){
        for(i=0;i<arr.length;i++){
          $(fields[arr[i]]).hide();
        }
      }else if(!hide){
        for(i=0;i<arr.length;i++){
          $(fields[arr[i]]).show();
        }
      }
    }
    
    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;
    }
    </script>
    
    Either way, do you think that based in the code for my New form there´s a way to if I check the first selection and after the second, the first one don´t collapse and stay spanded?
    
    Thanks ;)
    
  2. Hey that happens if I have one multiselect field like MySelect field

    What happens if I would like to add more than on multicheckbox select field?
    I tried that calling the function Multiselect in this way:

    // Multiselect
    $(fields['MySelect']).find('input').each(function(i){
    	// On page load
    	if(i==0){ // call this only once
    		MultiSelectdynamicDisplay($(this));
    	}
    	// Add onclick
    	$(this).click(function(){
    		MultiSelectdynamicDisplay($(this));
    	});
    });
    // Multiselect
    $(fields['Dude']).find('input').each(function(i){
    	// On page load
    	if(i==0){ // call this only once
    		MultiSelectdynamicDisplay($(this));
    	}
    	// Add onclick
    	$(this).click(function(){
    		MultiSelectdynamicDisplay($(this));
    	});
    });
    

    So when I select one item from first field it expand but if I select other option from the other field the first one collapse

    What I need to do to fix that?
    I tried to do the following:

    // Multiselect
    $(fields['MySelect','Dude']).find('input').each(function(i){
    	// On page load
    	if(i==0){ // call this only once
    		MultiSelectdynamicDisplay($(this));
    	}
    	// Add onclick
    	$(this).click(function(){
    		MultiSelectdynamicDisplay($(this));
    	});
    });
    

    I tried to state the 2 fields in the same function but he only loads the second:”Dude”, and I don´t know why

    Thanks
    Renan

  3. Hey Alexander, Hope all is well. I was playing with this code and found something that slipped by me. I cant seem to figure out how to get it to work. The logic is shared fields in multiple arrarys. If in 2 of my 3 options I want the “Title” field to display (for both opt 2 and opt 3), it will only display for the last optiopn (opt 3). Is there a way to share a field across multiple arrays with this functionality?

    1. I also just reread and found this is setup foir checkboxes. I am using radio buttons. I dont believe it should cause a difference. Only one selected as opposed to multiple selected.

  4. Quick logic question. In my multipel select field I have 5 options. I want to show/hide field if 2 or more options are selected. I dont care which two. To aid with this I created a calculated field that return one fo 2 values
    Low – one selected
    High – 2 or more selected

    Is there a way to make this work. I beleieve the calculated field wont have the new value until post, so is there a way to count number of selections instead of a specific selection?

    1. Hi,
      Sorry for the late reply, but her is a solution if the problem is still there:

      <script type="text/javascript" src="/test/English/Javascript/jquery-1.4.2.min.js"></script>
      <script type="text/javascript">
      // Initialt all fields
      fields = init_fields_v2();
      
      $(fields['MySelect']).find('input:checkbox').click(function(){
      	alert($(this).parents('td.ms-formbody:first').find('input:checkbox:checked').length);
      });
      
      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;
      }
      </script>
      

      The multi choice field has a FieldInternalName of “MySelect”.

      Alexander

  5. I have a list that I want to combine this code and the dropdown code on. I have a dropdown that I am using your code with to show/hide particular fields. But at the end of the form I have a Yes/No checkbox where I want to show a couple more additional fields if its checked ‘Yes’. Any way to do this?

    1. Hi,
      Doing this with a yes/no field requires some modifications. This is how to get the “on of off” property:

      $(fields['MyYesNo']).find('input:checkbox').click(function(){
      	alert($(this).attr('checked'));
      });
      

      To have this work you will have to call the code on page load tho handle “selecting no” if the checkbox is initially unchecked.

      Alexander

  6. Hey A, Good day.

    Hope all is well. I have an inquiry. I am looking for a way to show/hide a field based on a numerical value. More like a percentage. if field A/ field B is greater than 25%. Is there a way to do this? Can I divide one field by another in the function and use the result to hide/show field?

    1. this is what i have worked up. I get an error onblur.

      I tried adding you getFieldValue from another script. wrapped it in a function, then thought i could fire the function on blur. thats when the fields would be populated and I could divide. Hoping once I can get this value I can show/hide field based on return.

      function getvalues() {
      var myNumAValue = getFieldValue('SpecialistImpacted','','',''); 
      var myNumBValue = getFieldValue('SpecialistTotal','','','');
      var myNumVal = (myNumAValue/myNumBValue );
      return myNumVal;
      }
       
       $(fields['SpecialistTotal']).find('input').css({'width':'75px'});    
           $(fields['SpecialistTotal']).find('input').keyup(function(e){  
              
                //setFieldValue('Percent','10');
                   }).blur(function(){  
              
      alert(myNumVal); // no alert here onle error on blur
      
           }); 
      
    2. Hi,
      Maybe I’m missing something in the code, but the variable “myNumVal” in line 14 is not defined. I guess you would have to include a call to getvalues() like this:
      var myNumvVal = getvalues();
      alert(myNumVal);

      Alexander

    3. Line 14 is suppose to be the result of (myNumAValue / myNumBValue). So maybe I am lost. I can’t seem to figure out how divide these to getFieldvalue numbers.

      So Line 2 and 3 are suppose to grab these numbers. how can I calculate a percentage between those 2 numbers

    4. Okay I am getting a little closer. I have stripped down my code as much as I can. In this function I can fire an alert on the field blur, but when i try to fire your getFieldValues function it errors out

      $(fields['SpecialistTotal']).find('input').blur(function(){   
         var myNumAValue = "9"; //getFieldValue('SpecialistImpacted'); 
         var myNumBValue = "10"; //getFieldValue('SpecialistTotal');
      
      alert(myNumAValue);
      alert(myNumBValue);
      
           }); 
      
    5. Like this:

      <script type="text/javascript" src="/test/English/Javascript/jquery-1.4.2.min.js"></script>
      <script type="text/javascript">
      fields = init_fields_v2();
      
      $(fields['MyNumField2']).find('input').blur(function(){
      	var p = getMyPercentage();
      	alert(p);
      });
      
      function getMyPercentage(){
      	var firstVal = $(fields['MyNumField1']).find('input').val();
      	var secondVal = $(fields['MyNumField2']).find('input').val();
      	var percentage = (parseInt(firstVal,10)/parseInt(secondVal,10))*100;
      	return percentage;
      }
      
      /* init_fields_v2
      	Function to make object of all fileds in a unmodified SharePoint form
      	Returned data type: object
      		Object properties: FieldInternalName
      */
      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;
      }
      </script>
      

      There is no need to use the getFieldValue to pull from a simple input field.

      Alexander

    6. You are my hero. Thanks a million. One small question. The blur function works perfectly on the NewForm. How should this be handled on the EditForm. Now the values are already populated, I need to check this in the blur function and on doc load, right?

  7. Hi Alexander,

    First of all, awesome code!

    I have two questions regarding code for DispForm.

    1. I was trying your code and I noticed when I select both blue and red, on display form, I only see ‘ShowIfBlue1’ and ‘ShowIfBlue2′. Is there any fix for this?

    2. On if(color==’Red’) line, if my value selection has space (i.e. Red Ball), how would you rewrite the code? I tried if(color==’Red Ball’), and it didn’t work.

    Thank you!

  8. Hi. I’m always worried that I’m either repeating a question or I just sound dim, so sorry if either apply.

    I have implemeneted the script successfully using a blank custom list in WSS3.0 copying the sample in every way and it works a charm. However, when I try to implement it into an existing form with many more fields it dowsn’t do anything. I have a support system and I want to create a choice selection of either “collect” or “onsite” (or both). By selecting them I want the newform.aspx to show / hide a number of reqired fields as per the selection.

    Can you please take at look at my code and see if there is something that is clearly a mistake?

    I appreciate any guidance you can offer

    <script type="text/javascript" src="http://companyweb/General%20Documents/Workshop/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
    fields = init_fields();
    // Arrays of fields to show or hide
    var arrCollect = ['Date_x0020_of_x0020_Collection_x','Items_x0020_to_x0020_be_x0020_Co','Collection_x0020_arranged_x0020_','Collected_x0020_by_x003a_','Collection_x0020_Ref_x003a_','Collection_x0020_Address','POSTCODES','Collection_x0020_arranged_x0020_0','Repair_x0020_Arrival_x0020_Date','Repair_x0020_Completion_x0020_Da'];
    var arrOnsite = [Onsite_x0020_Repair',Date_x0020_Onsite_x0020_Schedule','Onsite_x0020_Address','Onsite_x0020_Postcode_x0020__x00','Name_x0020_of_x0020_3rd_x0020_Pa','Date_x0020_of_x0020_Onsite_x0020'];
    
    // Multiselect
    $(fields['MySelect']).find('input').each(function(i){
    	// On page load
    	if(i==0){ // call this only once
    		MultiSelectdynamicDisplay($(this));
    	}
    	// Add onclick
    	$(this).click(function(){
    		MultiSelectdynamicDisplay($(this));
    	});
    });
    
    function MultiSelectdynamicDisplay(inp){
    var objChecked = {};
    var arrToHide = [];
    var arrToShow = [];
    var inpAll = inp.parents('td.ms-formbody:first').find('input');
    	$.each(inpAll,function(){
    		objChecked[$(this).next().text()] = $(this).attr('checked');
    	});
    	// Check each option
    	if(objChecked['collect']){
    		arrToShow = arrToShow.concat(arrCollect);
    	}else if(!objChecked['collect']){
    		arrToHide = arrToHide.concat(arrCollect);
    	}
    
    	if(objChecked['Onsite']){
    		arrToShow = arrToShow.concat(arrOnsite);
    	}else if(!objChecked['Onsite']){
    		arrToHide = arrToHide.concat(arrOnsite);
    	}
    
    		// Hide
    	toggleArr(arrToHide,true);
    	// Show
    	toggleArr(arrToShow,false);
    }
    
    function toggleArr(arr,hide){
      if(hide){
        for(i=0;i<arr.length;i++){
          $(fields[arr[i]]).hide();
        }
      }else if(!hide){
        for(i=0;i<arr.length;i++){
          $(fields[arr[i]]).show();
        }
      }
    }
    
    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;
    }
    </script>
    
  9. Hi there. I moved away from the idea as I was getting nowhere. However, I’m still no further forward if you can help and I’d love to use it.

    Thanks

    1. Hi,
      Sorry again for the delay.

      You are missing a single quote around this fieldname: “Date_x0020_Onsite_x0020_Schedule” in the array “arrOnsite”.

      Alexander

  10. Thanks Alexander. As soon as I get chance I’ll implement it and post how I get on. My fingers are crossed 🙂

    I really appreciate the help, thanks.

    Richard

  11. Hello,

    I tried using this code and I can’t get it to work…nothing happen…Please help…

    fields = init_fields();
    //arrays of fields to show or hide
    var arrHOLgl = [‘HO_x0020_Legal’,’HO_x0020_Legal_x0020_Notes’]
    var arrCCLgl = [‘CCA_x0020_Legal’,’CCA_x0020_Legal_x0020_Notes’]
    var arrCCDco = [‘CCA_x0020_DCO’,’CCA_x0020_DCO_x0020_Notes’]

    // Multiselect
    $(fields[‘PrelimAssignTo’]).find(‘input’).each(function(i){
    // On page load
    if(i==0){ // call this only once
    MultiSelectdynamicDisplay($(this));
    }
    // Add onclick
    $(this).click(function(){
    MultiSelectdynamicDisplay($(this));
    });
    });

    function MultiSelectdynamicDisplay(inp){
    var objChecked = {};
    var arrToHide = [];
    var arrToShow = [];
    var inpAll = inp.parents(‘td.ms-formbody:first’).find(‘input’);
    $.each(inpAll,function(){
    objChecked[$(this).next().text()] = $(this).attr(‘checked’);
    });
    // Check each option
    if(objChecked[‘HO Legal’]){
    arrToShow = arrToShow.concat(arrHOLgl);
    }else if(!objChecked[‘HO Legal’]){
    arrToHide = arrToHide.concat(arrHOLgl);
    }
    // Check each option
    if(objChecked[‘CCA Legal’]){
    arrToShow = arrToShow.concat(arrCCLgl);
    }else if(!objChecked[‘CCA Legal’]){
    arrToHide = arrToHide.concat(arrCCLgl);
    }
    // Check each option
    if(objChecked[‘CCA DCO’]){
    arrToShow = arrToShow.concat(arrCCDco);
    }else if(!objChecked[‘CCA DCO’]){
    arrToHide = arrToHide.concat(arrCCDco);
    }

    // Hide
    toggleArr(arrToHide,true);
    // Show
    toggleArr(arrToShow,false);
    }
    function toggleArr(arr,hide){
    if(hide){
    for(i=0;i<arr.length;i++){
    $(fields[arr[i]]).hide();
    }
    }else if(!hide){
    for(i=0;i<arr.length;i++){
    $(fields[arr[i]]).show();
    }
    }
    }
    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;
    }

  12. Hi Alexander,

    I have a bit of an issue I was hoping you’d be able to help me with, if you’re still looking over these comments and open to explaining.

    I am using SP 2010 and have been able to get jQuery to work, including the alert message, but once I paste in the code, the alert does not show anymore and I am at a loss. I placed the CEWP below the list and followed all the steps (including keeping the exact same column names as your example), but I can’t seem to get it to run properly.

    I notice a lot of the other comments had the same problem at first, and it was due to improperly linking the jQuery document, but it seems to me that the functions are not even running. They show up in the page’s source code, but nothing kicks off. Do you have any idea why? Or how I can troubleshoot this?

    Thanks a million for your time and attention.

Leave a Reply