Please Disable Your Browser Adblock Extension for our site and Refresh This Page!

our ads are user friendly, we do not serve popup ads. We serve responsible ads!

Refresh Page
Skip to main content
On . By CodimTh
Category:

Question:

i've set up a very simple form to test out wizard page visibility. i cant seem to hide page 2 based on condition of fields in page 1.

set up and test

  • wizard page(1) has a checkbox(1) and a text field(1).
  • wizard page(2) has a text field(2).
  • page(1) text field condition = visible if checkbox(1) is checked.
  • test result: pass. toggles on and off with the checkbox(1).
  • wizard page(2) condition = visible if page(1) checkbox(1) is checked.
  • test result: fail(?). checking and unchecking checkbox(1) has no effect on page(2) visibility which remains visible regardless.

When i test the form it does skip page(2) if checkbox(1) is unchecked but the behaviour is more like enabled/disable than visible/hidden.

Example:

step_1:
  '#type': wizard_page
  '#title': 'Step 1'
  select_trigger:
    '#type': select
    '#title': 'Select Trigger'
    '#options':
      - Hide
      - Show
    '#required': true
step_2:
  '#type': wizard_page
  '#title': 'Step 2'
  flexbox_container:
    '#type': flexbox
    '#states':
      visible:
        ':input[name="select_trigger"]':
          value: Show
    radio:
      '#type': radios
      '#title': Radio
      '#options':
        'No': 'No'
        'Yes': 'Yes'
      '#required': true
    checkbox:
      '#type': checkboxes_other
      '#title': Checkbox
      '#options':
        one: One
        two: Two
        three: Three
      '#required': true
      '#states':
        visible:
          ':input[name="radio"]':
            '!value': 'No'
    textbox:
      '#type': textfield
      '#title': Textbox
      '#required': true
actions:
  '#type': webform_actions
  '#title': 'Submit button(s)'

 

Solution:

In the following example, a value from page 1 populates a computed token on page 2. and I will use computed token to make conditions in page 2.

Example:

step_1:
  '#type': wizard_page
  '#title': 'Step 1'
  select_trigger:
    '#type': select
    '#title': 'Select Trigger'
    '#options':
      - Hide
      - Show
    '#required': true
step_2:
  '#type': wizard_page
  '#title': 'Step 2'
  computed_select_trigger:
    '#type': computed_token
    '#display_on': form
    '#value': '[webform_submission:values:select_trigger]'
  flexbox_container:
    '#type': flexbox
    '#states':
      visible:
        ':input[name="computed_select_trigger"]':
          value: Show
    radio:
      '#type': radios
      '#title': Radio
      '#options':
        'No': 'No'
        'Yes': 'Yes'
      '#required': true
    checkbox:
      '#type': checkboxes_other
      '#title': Checkbox
      '#options':
        one: One
        two: Two
        three: Three
      '#required': true
      '#states':
        visible:
          ':input[name="radio"]':
            '!value': 'No'
    textbox:
      '#type': textfield
      '#title': Textbox
      '#required': true
actions:
  '#type': webform_actions
  '#title': 'Submit button(s)'

 

Comments

Add new comment

Restricted HTML

Search

Page Facebook

Become a patron

If you need some help or you search a Drupal freelancer don't hesitate to contact us.

 

Contact Us

All the content is FREE but I still need your help

 

Become a patreon