LiveView Form Bindings

We already know that LiveView uses annotations called bindings to tie live views to events using platform JavaScript. This lesson demonstrated the use of two form bindings: phx-submit for submitting a form and phx-change for form validations.

LiveView also offers bindings to control how often, and under what circumstances, LiveView JavaScript emits form events. These bindings can disable form submission and debounce, or slow down, form change events. These bindings help you provide sane user experiences on the frontend and ensure less unnecessary load on the backend.

Let’s take a brief look at these bindings and how they work.

How to submit and disable a form

By default, binding phx-submit events cause three things to occur on the client:

• The form’s inputs are set to read-only
• The submit button is disabled
• The phx-submit-loading CSS class is applied to the form

While the form is being submitted, no further form submissions can occur, since LiveView JavaScript disables the “submit” button. We can further customize this behavior. The phx-disable-with binding lets us configure the text of a disabled “submit” button.

To try it out, we opened up the pento/lib/pento_web/live/promo_live.html.leex and added a phx-disable-with attribute like this: