Turn fields and sections on or off conditionally

Note: Also checkout the corresponding video tutorial here.

Many people like to display certain form fields on demand only, for instance to show additional address fields, contact information and similar.

In this tutorial you will learn how to add conditional fields and sections to your QuickMode form. Note that this feature is available for the QuickMode only! For the other modes you will need to program this feature on you own.

If you don't know how to get started with the QuickMode or BreezingForms installation, then please read the basic tutorials or watch the videos first.

Creating the basic form

Let's start simple and create a QuickMode form in the manage forms section. Give it the name "conditions" and some title.

Add two fields, one textfield with the name "mytextfield" and a radiogroup with the name "switcher".

What we want to do now is to hide "mytextfield" when the form is loaded and only showing up if the user clicks on the radio button "Turn on" - or hiding it if clicking on "Turn off".

First we check the option "Turn off" in the mytextfield's advanced options and click "Save options":

turnoff

 

This will make sure, that "mytextfield" won't be visible when the form loads.

Now click on the "switcher" and in its options you'll find the "Group" box with default values, replace these default values with this and hit "save properties":

0;Turn on;on
1;Turn off;off

Now click on the top element of your form tree on the left, these are the main form settings. Go to its advanced tab and browse to the "Visibility rules" box. Add this into to the box, click "Save properties" and finally save your form in the upper right:

turn on element mytextfield if switcher is on

Such that it looks like this:

visrules

Now click on "preview" or "site preview" in the upper right and check the form. If you now click on "Turn on" the textfield will appear.

Congratulations! You just created your first condition to turn on a field on a certain action (clicking on a radio field with the value "on").

To make it complete, we now want to add another rule to be able to turn it off again (don't forget to click "save properties"):

turn off element mytextfield if switcher is off

It should look like this then:

turn on element mytextfield if switcher is on

turn off element mytextfield if switcher is off

If you now check the preview again, you'll see that you can now turn on "mytextfield" on and off as you wish.

A deeper look into visibility rules

The visibility rules for the QuickMode are used in a "naturally speaking" way. The syntax is simple and is NO PROGRAMMING LANGUAGE. The order of your rules doesn't matter as well.

The syntax for each rule is:

turn [on|off] [element|section] *target element or section name* if *source element name* is *value or command*

The words mustn't be seperated using more than one blank, so this would be invalid:

turn off      element target      if source      is     somevalue

While this is valid

turn off element target if source is somevalue

If you don't set a source specific command (more information below), the whole part after is will be treated as value and will be compared with the value of the selected element.

Tip: If a rule is not applied it will likely be a syntax error.

Form elements that may be used as source

You can use these elements that trigger the rules:

- Radio Group:

Example: turn on element mytext if myradiogroup is on

Once one or more rules are set involving your radiogroup, each click on a radio button will trigger your rules. If one ore more rules are matching the values defined in your group definition the rule will be applied.

- Checkbox

Examples:

turn on element mytext if mycheckbox is !checked

turn off element mytext if mycheckbox is !unchecked

The single checkbox is special and only knows about the state commands that are indicated using a leading !. So if the checkbox is "!checked" the rule will be applied to "mytext". Same goes for "!unchecked"

- Checkbox group

Examples:

turn on element mytext if mycheckbox is !checked

turn on element mytext if mycheckboxgroup is somevalue

turn off element mytext if mycheckboxgroup is !unchecked

The checkbox group works basically the same as the radio group or, to be more precise, is a mix between radiogroups and single checkbox (including a little addition). Please note though, that the 'and' and 'or' functionality does not currently apply to the checkbox group. If you want to allow multiple boxes to be checked or unchecked, but to clear only when there are no boxes checked, then your rules should be defined as follows:

turn on element mytext if mycheckboxgroup is somevalue

turn on element mytext if mycheckboxgroup is someothervalue

turn on element mytext if mycheckboxgroup is anothervalue

turn off element mytext if mycheckboxgroup is !unchecked


- Select (single and multiple)

Examples:

turn on element mytext if mycheckboxgroup is somevalue

turn on element mytext if mycheckboxgroup is #somevalue|someothervalue

turn on element mytext if mycheckboxgroup is #somevalue;someothervalue

The select element knows about testing against a single value or the any command (#somevalue|someothervalue, see checkbox group). It additionally provides the and-command (#somevalue;someothervalue): All these values must be selected before the rule fires.

- Textfield/Textarea

Examples:

turn on element mytext if mycheckboxgroup is somevalue

turn on element mytext if mycheckboxgroup is ![0-9]$

Text can be triggered by finding a certain value or by a regular expression indicated by the command marker (!). The rules will be applied on blur, this means you won't get a result before the user leaves the textfield or textarea.

NOTE: Since 1.7.2 build 737 it is also possible to give elements a value, depending on the on/off state of a section/element.

The syntax is:

if element ELEMENTNAME is off set TARGETELEMENT VALUE
if section SECTIONAME is on set TARGETELEMENT VALUE


While the special rule

if element ELEMENTNAME is off set TARGETELEMENT !empty

will empty the TARGETELEMENT.


The rules should come after the regular visibility rules.

The rules are element-type safe. Means, that it also works for select-lists, checkbox- and radio-groups.

So for these element types you simply would enter the desired value to check/select the element.

 

Other useful information

  • You may also use "isnot" instead of "is" to negate expressions.
  • Validations are disabled for invisible elements
  • Don't forget to turn off your fields inititally in the advanced tab if they need to be invisible on form load
  • You can also disable whole sections. Example: turn off section mysection if mycheckbox is !checked (give your section a name first!)
  • Check our forums if you have problems setting up your rules or contact the support directly

Our Latest Templates



 

Our Discounts



Lifetime Subscription

Get lifetime access to all of our products and 2 years of professional support -- for just $199 USD. No limits on domains!. Includes all of our current and future Joomla!® extensions, WordPress® plugin, Joomla!® templates and WordPress® themes -- all of our products!

Get it from here

3rd Party Discount - 25% Off

We help you to keep your costs under control. If you are a new member and purchased a form building tool from a different form vendor, then you'll get a 25% discount on our 1-Year or Lifetime Subscription plans.

How to receive the discount:

  • Send us a quick email to This email address is being protected from spambots. You need JavaScript enabled to view it. with a proof of purchase (for example a paypal receipt).
  • Await payment instructions and enjoy your membership!

Supporting the Joomla! Community

Offical Joomla! User Groups and organizers of Joomla! Days, registered at Joomla.org, are supported by Crosstec, worldwide!

If you are running a JUG or organize a Joomla! Day and you need any of our products, just write an email to This email address is being protected from spambots. You need JavaScript enabled to view it. and you'll get a Lifetime Membership for free!

About

Crosstec GmbH & Co. KG

Hohenzollernring 57

50672 Cologne, Germany

Imprint


Live Chat Software