06.10.2010 Fixed a bug with unchecking hidden options when using a multi choice checkbox type column as “consumer” column (line 84 in the code). Thanks to Mike for finding the bug.
31.08.2010 Modified the code to hide the “consumer field” entirely if no items is visible.
16.07.2010 Updated the code to support checkboxes (allow multiple selections) in both “trigger” and “consumer” columns. I have also changed the logic from using the index of the option to use the actual text value.
15.03.2010 small update to the code to handle blank “triggervalue”. Thanks to Larry.
I got this request from Elstone:
Hello
I have two choice fields, 1 drop down and another is multiple radio buttons (6 values/radio button). This I want to implement on newform/editform
In dropdown I have 3 values i.e. Yes/No/Not Sure (selected by default).
I want to show/hide some of the radio buttons out of 6 radio buttons depending on condiion.
Let say
if user select “Yes”, then show radiobutton1 and radiobutton 3
If user select “No” , then show radiobutton2 and radiobutton 5
If user select “Not Sure” then show all the radio buttonsHow can I do this?
This script will work for single value <select>, Radio Buttons and Checkboxes. The script will uncheck all hidden options, so if you flip the selection from “Yes” to “No” any selections made under “Yes” will be cleared.
As always we start 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 sub site named “test” with a sub site named “English” with a document library named “Javascript”):
Note: picture refers to jquery-1.3.2.min.js, but code uses jquery-1.4.2.min.js.
The jQuery-library is found here. The sourcecode refers to jquery-1.4.2.min. If you download another version, be sure to update the script reference in the sourcecode.
Add this code to a CEWP below the list form in NewForm and EditForm:
<script type="text/javascript" src="../../Javascript/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
// Make object of all TR
fields = init_fields_v2();
// Call function with FieldInternalName of triggerfield and targetfield
init_hideRadiobuttons('MyTriggerColumn','MyRadioButton');
function init_hideRadiobuttons(triggerColumnFIN,radioButtonFIN){
var type = 'single';
if($(fields[triggerColumnFIN]).find('input').length>0)type = 'multi';
var thisVal = [];
switch(type){
case 'single':
// Onload
thisVal.push($(fields[triggerColumnFIN]).find('option:selected').text());
hideRadiobuttons(radioButtonFIN,thisVal);
// Onchange
$(fields[triggerColumnFIN]).find('select').change(function(){
thisVal = [];
thisVal.push($(this).find('option:selected').text());
hideRadiobuttons(radioButtonFIN,thisVal);
});
break;
case 'multi':
// Onload
$(fields[triggerColumnFIN]).find('input').each(function(){
if($(this).attr('checked')){
thisVal.push($(this).next().text());
}
});
hideRadiobuttons(radioButtonFIN,thisVal);
// Onclick
$(fields[triggerColumnFIN]).find('input').click(function(){
thisVal = [];
$(fields[triggerColumnFIN]).find('input').each(function(){
if($(this).attr('checked')){
thisVal.push($(this).next().text());
}
});
hideRadiobuttons(radioButtonFIN,thisVal);
});
break;
}
}
function hideRadiobuttons(FieldInternalName,arrOfValues){
var showArr = [];
$.each(arrOfValues,function(i,val){
switch(val){
case 'Yes':
showArr.push('Selected Yes - option 1',
'Selected Yes - option 2',
'Selected Yes - option 3');
break;
case 'No':
showArr.push('Selected No - option 1',
'Selected No - option 2',
'Selected No - option 3');
break;
case 'Not Sure':
showArr.push('Selected Yes - option 1',
'Selected Yes - option 2',
'Selected Yes - option 3',
'Selected No - option 1',
'Selected No - option 2',
'Selected No - option 3');
break
}
});
if(showArr.length==0){
// Hide row
$(fields[FieldInternalName]).hide();
}else{
// Unhide row
$(fields[FieldInternalName]).show();
// Show options
$(fields[FieldInternalName]).find('label').each(function(){
var thisVal = $(this).text();
if($.inArray(thisVal,showArr)>-1){
$(this).parents('tr:first').show();
}else{
$(this).prev().attr('checked',false)
$(this).parents('tr:first').hide();
}
});
}
}
/*
LastMod: 07.05.2010
*/
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>
You must update the “cases” in the function “hideRadiobuttons” to match your setup.
Regards
Alexander
Alexendar
You are great, thanks for the help.
Kudos to you
great job. I had to add an additional case for defaulting to blank. but other than that workes perfectly.
Alexander,
Hope you are doing good – it’s been a while. I’ve tried every way to make this work and I can’t get the “MyRadioButton” choices to show up. They are invisible and that does not change whether I select something in the trigger or not. I don’t know if it matters but I am wanting both the trigger and the radio button to be checkboxes allowing multiple values. I’ve tried it exactly like the example and it won’t work for me. Thanks a ton for your help in advance!
<script type="text/javascript" src="javascript/jquery-1.4.2.min.js"></script> <script type="text/javascript"> // Make object of all TR fields = init_fields(); // Call function with FieldInternalName of triggerfield and targetfield init_hideRadiobuttons('Choices','Answers'); function init_hideRadiobuttons(Choices, Answers){ // Onload var thisVal = $(fields[Choices]).find('option:selected').text(); hideRadiobuttons(Answers,thisVal); // Onclick $(fields[Choices]).find('select').change(function(){ var thisVal = $(this).find('option:selected').text(); hideRadiobuttons(Answers,thisVal); }); } function hideRadiobuttons(FieldInternalName,val){ var showArr = []; switch(val){ case 'Yes': showArr = [4,5]; // Index of the choices to show break; case 'No': showArr = [6]; // Index of the choices to show break; case 'Not Sure': showArr = [4,5,6]; // Index of the choices to show break } $(fields[FieldInternalName]).find('input').each(function(i){ if($.inArray(i,showArr)>-1){ $(this).parents('tr:first').show(); }else{ $(this).attr('checked',false) $(this).parents('tr:first').hide(); } }); } function init_fields(){ 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]; // Build object res[fin] = this.parentNode; res[fin].FieldDispName = disp; res[fin].FieldType = type; } }); return res; } </script>Alright I figured out that I need to put the “index” of each answer in not the actual answer. That should be interesting with all of the choices I will have. However, I did find that trigger field will not accept multiple selection checkboxes. Can you alter the code to allow this? Thanks!
Any thoughts on this? Thanks!
Hi,
You can do almost anything, it’s just a matter of finding the time to do it…
See the updated code.
Alexander
Hi Alexander,
is it possible to hide the “consumer” field completely if the trigger column is set to a “non trigger” value? Right now only the options from the consumer column are hidden, leaving the Displayname and the description visible.
Chris
Hi,
See updated code – modified line 72-88.
Alexander
Thanks, works perfect now!
Hi Alex
Great work! this works fine with multiple checkboxes in both “trigger” and “customer” columns, I have only one problem, the “consumer” checkboxes reamin checked after they are hidden.
I can see the code is there in line 84 to uncheck them just before hide, but for some reason it doesn’t works for me.
Thanks in advance for your help
Mike
Hi,
Does this apply only to items that is checked when you load up EditForm (Items that has been saved as checked)?
Alexander
No, this happend in all cases, I mean new and old items, old items previously checked or not. On all cases the code in line 84 should uncheck any hidden checkbox, right?
Fixed. See comment in the top of the article.
Alexander
Hi Alex,
Using your methods of CEWP and javscript, I am trying to do something similar, but instead of filtering I am trying to set a Date.
Any suggestions would be great.
_spBodyOnLoadFunctionNames.push(“modifyflds”);
function modifyflds()
{
$(“select[title^=Status]“).bind(“change”,statusChange);
}
function statusChange()
{
var Selected =$(“select[title^=Status]“).val() ;
if(Selected==”Completed”)
$.spff({field:’Date’,value:’[Today]‘,lock:true});
}
Hi,
Using the function “init_fields_v2″ from the above code – this is how you set a date column with FieldInternalName of “MyDateCol”:
$(fields['MyDateCol']).find('input:first').val('10/30/2010');Alexander
i have a set of radiobutonns,which has sub radiobuttons.
my problem is
onpage load the main radiobuttons should be shown and on clicking on each main radiobuttons the sub radiobuttons shuld be shown.How can we do this.
Is there any reason why this won’t work with a custom list?
Hi,
Look here for some help
Alexander
Thanks Alex.
Got it all working, just have 1 issue left though.
I had this
function hideRadiobuttons(FieldInternalName,arrOfValues){
var showArr = [];
$.each(arrOfValues,function(i,val){
switch(val){
case ‘Delivery’:
showArr.push(‘Central’,
‘East’,
‘West’,
‘South West’,
‘South East’,
‘North’);
break;
case ‘Processing’:
showArr.push(‘Mount Pleasant Mail Centre’,
‘HWDC’,
‘Romford’,
‘Jubilee’,
‘Greenford’,
‘Croydon’);
break;
case ‘MPU’:
showArr.push(‘Central’,
‘East’,
‘West’,
‘South West’,
‘South East’,
‘North’);
break
}
});
Now I have changed it to 4 options, however it will not pull the “Collections” through.
function hideRadiobuttons(FieldInternalName,arrOfValues){
var showArr = [];
$.each(arrOfValues,function(i,val){
switch(val){
case ‘Delivery’:
showArr.push(‘Central’,
‘East’,
‘West’,
‘South West’,
‘South East’,
‘North’);
break;
case ‘Collections’:
showArr.push(‘Central’,
‘East’,
‘West’,
‘South West’,
‘South East’,
‘North’);
break;
case ‘Processing’:
showArr.push(‘Mount Pleasant Mail Centre’,
‘HWDC’,
‘Romford’,
‘Jubilee’,
‘Greenford’,
‘Croydon’);
break;
case ‘MPU’:
showArr.push(‘Central’,
‘East’,
‘West’,
‘South West’,
‘South East’,
‘North’);
break
}
});
Sorted – must of needed to sync.
WOW! Worked like a charm!
HI Alex,
Any way this can work by having text boxes or other field type appear with going to dynamic forms?
Hi,
Sorry, but I do not understand what you are asking. Please clarify.
Alexander
you are in reality a excellent webmaster.
The web site loading speed is amazing. It seems that you are doing any
distinctive trick. Moreover, The contents are masterwork.
you have done a wonderful task on this matter!