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)'

 

Riadh Rahmi

Senior Web Developer (Drupal & Laravel)

I am a senior web developer, I have experience in planning and developing large scale dynamic web applications especially in Drupal and Laravel.

Web Posts

Search

Page Facebook