This project has moved. For the latest updates, please go here.

Problems with Hide Field based on Multiselect Choice

Oct 15, 2014 at 10:35 AM
Hello

I want to hide the field "Landingpage", if the value "sujet landingpage" from the Multiselect Field "website" is not selected. Otherwise it has to show up. I can't figure out how to manage this. Hide other fields based on radiobuttons worked very well. Can you help me? I tried following:
 var website = SPUtility.GetSPField('website');
 var landingpage = SPUtility.GetSPField('Landingpage');
function handleFieldChangeWebsite() {
    if(website.GetValue() === 'sujet landingpage') {
        landingpage.Show();
                                   }
    else {
        landingpage.Hide();
         }
}
$(website.Checkboxes).each(function(index, obj) {
    var checkbox= obj.value;
    $(checkbox).change(handleFieldChangeWebsite);
});

---> It's not working. Can you help me?

Thanks in advance!
Melanie
Coordinator
Oct 15, 2014 at 12:57 PM
Melanie,
I can try to help get you setup. A couple questions:
  • Are you getting an error in the Javascript console which you can send me?
  • Is the "website" field a Choice field with checkboxes or is it a Lookup field?
If you can give a small screenshot that is also helpful and then I can put together another example for you.

Looks like you've already seen the previous example I put together for checkboxes here? https://github.com/kitmenke/sputility/blob/master/examples/showhidedependentfield.html
Thanks,
Kit
Oct 15, 2014 at 2:42 PM
Hi Kit

Thank you for your response!
I tried to upload a Printscreen but it didn't worked out. So I try to explain it again...

I have 3 Fields:
var website = SPUtility.GetSPField('website'); //SPChoice Multiselect (more than one checkbox can be selected), but it's not a lookup field
var landingpage = SPUtility.GetSPField('Landingpage'); //Textfield
var pokerclient = SPUtility.GetSPField('Pokerclient'); //Textfield

I want to hide the fields landingpage and pokerclient at the beginning. Then, if I check the first value from my Multiselect Field website the field landingpage has to show up. If I select the second value, the field pokerclient has to show up. If both values are selected, both Textfields have to show up.

I tried the same based on a Choice field with radiobuttons and this worked out well:

var eventbroschure = SPUtility.GetSPField('Eventbroschüre 105x148 mm');
var lieferterminevent = SPUtility.GetSPField('Liefertermin Eventbroschüre');
function handleFieldChangeEvent() {
// Hide the Listing Issues field if the selected value is No
if(eventbroschure.GetValue() === 'nein') {
lieferterminevent.Hide();
}
else {
lieferterminevent.Show();
}
}
$(eventbroschure.RadioButtons).each(function(index, obj) {
var radioButton = obj.value;
$(radioButton).change(handleFieldChangeEvent);
});

But with multiselect fields I don't know how to handle it...

Thank you very much!
Coordinator
Oct 20, 2014 at 2:31 AM
Ok I think I have an idea what you want to do. A checkbox field will have a "Checkboxes" property, not a "RadioButtons" property. I put together an example for you here: https://github.com/kitmenke/sputility/blob/master/examples/text-depends-on-checkbox.html
Oct 21, 2014 at 11:00 AM
Perfect! It's working!

Thank you very much for your help! Now I can do the same with my other checkbox fields.

Best regards and thank you again
Melanie
Dec 16, 2014 at 12:29 PM
Hello Kit

Now I'm struggling with another problem. The code you showed me above is working fine. But now I want to hide/show three fields at the same time based on the checkbox field. So if the value of the checkbox field is "Facebook"; the three fields "Sujet Facebook"; "Veranstaltung" and "Status" has to show up. How can I manage this? Here's my code - which isn't working:
  // attach "change" event handlers to some of the checkboxes 
 $(onlinemarketing.Checkboxes).each(function(index, obj) { 
     var checkbox1 = obj.value; 
     var checkboxName1 = obj.key; 
     var dependentFieldName1;
     var dependentFieldName2;
     var dependentFieldName3;


     // set up which field is dependent on the checkbox 
     if (obj.key === "tilllate.com") { 
         dependentFieldName1 = "Sujet tilllate.com"; 
     } else if (obj.key === "20 Minuten (Lokal, Channels)") {
                 dependentFieldName1 = "Sujet 20 Minuten"
     } else if (obj.key === "SH Medien") {
                 dependentFieldName1 = "Sujet SH Medien"
     } else if (obj.key === "Facebook") {
                 dependentFieldName1 = "Sujet Facebook"
                 dependentFieldName2 = "Veranstaltung"
                dependentFieldName3 = "Status"

     }
             else { 
         dependentFieldName1 = null; 
         dependentFieldName2 = null;
         dependentFieldName3 = null;
                  } 

    if (dependentFieldName1) { 
         var checkboxEventHandler1 = function() { 
             if (checkbox1.checked) { 
                 SPUtility.GetSPField(dependentFieldName1).Show();
                                  } else { 
                 SPUtility.GetSPField(dependentFieldName1).Hide();                   
             } 
if (dependentFieldName2) {
         var checkboxEventHandler1 = function() { 
             if (checkbox1.checked) { 
                 SPUtility.GetSPField(dependentFieldName2).Show();
                                  } else { 
                 SPUtility.GetSPField(dependentFieldName2).Hide();            
             } 
if (dependentFieldName3) {
         var checkboxEventHandler1 = function() { 
             if (checkbox1.checked) { 
                 SPUtility.GetSPField(dependentFieldName3).Show();
                                  } else { 
                 SPUtility.GetSPField(dependentFieldName3).Hide();                   
             } 
         }; 

         $(checkbox1).change(checkboxEventHandler1); 
         // run once at startup 
         checkboxEventHandler1(); 
     } 
 }); 
Coordinator
Dec 16, 2014 at 1:37 PM
Your code above got a little messed up during copy+paste but I think I understand what you were going for. I altered the code a little bit to allow showing/hiding multiple dependent fields (note how dependentFields is an array now):
// attach "change" event handlers to some of the checkboxes 
$(onlinemarketing.Checkboxes).each(function(index, obj) { 
   var dependentFields = [];

   // set up which field is dependent on the checkbox 
   if (obj.key === "tilllate.com") { 
      dependentFields.push("Sujet tilllate.com"); 
   } else if (obj.key === "20 Minuten (Lokal, Channels)") {
      dependentFields.push("Sujet 20 Minuten");
   } else if (obj.key === "SH Medien") {
      dependentFields.push("Sujet SH Medien");
   } else if (obj.key === "Facebook") {
      dependentFields.push("Sujet Facebook");
      dependentFields.push("Veranstaltung");
      dependentFields.push("Status");
   }

  // show or hide field based on the dependent checkbox
  if (dependentFields.length > 0) {
      var checkboxEventHandler = function() {
         for (var i = 0; i < dependentFields.length; i++) {
            if (checkbox.checked) {
               SPUtility.GetSPField(dependentFields[i]).Show();
            } else {
               SPUtility.GetSPField(dependentFields[i]).Hide();
            }
         }
      };
      $(checkbox).change(checkboxEventHandler);
      // run once at startup
      checkboxEventHandler();
  }
});
Hopefully this will work for you!
Dec 16, 2014 at 2:03 PM
Thank you very much for the fast response!

Unfortunately it doesn't work yet. I integratet your code (except that I named the Eventhandler "checkboxEventHandler1" because I already have named an eventhandler in my code "checkboxEventHandler":
  // attach "change" event handlers to some of the checkboxes 
 $(onlinemarketing.Checkboxes).each(function(index, obj) { 
     var dependentFields = [];
// set up which field is dependent on the checkbox
if (obj.key === "tilllate.com") {
  dependentFields.push("Sujet tilllate.com"); 
} else if (obj.key === "20 Minuten (Lokal, Channels)") {
  dependentFields.push("Sujet 20 Minuten");
} else if (obj.key === "SH Medien") {
  dependentFields.push("Sujet SH Medien");
} else if (obj.key === "Facebook") {
  dependentFields.push("Sujet Facebook");
  dependentFields.push("Veranstaltung");
  dependentFields.push("Status");
}

// show or hide field based on the dependent checkbox
if (dependentFields.length > 0) {
  var checkboxEventHandler1 = function() {
     for (var i = 0; i < dependentFields.length; i++) {
        if (checkbox.checked) {
           SPUtility.GetSPField(dependentFields[i]).Show();
        } else {
           SPUtility.GetSPField(dependentFields[i]).Hide();
        }
     }
  };
  $(checkbox).change(checkboxEventHandler1);
  // run once at startup
  checkboxEventHandler1();
}
});

Do you have any idea where the error is? The other fields are working, that means there can't be a prober error in the code. Otherwise the whole javascript in NewForm.aspx wouldn't work.
Coordinator
Dec 17, 2014 at 12:35 PM
I didn't see an obvious error with the code you posted above.

Some tips for debugging:
  • Use the developer tools which come with your browser (usually F12 opens them in Firefox or Chrome)
  • Add some debug statements like console.log("hello"); to figure out where it is stopping
  • If you think you have an error surround it with try/catch:
try {
   // your code here
} catch (e) {
   // show the error using alert or console.log
   console.log(e);
   alert(e);
}
Also if you have all the code, you can post it and I can take a look through it. Don't forget codeplex has thecode button so that you don't lose your formatting!
Dec 24, 2014 at 7:33 AM
Now it's working! The declaration
var checkbox = obj.value;
was missing above.

Thanks!
Sep 11, 2015 at 9:00 AM
Hello,

I have scoured the forums and everyone seems to have success with the dynamic forms cept me :(

I have tried using both the .change(fn()) as well as .on('change',fxn())

Here is my code:
$(document).ready(function () {
    alert('Hello 1!');
    var sitField = SPUtility.GetSPField('目前状况 (Current Status)');
    alert(sitField.GetValue());
    var doSomething = function(text){
        alert(text);
    }
    doSomething('do');
    $(sitField.Dropdown).on('change', doSomething('changed'));
});
This code runs when I bring up my form.

Outcome:
alert: hello
alert: status
alert: do
alert: changed
then when I change the dropdown, nothing happens

For some reason, the listener is not actively listening. It runs when I first load the form (i think cuz I autopopulate the status field), but then just doesn't react to any more changes to the dropdown. Could it be an issue with my SP version or the way I am accessing my form?
Coordinator
Sep 11, 2015 at 10:55 PM
The problem is the jQuery change method takes a function: http://api.jquery.com/change/

Try this!
$(document).ready(function () {
    alert('Start');
    var sitField = SPUtility.GetSPField('目前状况 (Current Status)');
    var doSomething = function(){
        alert(sitField.GetValue());
    };
    // call the function once at the start
    doSomething();
    // listen for the dropdown's change event and then call our event handler
    $(sitField.Dropdown).on('change', doSomething);
});
Expected output:
alert: Start
alert: [value initially set for current status field]
change the dropdown
alert: [new value]