precognition icon indicating copy to clipboard operation
precognition copied to clipboard

Disabling inputs prevents values being sent to server

Open martinbean opened this issue 4 months ago • 0 comments

Laravel Precognition Plugin Version

0.5.4

Laravel Version

10.48.22

Plugin

Alpine

Description

I like to use the Alpine version of Precognition along with “traditional” Blade templates. I’ve noticed that, if I augment a HTML form with the Alpine $form magic, and disable inputs when the form is processing, the inputs’ values aren’t sent to the server.

For example:

<form
    x-data="{
        form: $form('post', '/foo', {
            quantity: null,
        }),
    }"
>
    <fieldset x-bind:disabled="form.processing">
        <label for="quantity">Quantity:</label>
        <input name="quantity" type="number" x-model.number="quantity">
    </fieldset>
    <button type="submit" x-bind:disabled="form.processing">Add to cart</button>
</form>

Doing some digging, it seems the Precognition plugin registers a submit event handler, that sets form.processing to true. When this happens, my <fieldset> elements (and any inputs contained within) are disabled, and therefore their values aren’t sent along with the form submission (I want the form to be submitted server-side rather than asynchronously using the form.submit method from Precognition).

I think the solution to this may be to set form.processing to true on next tick instead. That way, the “native” submission will happen, and the inputs would be disabled immediately after.

Steps To Reproduce

As above.

martinbean avatar Oct 01 '24 17:10 martinbean