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/htmx.org@2.0.2'

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?

[YunusMechery]

If anyone want an independent dropdown component without form, please see : #692 (reply in thread)

[YunusMechery]

i think, this Show and Tell became obsolete as SQLPage v0.33.0 introduced auto_submit parameter for form component.

[number131072]

@YunusMechery
I don't think your show and tell became obsolete. (Thanks for this by the way. Helped me out tremendously.)
There's no submit button when the new auto_submit parameter is used.
So there's no check on required fields.
I think an auto_submit parameter on row level (together with an optional link parameter) would be perfect. (Just like your solution.)
This would provide the most flexibility and make dependency checks/queries a lot easier.

@lovasoa
Might this be something to have a look at? (Thank you very much by the way for this great piece of software. )