How to setup fields events using Triggers & Listeners in Chronoforms8

In our example, we want to hide a textarea by default when the form is loaded, and show it if the user choose the 2nd option in a radio field, for this we find that we have 2 events:

1. Page Load, this will be the first trigger event
2. Value Change of the radio field, this will be the 2nd trigger

Let's create our first trigger, here are the steps:

1. Open the behaviors dropdown in your textarea settings
2. Enable the "Events triggers"
3. Add a new trigger
4. Make sure it's set to "Document Ready", this event is fired whenever the page is loaded
5. Enter a trigger name, in this case we choose "hide_textarea"

Now a trigger named "hide_textarea" will be fired when the page is loaded.

Then we need to configure the textarea to hide when that trigger is fired, here is how to do this:

1. Enable "Events listeners" under behaviors.
2. Click on Add Listener
3. Set the "On trigger of" to the trigger name we want to listen to, in this case "hide_textarea"
4. Set the "Action to do" to hide

Since our listener is in the textarea then this will hide the textarea when the trigger runs, but we could listen to this trigger on any other field too.

Now we need to setup a new trigger to be fired when the value of our radio field is set to the 2nd option, here is how to do this:

1. Open the Radio field settings and enable the "Events triggers" behavior
2. Add new trigger
3. Set the "On" to "Value in"
4. Set values to "ck2" which is the 2nd radio field option, we want the trigger to fire when this option is selected
5. Let's give our trigger the name "show_textarea"

Now we have a new trigger named "show_textarea" and this will be fired when our 2nd radio option is selected

We just need to listen for this new trigger in our textarea to show the textarea when it's fired.

So back to our textarea settings, we need to add a new listener:

1. We add a new listener
2. We set the trigger name to "show_textarea"
3. We set the "Action" to "show"

Now our textarea will be shown once the 2nd radio field option is selected