How to build a Form in a popup?

[burfbari]

Hi,

My understand was that with the alpine(JS) way, it should not reload the page. It looks like even after using alpine, the page reloads at form submit... (I am using a simple form with standard code as per the docs)

As I need to build a form inside a popup, I wouldn't want the page to reload that closes the popup... what am I doing incorrectly? Also, the console even shows an error saying the $form is missing. Below is the error screenshot and code snippet.

Thank you.

<div x-data="{}">
        {{ form:quick_appointment_form attr:x-ref="form" js="alpine" }}
        <div x-data='{
            form: $form(
                "post",
                $refs.form.getAttribute("action"),
                JSON.parse($refs.form.getAttribute("x-data"))
            ),
            init() {
                $refs.form.addEventListener("submit", evt => {
                    evt.preventDefault();
                    this.form.submit().then(response => {
                        this.form.reset();
                        console.log("Success")
                    }).catch(error => {
                        console.log(error);
                    });
                });
            }
        }'>
            {{ if success }}
                <div class="text_xxs">
                    {{ success }}
                </div>
            {{ else }}

                {{ fields }}
                    <div class="form__group">
                        <label>{{ display }}</label>
                        <div class="text_sm">{{ field }}</div>
                        {{ if error }}
                            <p class="error text_xxs">{{ error }}</p>
                        {{ /if }}
                    </div>
                {{ /fields }}

                <button id="form-submit-button" type="submit">
                    Submit
                </button>                        
            {{ /if }}
        </div>
    {{ /form:quick_appointment_form }}
    </div>

[ryanmitchell]

Have you installed the Alpine precognition driver? https://laravel.com/docs/11.x/precognition#using-alpine

[ryanmitchell]

If you are still getting the error then maybe you're not including that javascript in your front end template?

[burfbari]

Sorry, but I am struggling to add it to the front end...
It gives me an error Uncaught SyntaxError: Cannot use import statement outside a module

[ryanmitchell]

What code are you using to add it? There is a vite tag https://statamic.dev/tags/vite

[burfbari]

I was trying @vite('resources/js/app.js')... thanks for the link...
x-model does not seem to work... even when the fields are filled, the variables are not getting populated...

[burfbari]

It finally worked!

Thank you very much 🙏 @ryanmitchell