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
| [] |
| tru | array, these outcomes are run if all of the rules are true. an outcome is an object with the following properties
| [] |
| 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.
