Sync Behavior Documentation

Jump to : setup | basics | examples

The Sync behavior allows you to control form elements (targets) using other form elements (triggers). See the examples below for an overview of what the sync behavior can do.

Setup

Retrieve the wForms files and enable the wForms extension by adding the following code to the <head> element of your page:

<script type="text/javascript" src="wforms_core.js"></script>
<script type="text/javascript" src="wforms_sync.js"></script>

Synchronization Basics

Like most wForms behaviors, sync relies on a simple class name convention to identify the affected form elements.

A trigger has a class that starts with 'sync-'. A target has a class that starts with 'target-'. The association between triggers and targets is made by using an arbitrary identifier in the second part of the class name.

For instance, sync-a and target-a or sync-dummy and target-dummy. sync-a affects the element with the class target-a but has not effect on target-dummy.

Examples

Synchronizing Checkboxes

Click in the first checkbox to change the state of the two others.

<input type="checkbox" class="sync-a" name="cb1"... />
<input type="checkbox" class="target-a" name="cb2" ... />
<input type="checkbox" class="target-a" name="cb3"... />

Synchronizing Text Inputs

The value of the first field is set for the two others while typing

 

<input type="text" class="sync-b" name="txt1"... />
<input type="text" class="target-b" name="txt2" ... />
<input type="text" class="target-b" name="txt3"... />

Synchronizing Select and Radios

Changing the select will change the radios


<select id="select1" name="select1">
<option class="sync-c" ...>Source Choice 1</option>
<option class="sync-d" ...>Source Choice 2</option>
<option class="sync-e" ... >Source Choice 3</option>
</select>
<input type="radio" class="target-c" name="radio1"/>
<input type="radio" class="target-d" name="radio2"/>
<input type="radio" class="target-e" name="radio3"/>

Synchronizing Checkboxes and Multiple Select

Click on the checkboxes to select their correspondents in the multiple select.


<input type="checkbox" class="sync-f" .../>
<input type="checkbox" class="sync-g" .../>
<input type="checkbox" class="sync-h" .../>
<select multiple="multiple">
  <option class="target-f" ...>Target Choice 1</option>
  <option class="target-g" ...>Target Choice 2</option>
  <option class="target-h" ...>Target Choice 3</option>
</select>

Button Input - Text Input

The value of the button is set for the text input when the button is clicked.



<input type="button" value="This is the value" class="sync-i" ... />
<input type="text" class="target-i" ... />

 

wForms is an open-source, unobtrusive javascript library that adds commonly needed behaviors to traditional web forms without the need for any programming skill.