Forms - JavaScript-powered submit

[negcx]

I have been using Alpine a lot lately for a couple different projects (really amazing work on the project, I really love the approach!). One thing that I have thought of that feels like a fit with the goal of the project is the idea of submitting a form and getting a partial back and then updating the DOM, so that you can do a form validation/form submission without doing a page refresh.

I was thinking of figuring out how to implement this (I'm not a JS wizard), but I'm not sure if (a) it already exists, (b) it's a terrible idea for some reason, or (c) it might with Alpine.

The idea is that you basically use a regular form syntax but add a simple tag like x-partial='mydiv' and then override the onsubmit event automatically, package the form inputs, make the request as an API request, and then get the response and patch it into the DOM on mydiv as an example.

The same basic principal could be used to do validation on blur via a partial?

Curious if anyone has thought of this or not. It seems like it would be a really lightweight way to accomplish this.

[ryangjchandler]

Hey @negcx, in my opinion this is outside of Alpine's scope and can be done in user land.

If you're using Laravel, this is exactly the kind of stuff Livewire is designed for - server side validation and templates, with efficient diffing and patching, without writing AJAX requests and API endpoints yourself.

Even outside of Laravel and Livewire, it still wouldn't be too hard using the directives Alpine already provides. You could use a @submit.prevent directive that sends an AJAX request to the server with a serialised version of the form (JSON or URL encoded equivalent). The server could then run some validation, insert some data and just return a string of HTML that you insert using x-html or el.innerHTML

Even further, you could eliminate the server altogether and use a client side validation library that pushes to an errors array on the Alpine component, then use x-for to display those errors.

The possibilities are truly endless, but because of this, I don't think it fits the scope of Alpine v2. When a custom directives API lands in a future version (most probably v3), it would be a useful thing to package up for others to use.

[ryangjchandler]

I'd also like to add that Alpine's main focus isn't on templating and building markup from JavaScript, but rather the inverse. It focuses more on making your existing markup easier to mutate and interact with, using minimal "actual" JavaScript.

[negcx]

I don't use Laravel myself (currently all my Alpine-related work is with Python/Flask). Definitely that was generally the idea, I was just curious if this was contemplated or not, not exactly a feature request but rather a question, as I believe I could implement the same on top of Alpine quite easily.

Thanks!

[jreviews]

Maybe take a look at https://htmx.org

[negcx]

Thanks! That definitely does all the stuff I was looking for, I recently stumbled on that myself as well!

[imacrayon]

I'm working on an Alpine plugin that accomplishes this. I would love feedback: https://github.com/imacrayon/alpine-ajax