clear_on_hide

Important! Since version 1.7, clear_on_hide will reset the initial values instead of clearing all values.

By adding the clear_on_hide attribute to the group tag, you are indicating that all fields within this group should be reset to their initial values, the moment the group gets hidden. So when the group gets hidden, the following should happen:

  • clear the value off all text based fields (text, email, number, …)
  • set select fields to the default option or the the first option in the list if no default option is specified.
  • reset all radiobuttons and checkboxes to their default values.

Notice: In most cases you do not need this setting. If the sole reason for clearing the fields is that you don’t want to include the values in the email, it might be easier to simply use conditional tags in the e-mail message instead.

Form

    Show group

    Fill out these fields, then uncheck the checkbox, and check it again. Now everything should be cleared.

    text field:

    dropdown:

    radio: radio 1radio 2

    checkboxes: check-1check-2check-3

    Form Code

    [checkbox show-group "Show group"]
    [group group-1 clear_on_hide]
    Fill out these fields, then uncheck the checkbox, and check it again. Now everything should be cleared.<br>
    
    text field: [text text-1]
    
    dropdown: [select menu-1 "-- please select --" "option 1" "option 2"]
    
    radio: [radio radio-314 "radio 1" "radio 2"]
    
    checkboxes: [checkbox* checkbox-0 "check-1" "check-2" "check-3"]
    
    [/group]
    <br>
    [submit "Send"]

    Email Code

    show-group : [show-group]
    [group-1]
      text-1 : [text-1]
      menu-1 : [menu-1]
    [/group-1]

    Conditional Fields (export)

    show [group-1] if [show-group] equals "Show group"

    A bit more advanced (pseudo-nested groups)

    In this somewhat more advanced example group-2 is visible when the checkbox in group-1 is checked.
    But group-1 has the clear_on_hide property, so whenever group-1 gets hidden, the check-1 field gets cleared, triggering group-2 to get hidden as well.

    So basically, whenever group-1 gets hidden, group-2 gets hidden as well, making group-2 behave as a child group of group-1

    Form

      Show group-1

      This is group-1
      Show group-2

      This is group-2

      Form Code

      [checkbox check "Show group-1"]
      [group group-1 clear_on_hide]
      
        This is group-1
        [checkbox check-1 "Show group-2"]
      
      [/group]
      [group group-2]
      
        This is group-2
      
      [/group]

      Conditional Fields (export)

      show [group-1] if [check] equals "Show group-1"
      show [group-2] if [check-1] equals "Show group-2"

      Alternative

      Of course, you can also simply nest 2 groups to achieve pretty much the same effect, without using clear_on_hide:

      Form

        Show group-1

        This is group-1
        Show group-2

        This is group-2

        Form Code

        [checkbox check "Show group-1"]
        [group group-1]
        
          This is group-1
          [checkbox check-1 "Show group-2"]
        
          [group group-2]
        
            This is group-2
        
          [/group]
        
        [/group]

        Conditional Fields (export)

        show [group-1] if [check] equals "Show group-1"
        show [group-2] if [check-1] equals "Show group-2"

        Loopy stuff

        Form

          -- select_group
          -- Group 1 clear_on_hide
          ---- Input 1_1
          ---- Input 1_2
          -- Group 2 clear_on_hide
          ---- select_group_2
          ---- Input 2_1
          ---- Group 2_1 clear_on_hide
          ------ Input 2_1_1 -> clearing this field hides group 2
          ---- Group 2_2
          ------ Input 2_2_1 -> clearing this field shows group 1

          select_group: show group 1show group 2

          Group 1


          Group 2

          select_group_2 : show group 2_1show group 2_2

          Group 2_1

          Group 2_2

          Form Code

          <div style="font-family: monospace;white-space: pre;">
          -- select_group
          -- Group 1 clear_on_hide
          ---- Input 1_1
          ---- Input 1_2
          -- Group 2 clear_on_hide
          ---- select_group_2
          ---- Input 2_1
          ---- Group 2_1 clear_on_hide
          ------ Input 2_1_1 -> clearing this field hides group 2
          ---- Group 2_2
          ------ Input 2_2_1 -> clearing this field shows group 1<br><br>
          </div>
          select_group: [checkbox select_group "show group 1" "show group 2"]
          [group group_1 clear_on_hide]
            <p>Group 1</p>
            [text input_1_1 placeholder "input_1_1"]
            [text input_1_2 placeholder "input_1_2"]
          [/group]
          [group group_2 clear_on_hide]
            <p>Group 2</p>
            select_group_2 : [checkbox select_group_2 "show group 2_1" "show group 2_2"]
            [group group_2_1 clear_on_hide]
              <p>Group 2_1</p>
              [text input_2_1_1 placeholder "input_2_1_1"]
            [/group]
            [group group_2_2]
              <p>Group 2_2</p>
              [text input_2_1_2 placeholder "input_2_1_2"]
            [/group]
          [/group]

          Conditional Fields (export)

          show [group_1] if [select_group] equals "show group 1"
          and if [input_2_1_2] is empty ""
          show [group_2] if [select_group] equals "show group 2"
          show [group_2_1] if [select_group_2] equals "show group 2_1"
          show [group_2_2] if [select_group_2] equals "show group 2_2"
          show [-1] if [-1] equals ""