1

I have the need to set visibility state of a checkbox option in one question (Table checkbox select) based on the value of another checkbox in the same table. I also have other scenarios where I would need same functionality but across different questions in the same webform.

I know I can easily do it between two questions with the built in conditional logic UI in webform but no such UI option for my case now (afaik) so I'm trying to set it via the custom one and this is my first time with form states and custom condition in webform so I appreciate your kind help so greatly.

I went through trials and errors and the code wasn't being saved till I, thanks to @jrockowitz 's tip, learnt that I was using php code where I need to use yaml code since I'm using the yaml source editor (shown in the screenshot below). When I fixed that, my custom code would save and it reflects as entered in the webform source yaml. However, the custom condition is still not working as expected and I'm still not sure why.

I'm adding the code in the Edit source box accessible via clicking its link on the form "Conditions" tab:

webform Custom Condition source edit

*NOTE: The code shown above in the screenshot was the wrong one (php code) I was using in the yaml editor. This wasted me lots of time till I learnt it's wrong.

I got the selectors for the involved question options from the "Available selectors" list by clicking on the "Help" link under "Learn more about Drupal's Form API #states." on the "Conditional Logic" for the element editing tab in my webform.

This is my code now as shown in the custom yaml source editor and saved in the webform yaml but it's not functioning still (q2 question not hidden when q1 is checked):

  '#states':
    ':input[name="some_question[q2]"]':
      '#states':
        invisible:
          ':input[name="some_question[q1]"]':
            checked: true

What am I missing here ?!

  • For those who maybe aren't familiar with the UI edit source, this is a link with info and screenshots : https://www.drupal.org/node/3012686

  • Note: As per @leymannx 's kind advice, I re-wrote the whole question to rid it of my dump of updates with my trials and errors. I hope it's now cleaner, clearer and more worthy of up-votes :)

  • Where are you putting that code exactly? What function? What file? You don't need to recreate the element but only the #states array like this: $form['foo_bar']['#states'] = [ /** whatever */ ]. Do you know of Devel's submodule Kint for debugging? And that you can dump the form with ksm($form) for inspection to get to know the right element names? – leymannx Jun 15 at 23:35
  • 1
    Your custom #states code must be in YAML (not PHP). The best way to get started with YAML is to create a few conditions via the UI and then switch to the source module. – jrockowitz Jun 17 at 0:57
  • 1
    Unfortunately this question gets broader and broader and broader; too broad. Maybe you can rewrite it to reflect just where you are standing currently and dump most of your trial and errors. Also I found quite lots of info in Webform's changelog and issue queue which you might want to have a look at. – leymannx Jun 17 at 11:09
  • 1
    There needs to be a more concrete basic example for everyone to understand what is being targeted with the conditional logic. – jrockowitz Jun 17 at 17:05
  • 1
    You might be able to use a form alter hook to add the needed #states. – jrockowitz Jun 17 at 21:10
0

For the simple case where Question 2 is shown only if Question 1 is left unchecked, your YAML doesn't look right to me. If you're editing YAML in the conditions tab for the Question 2 checkbox, then just the last 3 lines should suffice:

invisible:
  ':input[name="some_question[q1]"]':
    checked: true

I don't think you want the "#states" key to be in there anywhere, nor do you want to include any selector information for Question 2.

That's if the YAML is part of Question 2's Condition source. If on the other hand the YAML you're showing is part of the form's source, then it should probably look something like this:

q2:
  '#type': checkbox
  '#title': 'Question 2'
  '#states':
    invisible:
      ':input[name="some_question[q1]"]':
        checked: true

Note that the #states key is shown here, but only once - we're omitting 2 out of 3 of the same lines as above.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.