28.11.2009 A follow up article on using multi select checkboxes is found here.
13.11.2009 Updated code for better function in EditForm and DispForm
This is a short intro on how to dynamically expand or collapse a field or array of fields based upon selection made in another field.
As always we begin 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 subsite named “test” with a subsite named “English” with a document library named “Javascript”):
This is the only script you need to refer for this example.
Create a custom list with these fields:
Pay attention to the FieldNames. Always create names without spaces or special character to get a nice “FieldInternalName” – then you can rename the field to whatever you want – the “FieldInternalName” newer changes!
The field “MySelect” looks like this:
Then you add a CEWP below the list form in NewForm like this:
Sourcecode for NewForm.aspx and EditForm.aspx
<script type="text/javascript" src="/test/English/Javascript/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
fields = init_fields();
// Arrays of fields to show or hide
var arrRed = ['ShowIfRed1','ShowIfRed2'];
var arrBlue = ['ShowIfBlue1','ShowIfBlue2'];
// Hide all onload
var arrToHide = [];
arrToHide = arrToHide.concat(arrRed,arrBlue);
toggleArr(arrToHide,true);
// Onchange
$(fields['MySelect']).find('select').change(function(){
var c = $(this).find('option:selected').text();
dynamicDisplay(c);
});
// Onload
var c = $(fields['MySelect']).find('option:selected').text();
dynamicDisplay(c);
function dynamicDisplay(color){
// Hide all initially
toggleArr(arrToHide,true);
if(color=='Red'){
toggleArr(arrRed,false);
}
else if(color=='Blue'){
toggleArr(arrBlue,false);
}
else if(color=='Yellow'){
alert("No array defined for "Yellow"");
}
}
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>
Sourcecode for DispForm.aspx
<script type="text/javascript" src="/test/English/Javascript/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
fields = init_fields();
// Arrays of fields to show or hide
var arrRed = ['ShowIfRed1','ShowIfRed2'];
var arrBlue = ['ShowIfBlue1','ShowIfBlue2'];
// Hide all onload
var arrToHide = [];
arrToHide = arrToHide.concat(arrRed,arrBlue);
toggleArr(arrToHide,true);
// Show the array for the selected color
var c = $(fields['MySelect']).find('.ms-formbody').text().replace(/s|xA0/g,'');
dynamicDisplay(c);
function dynamicDisplay(color){
// Hide all initially
toggleArr(arrToHide,true);
if(color=='Red'){
toggleArr(arrRed,false);
}
else if(color=='Blue'){
toggleArr(arrBlue,false);
}
else if(color=='Yellow'){
alert("No array defined for "Yellow"");
}
}
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>
The function “init_fields” is a modified version of the one created by Erucy and posted here. I have modified it to use “FieldInternalName” instead of “DisplayName” for locating the fields.
The end result should look like this:
Other fields can be used to trigger the event – look here to learn how to refer the various types of fields:
http://docs.jquery.com/Selectors
Have fun!
Alexander
