My situation:
I have 2 checkboxes and a container-field (with some more fields inside).
If none of the checkboxes are checked, i want to show the container, if either checkbox 1 OR 2 is checked, I want to hide the container.
I believe that implementing this conditional logic is not possible with the standard event listeners and triggers, so I went to using JavaScript.
I have managed to add eventlisteners that check the conditions of both checkboxes:
function issueTrigger(triggerName) {
var event = new Event(triggerName);
document.dispatchEvent(event);
}
function check_conditions(event) {
const checkbox1 = document.querySelector('#checkbox_id_1');
const checkbox2 = document.querySelector('#checkbox_id_2');
if (checkbox1.checked || checkbox2.checked) {
alert("hide_container");
issueTrigger("#hide_container");
} else {
alert("show_container");
issueTrigger("#show_container");
}
}
// Wait for the form elements to load
window.addEventListener('DOMContentLoaded', function() {
// Get the checkbox element by its ID
const checkbox1 = document.querySelector('#checkbox_id_1');
const checkbox2 = document.querySelector('#checkbox_id_2');
// Add the 'change' event listener
if (checkbox1) {
checkbox1.addEventListener('change', check_conditions);
}
if (checkbox2) {
checkbox2.addEventListener('change', check_conditions);
}
});When I execute this, the alert boxes popup correctly in my browser, so the conditional logic works. However, the triggers that I issue seem to not reach the listener-part of my container-field.
Can someone in this forum help me out on this?
Hi kvw
This scenario is doable with the core Triggers/Listeners, here is how:
- In any of your fields, maybe one of the checkboxes, add a trigger, on Document Ready, "hide_container"
- In your Container, add a listener, trigger = "hide_container", action = Hide
- Now your container should be hidden on page load.
- Still in the container, add 2 listeners, "show_1" and "show_2"
- For both of them, set the Action = Show
- Add one more listener, "hide_any" and set Action = Hide
- Then in each checkbox add one trigger, "show_1" on Value in 1, and for 2nd checkbox "show_2" on Value in 1
- Now, checking any of the checkboxes will show the container.
- Again, in each checkbox add one trigger, "hide_any" on Value NOT IN 1
- Now when both checkboxes are unchecked, hide_any will be triggered and that will hide the container.
- I assumed the value of each checkbox is "1"
I think this should do what you need
Hi Max,
Thanks for your quick answer. I have followed the steps you described and (of course) it works! Thanks for that!
Your answer painfully showed that I did not understand the whole triggering system, though...
The whole day I was trying to figure out why it works the way you described.
But now I think I understand. Now, also the remark "Note: All conditions for the same trigger (in all fields) are validated before the trigger is fired" becomes clear to me.
However, in some cases it might still be needed to send a trigger from a JavaScript. So: would it be possible to do that? And if yes: how?So basically, how should a function like:
function issueTrigger(triggerName) {
var event = new Event(triggerName);
document.dispatchEvent(event);
}be programmed in order to fire a trigger which could be handled by an event-listener of a field/container?
Thanks again and keep up the good work..
Hi kvw
Great, glad you managed to get it working.
The easiest way to call a trigger manually, is to set the value of a field with the trigger using code and dispatch the Change event on that field, so if you have a trigger like this one:
if you set the value of this field to "test" using JavaScript then dispatch "change" then the trigger will fire.
