Hide/Show fields based on option chosen in complex dropdown (I suspect javascript onChange event not firing in sharepoint complex dropdown)

Feb 27, 2013 at 2:52 PM
I've got 5 cascading dropdowns, I'm using SPServices 0.7.2 together with JQuery 1.8.1 to get my cascading dropdowns working and I've used the "SPComplexToSimpleDropdown" function to prevent complex dropdown, all that is working perfectly. All my dropdowns are lookup columns that load more than 20 items from the datasource so all of them are complex dropdowns according to IE but i've taken care of that through the use of "SPComplexToSimpleDropdown" function so they're bahaving normally. Within the same form, there are some input fields that are applicable on certain options from the dropdowns so i would like those fields to hide/show depending on that chosen option from the dropdowns. I've implemented a javascript for that but it only works in Firefox and Google Chrome but still doesn't work in IE even though i've used "SPComplexToSimpleDropdown" to prevent complex dropdowns. My main goal is to have these other input fields hidden when the form loads then appear only when a certain option is chosen on one of the dropdowns. Please point me to the correct direction because i believe even though those dropdowns appear as simple dropdowns, technically they are still complex dropdowns behind the scenes and i think that's one of the main reasons they are not responding to the javascript onChange event. On firefox and Chrome the solution works like a charm, the input fields show and hide as requested.

Below is the javascript i've used to prevent complex dropdowns and it's working perfectly.
<script language="javascript" src="/sites/records/Documents/jquery-1.8.1.min.js" type="text/javascript"></script><script language="javascript" src="/sites/records/Documents/jquery.SPServices-0.7.2.min.js" type="text/javascript"></script><script language="javascript" type="text/javascript">
$().SPServices.SPComplexToSimpleDropdown({
columnName: "Human Resources Management Level 2"});
Below is the javascript i've used to show/hide controls, it works only on FF and Google Chrome, how can i get it to work on IE?
<script type="text/javascript">
_spBodyOnLoadFunctionNames.push("hideFieldsOnStart");
function hideFieldsOnStart() {
var myControl=getTagFromIdentifierAndTitle("input","TextField","Employee Number");
myControl.parentNode.parentNode.parentNode.style.display="none";
getTagFromIdentifierAndTitle("select","Lookup","Human Resources Management Level 2").onchange=function() {ChangeEvent()};
}
function ChangeEvent(){
var dropDown=getTagFromIdentifierAndTitle("select","Lookup","Human Resources Management Level 2");
var option=dropDown.options[dropDown.selectedIndex].text;
var myControl=getTagFromIdentifierAndTitle("input","TextField","Employee Number")
if(option=="4/6/13-Bursaries" || option=="4/7/P-Policy" || option=="4/7/1-Submissions and disagreements" || option=="4/7/2-Performance rewards" || option=="4/7/3-Career development"){
myControl.parentNode.parentNode.parentNode.style.display="";
}
else{
myControl.parentNode.parentNode.parentNode.style.display="none";
}
}
function getTagFromIdentifierAndTitle(tagName, identifier, title) {
var len = identifier.length;
var tags = document.getElementsByTagName(tagName);
for (var i=0; i < tags.length; i++) {
var tempString = tags[i].id;
if (tags[i].title == title && (identifier == "" || tempString.indexOf(identifier) == tempString.length - len)) {
return tags[i];
}
}
return null;
}
</script>
Coordinator
Feb 27, 2013 at 2:56 PM
Siyasanga:

You're correct in assuming that the complex dropdowns are still there in the background. What I do is hide the complex dropdown and create an equivalent simply dropdown. My code then fires wheneever the simple dropdown changes, updating the complex dropdown accordingly.

Based on what you describe, what you are doing should work. The simple dropdown is just a seelct, so the normal change event does indeed fire. I think you're simply going to have to do dome debugging to see what's happening. Are you seeing any errors in IE? Also, since you've already got jQuery loaded, it would be far easier to do the selecting and binding with jQuery than JavaScript.

M.
Feb 27, 2013 at 4:08 PM
sympmarc wrote:
Siyasanga:

What I do is hide the complex dropdown and create an equivalent simply dropdown. My code then fires wheneever the simple dropdown changes, updating the complex dropdown accordingly.

I'm not sure this is a viable option for me right now because the fields are not custom created on a custom form, they're created on the upload form at runtime from the content type attached to that particular document library so I don't have much control over the creation of those fields.
IE does not give any errors, what I noticed is that when i implement the javascript to hide/show fields, the controls on the top left of the upload form (Save, Cancel, Delete e.t.c.) are greyed out so they become unusable even if i remove the script from the CEWP, unghost the uploadform.aspx/EditForm.aspx and put the script directly under the "ContentPlaceHolderMain" they're still greyed out.

"since you've already got jQuery loaded, it would be far easier to do the selecting and binding with jQuery than JavaScript" . This is my only option left so i'll have too Bing a bit more because i've never really worked with JQuery before.

Thank you very much, i'll keep you posted