Async form submission

[acalvino4]

Problem

Converting a form to be submitted asynchronously is more of a chore than it seems it should be.
The basic idea here is to reduce boilerplate and make asynchronous forms declarative.

Don't get me wrong, it's very doable, and there are many blogs, such as this which outline the steps. There are a couple reasons I don't like this approach:

• For such a common use case, it seems like too much boilerplate
• It involves scripts tags in markup, when the whole philosophy of alpine is to make things declarative. I'm sure this could be moved to separate js files, but that code wouldn't be necessary on every page, so you'd have to make sure you're loading only in the appropriate pages....... the point is that it even if it's doable, it seems needlessly complex for such a common use-case

On the other hand, it would be awesome and ideal to bake this into alpine bc:

• It's a very common use-case
• It's possible to make more declarative

Proposal

• A way of marking certain forms to be submitted asynchronously, perhaps just like <form x-async method=...
• Alipine runs this boilerplate on pageLoad (adapted from here)

for (let f of  document.querySelectorAll('form[x-async]'))
    f.addEventListener('submit', asyncSubmit);
    
function asyncSubmit(e) {
    e.preventDefault();
    const xhr = new XMLHttpRequest();
    const { attributes, action } = e.target;
    xhr.open(attributes.method.value, action);
    xhr.send(new FormData(e.target));
}

• Of course non-trivial cases need to know what the response is and potentially act on it, so provide x-success and x-failure which case take functions. The above function asyncSubmit would then be extended to retrieve the response promise from xhr and execute the appropriate functions on reject and resolve

Alternatively, just a single x-form attribute that

• attaches an event listener as above to the form which causes asynchronous submission
• provides a magic or js variable for the current loading state which could be binded to from within the form
• takes an object were you can set functions to execute on reject and resolve

The more I think about this, the more it seems this would probably fit better in a plugin than core.

[SimoTod]

You can define custom directives in alpine v3 so you could potentially write something already.

That blog article looks a bit old, modern browsers support fetch.

About the syntax, yoy could have something like that

<form x-async="promise => promise.then(response => {doSomething})">