Form Subscribe Demo

Subscribe Events

Waiting for you to click "First"

Explanation

This updates when any form emits the event "submit". It then then runs the action data attribute. It guards against all form submissions with the match condition.

Code

    is=form-subscribe
    data-event="submit"
    data-match="submitter: { id: 'first' }"
    data-action='this._x ??= 0; this._x++; $("#t-1").html(`Hello from First ${this._x} times!`)'

Waiting for you to click "Second"

Explanation

This updates when the element "#second" is clicked. It then then runs the call data attribute function location on the window.

Code

    is=form-subscribe
    data-event="click"
    data-target-el="#second"
    data-call='myApp.second'

Waiting for you to update "Third"

Explanation

This updates when the Third input emits the event "input". It debounces by 500 ms. It then runs the action data attribute.

Code

    is=form-subscribe
    data-event="input"
    data-target-el="#third"
    data-action="$('#t-3').html(`${event.target.value}`)"
    data-debounce=500

Waiting for you to anything but "Fourth"

Explanation

This updates when any form emits the event "submit". It then then runs the call data attribute function location on then window. It guards against the fourth button with the not match condition.

Code

    is=form-subscribe
    data-event="submit"
    data-match-not="submitter: { id: 'fourth' }"
    data-call='myApp.fourth'

Waiting for you to click "Fifth"

Explanation

This updates when any form emits the event "submit". It then then runs the call data attribute function location on then window. It guards against the fifth button with the data-match condition. It debounces by 1 second.

Code

    is=form-subscribe
    data-event="submit"
    data-match="submitter: { id: 'fifth' }"
    data-call='myApp.fifth'
    data-debounce=1e3

When "Sixth" is clicked this form is submitted.

Explanation

This updates when any form emits the event "submit". It is submitted by the custom element. The submission is caught by the onsubmit handler. It only runs when the button with the ID 'sixth' is matched.

Code

    is=form-subscribe
    data-event="submit"
    data-match="submitter: { id: 'sixth' }"
    onsubmit="
        event.preventDefault();
        this._x ??= 0;
        this._x++;
        $('#t-6').html(`Hello from Sixth ${this._x} times this form has been submitted!`)"

Form Subscribe Demo

Subscribe Events

Create Events