Home | Cool ClickDimensions Features | Conditional Logic Form

Conditional Logic Form

There have been a lot of new feature requests to add Conditional Form Fields. Because this feature has not made it to production yet, I’m going to use an example to demonstrate how you can accomplish the same thing using jQuery in the built in script editor.

Note: this is a sample, and will need to be modified for your requirements by a web developer. Because this deals with custom code, ClickDimensions support cannot troubleshoot any issues you may encounter. 

SCENARIO:

Sometimes when we create a form, we only want certain fields to be available depending on choices selected for previous fields in the form.

SOLUTION:

We can use a series of event triggers in jQuery to dynamically show and hide fields based on the value inside other fields.

EXAMPLE:

Here is a basic form that only has two fields:

Avery1

We want to hide the “State” field and only have it appear when the user selects “United States” as the country.

Step 1: Creating The Form

Create a new form and two list fields. One labeled “Country” and the other labeled “State”. Then you’ll want to add the appropriate countries and states to the list under mapping:

Avery7

Avery8

Step 2: Adding CSS

Now, open up the code editor:

Avery9

A window will appear that has four sections—HTML, JavaScript, CSS, and Preview. However, only the CSS and JavaScript fields will be editable.

Avery10

Once the code editor is open, the first thing you’ll want to do is add the following CSS class in the CSS editor:

Avery12

This applies the styling of “visibility: hidden;” to any HTML element with the class “.hideMe”. What if none of our elements have the class? This is when you use jQuery. We are going to use conditional logic to either add the class or remove it from elements on the page depending on what the user does. Essentially, we now have a way to hide/show form fields at will.

Step 3: Getting the Fields’ ID

Now jQuery has a nifty function for adding or removing classes from elements, but first it needs to know which element to add or remove the class from. This is accomplished by using the field’s unique id.

The easiest way to get the element’s id is to go to the preview pane shown above, right click on the form field and select “Inspect element”:

Avery2

Then the developer window will open and you can view the source to see the element’s id:

The id you want will be inside the <select> element. The id we are targeting above is: f_fcd855d3b148e31193fd00155d61b393

Step 4: jQuery Logic

Don’t forget to start your jQuery custom script with the clickd_jquery(document).ready(function(){ //code goes here}); so nothing is accidentally applied before the page is finished loading. All our code will be inside this function.

Now that we’ve got the id(s) of the field(s) we want to hide, we can use jQuery to add the “.hideMe” class. The first thing we need to do is make the “State” field invisible. We accomplish that with the following code:

The first part of this code clickd_jquery(“#f_fcd855d3b148e31193fd00155d61b393”) gets the field by its id. The .addClass(“hideMe”) is the part that applies the class to make the element invisible.

For the .parent() functions, we could apply the “hideMe” class to the field directly, but that would only make the field invisible and label above the field that says “State” visible. So the solution is to use the .parent() function in succession to get to the top layer container <div> that contains both the field and the label. This way we hide everything.

Now that the “Country” field and “State” field are hidden, we want to apply logic that says “if the user selects a country, we want to make the state field reappear.” We can do so by applying the .change() method in the jQuery API.

Note: Use the same method as before to get the id of the “Country” field and apply the .change() method.

Whenever the user selects a Country, the “State” field will reappear. This has a major flaw—if the user selects ANY country the “state” field will reappear. We only want it to appear if they select United States.

To solve this, we need to add an if statement that will only make the “State” field appear if the value of the choice selected in the “Country” list is equal to the string value “United States”:

If the user selects a country, the if statement will first check to make sure the selected country is “United States” before making the “State” field visible again. This works well if the user selects “United States” the first time, but if the user makes a mistake or changes their mind and decides to then select another country, the state field will still be there and we don’t want that.

The solution is to add an else statement that says “if the user selects a country that is not the United States, we’re going to remove the hideMe class and make the field invisible again”.

So the code would look like this:

In summation, we set the state field to invisible by default and applied conditional logic JavaScript to only make the “State” field reappear if “United States” was selected and made it invisible again if the user initially chose “United States” and then chose another country.

NOTE: Do not set any of the invisible fields as required inside the editor otherwise your customers will not be able to submit the form. (There is a work around for this, but you’ll have to use more JavaScript to dynamically change if a field is required or not. See example.

Written by Avery Lane, Technical Support Specialist

About the Author:

mm
The ClickDimensions marketing team is committed to helping marketers using Microsoft Dynamics 365 achieve their goals.

7 Comments

  1. HoustonBrooke August 14, 2015 at 10:19 am - Reply

    This is awesome. I’m going to try this the first chance I get.

  2. Stephen November 6, 2018 at 4:44 pm - Reply

    Does this only work when using two “List” field types? Trying to use a list selection to hide / unhide a text field and not having much luck…

    • mm
      ClickDimensions Marketing November 9, 2018 at 9:31 am - Reply

      Thanks for your question, Stephen! No, it doesn’t only work on list field types. You should be able to hide any element that you wish with the right coding.

  3. Josie December 11, 2018 at 9:22 am - Reply

    Hi

    Would i be able to do this with a hidden component? So hide a form upload unless required?

    Thanks

    • mm
      ClickDimensions Marketing December 11, 2018 at 2:54 pm - Reply

      If we understand your question correctly, you want to hide the upload until certain fields are filled out/selected. This should be possible using the techniques outlined in the blog post and possibly further custom JavaScript code.

  4. Angela April 24, 2019 at 10:49 am - Reply

    Hi

    I already used this multiple times and it worked fine.

    But now, it doesn’t work correctly anymore. When I use this function only the list element does hide, but not the label of the list element. How can I also hide the label?

    Thank you.

    • mm
      ClickDimensions Marketing April 25, 2019 at 7:33 am - Reply

      Thank you for your question, Angela! A web developer would be best able to help you troubleshoot the issue since this deals with a custom code.

Leave A Comment