formConditons - jQuery UI widget that maikes building dynamic forms easier

Posted: July 12, 2011

Tags:

Creating dynamic forms can be time consuming. Hiding one field based on another field value is pretty easy. But when you have to set up a form with many inputs showing and hiding based on may different input values your code can get ugly really fast. formCondtions plugin attempts to make your life easier by providing a standard api to get your form code under control.

The markup

The plugin assumes that your form markup is very simular to this

<form>
	<fieldset>
            <legend>Contact Info</legend>
            <div>
                <label>first name</label><input type="text" name="firstname">
            </div>
            <div>
                <label>last name</label><input type="text" name="lastname">
            </div>
            <div>
                <label>email</label><input type="text" name="email">
            </div>
        </fieldset>
</form>

Each input and label must be wrapped in another element such as a <div> <span> <li> , etc. This lets the pugin easly show / hide that element. Note: you don't have to have a fieldset.

Set up your conditions

$('form').formConditons({
    conditions: [
        {
            name: 'lastname',
            rules: [
                {
                    selector: 'input[name=email]',
                    operator: 'contains',
                    value: '@'
                }
            ],
            tru: [
                {
                    selector: 'input[name=lastname]',
                    action: 'show'
                }
            ],
            fal: [
                {
                    selector: 'input[name=lastname]',
                    action: 'hide'
                }
            ]
        }
       
})

On this form I'm saying if the email contains @ show the lastname field else hide it.

Options

Currently there is only one option for this plugin, conditions, It's a array. Here is the break down of a condtion

parameter	description	default
name	The name of the condition. This isn't required but if you want to remove the condition from the form you will need to supply one
rules	array comprised of objects with the following properties selector - this is a jquery selector of the input you are targeting operator - string, possible values are, equal, not-equal, checked, contains, doesn't-contain value - like # used in conjunction with operator	[]
tru	array, these outcomes are run if all of the rules are true. an outcome is an object with the following properties action - show, hide or function selector: jquery selector only used for outcomeActions	[]
fal	see tru, the only difference is that these outcomes are run if the rules are false, Say you have 3 rules on defined and only 2 of them are true then this set of outcomes would run	[]

Methods

name	description	Arguments
addCondition	Add a condtion to the stack	conditon object
removeCondition	remove a condtion	name of the condtion

As a side note you can add your outcome actions by extending the widget protoype like this

$.extend($.jb.formConditons.prototype.outcomeActions,{
      'youractionname': function(){}
})

Please feel free to leave your ideas and or comments below.

» Read More