Form validation, inline validation, dynamic dropdown etc. Making SQLPage client side event driven!

[YunusMechery]

This Show and Tell is about making SQLPage respond to events using HTMX following SQLPage philosophy/conventions.

Setting a new optional on_change parameter to '?' will do a POST to the same page will along with form elements values as parameter. You can validate/use in WHERE clause/etc to make things dynamic, like, depended dropdown populate values based on first dropdwon's selected value, etc, without clicking a Next button as like in multi-step form example in SQLPage.

To make SQLPage client side event driven follow below steps. In this example, only the form component's select input type is made dynamic. HTMX makes all HTML elements event driven in addition to HTML default forms and anchor elements. So you can code this in any component's handlebars.

Step 1: In your shell.sql/navbar.sql, import HTMX:

, 'javascript', 'https://unpkg.com/[email protected]'

Step 2: You can copy paste below line in any component/element's attributes section in corresponding component's handlebars.

form.handlebars

                    `{{~#if on_change}} hx-post="{{on_change}}" hx-target="body" {{/if~}}`

Step 3: Then in SQL page, use the parameter. ? means, it will refresh the same page. Eg: To make child dropdown show values based on parent dropdown, you need to code below parameter only on parent dropdown. Use WHERE clause in child dropdown to show values based passed parameter.

your_form_page.sql
'?' AS on_change

[YunusMechery]

@lovasoa please review and let me know your thoughts

[axelmoe]

Hi @lovasoa ,
no reply? Why?