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.
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:
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:
Step 2: Adding CSS
Now, open up the code editor:
A window will appear that has four sections—HTML, JavaScript, CSS, and Preview. However, only the CSS and JavaScript fields will be editable.
Once the code editor is open, the first thing you’ll want to do is add the following CSS class in the CSS editor:
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”:
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.
You can demo the example form here.
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
Powered by WPeMatico