Clickbind NPM | npm.io

clickbind

A tiny (pure) JavaScript library to bind HTML elements (div, span, button, etc.) to an input that will take the specified value when this element is clicked. (Appending multiple values to the same input is also available).

Installation

You can add clickbind to your project either by downloading it from this repo, or using it via CDN, or install it with a package manager (NPM/YARN)

Via CDN:

https://cdn.jsdelivr.net/npm/clickbind@1.0.6/clickbind.min.js

Install it with a package manager like NPM:

npm install clickbind

Or with YARN:

yarn add clickbind

Usage

Once the document is ready, if you are loading ClickBind from the script tag, initialize it as follows:

document.addEventListener("DOMContentLoaded", function() {
  ClickBind.bind()
});

Or if you are using a module bundler like Webpack, make sure to import it before using it:

import ClickBind from 'clickbind';

document.addEventListener("DOMContentLoaded", function() {
  ClickBind.bind()
});

You can bind any element like a div, span or a button... to an input text field (a hidden input in most cases) using its class/id/other-selector

<button data-click-bind=".language" data-value="php language" data-active-class="grey-btn">php</button>

<input type="text" class="language" />

When the above buttondata-click-bind is clicked, the input.language will be filled with the value in the buttondata-value attribute, and the button will have the class "grey-btn" added to it.

When the page load, if the input field is filled with a value equal to the button data-value attribute, the button will has the class "grey-btn" automatically.

You can bind multiple data-click-bind elements to the same input:

if the data-value of both is similar, clicking one of them will activate the class on both, and the input field will be filled.
if the data-value of the data-click-bind element is different, the input will take the data-value of the clicked data-click-bind and only that button will have its own data-active-class added.

PS: It's also possible to have multiple data-click-bind elements bound to the same input field, having the same data-value but with different data-active-class, in this case clicking one data-click-bind element will activate all the other similar elements but each one with its own data-active-class

Sometimes, the input field can be filled with values that are equivalent to what your data-click-bind is, and you want to bind it based on these values as well, an example of this would be a Boolean value "true", and "1", in this case you can add data-equivalent-values="1" as follows:

<div class="myelement" data-click-bind=".is-a-bachelor" data-active-class="bordered" data-value="true" data-equivalent-values="1">I'm a bachelor</div>

<input type="text" class="is-a-bachelor" />

Here, whether the input has the value "true" or "1", they will be considered as the same, and the data-click-bind will have the active class added to it.

If you have multiple equivalent values, you need to separate them by comma, i.e: data-equivalent-values="1,yes,ya,ok"

Binding dynamically added Elements to inputs:

Just add the necessary data attributes to the the added element and call ClickBind.bind(), i.e:

let element = document.createElement('div');
element.setAttribute('data-click-bind', '.target-input');
element.setAttribute('data-value', 'hello world!');
element.setAttribute('data-active-class', 'primary-bg')
document.body.append(element);
ClickBind.bind(); // bind the newly added element

Make sure you call ClickBind.bind() whenever you add new data-click-bind elements to the page.

Set other (related) fields to empty on click

In some situation (i.e: sub-category selection) you need to empty some fields that are not directly bound to the data-click-bind when it's clicked, in order to achieve this, just add data-onclick-set-empty='selector1,selector2,...'

<button data-click-bind=".language" data-value="java" data-onclick-set-empty=".popularity">Java</button>

<button data-click-bind=".language" data-value="Rust" data-onclick-set-empty=".popularity">Rust</button>

<input class="language" />
<input class="popularity" />

In the above example, each time you click one of the button, the input.popularity will be reset to empty ('')

Append multiple (clicked) data-click-bind values to the same input:

To append multiple values to an input instead of replacing them, just add the data attribute data-append="true" to data-click-bind element.

<button data-click-bind=".browsers" data-value="chrome" data-append="true">Chrome</button>

<button data-click-bind=".browsers" data-value="mozilla firefox" data-append="true">Mozilla Firefox</button>

<button data-click-bind=".browsers" data-value="safari" data-append="true">Safari</button>

<input type="text" class="browsers" />

Useful methods

Sometimes you just need to reset (deactivate) all the active/clicked data-click-bind elements, in this case you can use:

ClickBind.deactivateAll('.your-selector')

Equally you can using activateAll to trigger a click on all data-click-bind elements that are not already "selected" and match a certain selector:

ClickBind.activateAll('.your-selector')

You can even activate/deactivate every single data-click-bind element in the page by passing [data-click-bind] as selector:

// deactivate all using:
ClickBind.deactivateAll('[data-click-bind]')
// OR activate all using:
ClickBind.activateAll('[data-click-bind]')

Summary of available data attributes

data-click-bind="selector-of-input" Adding data-click-bind to an HTML element will allow you to bind it an input field.

data-value="value to fill input with" when data-click-bind element is clicked, the input will take this value.

data-active-class="active-class" when data-click-bind is clicked and the input is filled, the active-class will be added to data-click-bind

data-equivalent-values="value1,value2,value3" any value here will be considered equivalent to data-value, for example if you have data-value="javascript" and data-equivalent-values="js,typescript,coffeescript", whenever the input is filled with one of these values, the related data-click-bind will be considered as clicked.

data-no-value="" if set, the connected input will take this value when data-click-bind is turned off.

data-onclick-set-empty="selector1,selector2,selector3" if this data attribute is set, any selector that match it will be set to '' when the data-click-bind element is clicked.

data-append="true" the data-click-bind element that has data-append set to true will be appended to the existing value in the target input.