Input Trigger API

The API allows to change elements' visibility or status (enabled/disabled) basing on other elements' statuses. Example: enable a button if any checkbox inside another element is checked.

Example

Checked condition

<input type="checkbox" id="triggerChk1" />
<button class="btn disabled"
    data-trigger-action="enable"
    data-trigger="#triggerChk1"
    data-trigger-condition="checked">
    Check the checkbox
</button>

Value condition

<p>
    <input
        type="text"
        id="triggerTxt1"
        value=""
        onkeyup="$(this).trigger('change')"
        placeholder="Enter 'foo' or 'bar' here"
        class="form-control" />
</p>

<div
    class="callout callout-success"
    data-trigger-action="show"
    data-trigger="#triggerTxt1"
    data-trigger-condition="value[foo][bar]">

    <div class="content">
        Passphrase is valid!
    </div>
</div>

Supported data attributes

  • data-trigger-action, values: show, hide, enable, disable, empty
  • data-trigger: a CSS selector for elements that trigger the action (checkboxes)
  • data-trigger-condition, values:
    • checked: determines the condition the elements specified in the data-trigger should satisfy in order the condition to be considered as "true".
    • unchecked: inverse condition of "checked".
    • value[somevalue]: determines if the value of data-trigger equals the specified value (somevalue) the condition is considered "true".
  • data-trigger-closest-parent: optional, specifies a CSS selector for a closest common parent for the source and destination input elements.

Example code:

<input type="button" class="btn disabled"
    data-trigger-action="enable"
    data-trigger="#cblist input[type=checkbox]"
    data-trigger-condition="checked" ... >

Multiple actions are supported:

data-trigger-action="hide|empty"

Multie value conditions are supported:

data-trigger-condition="value[foo][bar]"

Supported events

  • oc.triggerOn.update - triggers the update. Trigger this event on the element the plugin is bound to to force it to check the condition and update itself. This is useful when the page content is updated with AJAX.
  • oc.triggerOn.afterUpdate - triggered after the element is updated

JavaScript API

$('#mybutton').triggerOn({
    triggerCondition: 'checked',
    trigger: '#cblist input[type=checkbox]',
    triggerAction: 'enable' 
})

Keep informed

Sign up to our newsletter to receive updates on Winter CMS releases, new features in the works, and much more.
We'll never spam or give this address away.

Latest blog post

The Winter CMS Web Installer is now available!

Published June 17, 2021
We are super excited to announce that our new Web-based Installer is finally available for download, to make it super easy to get your next Winter CMS project started!

View this post Read all posts

Latest Winter CMS release

v1.1.3

Released April 26, 2021
3 UX/UI Improvements, 19 API Changes, 23 Bug Fixes, 3 Security Improvements, 4 Translation Improvements, 1 Community Improvement, 2 Dependencies

View details View all releases