Alpine Submit Button in Livewire Form

#1

EDIT: So I just changed the button to a standard HTML submit button and it submitted the data, closed the modal, and refreshed the data on the screen.

Pleased but slightly confused.

I am using this tutorial:

which has a submit button in an Alpine JS modal that calls a JS function, even though the form already has an action. I am confused by this.

How do I just use a button that submits the form, using the action in the form tag and closes the modal, by changing this code of the submit button, without calling a “submitForm” script:

 <button type="button" class="btn btn-primary" :disabled="!dealtype || !price || !commissionpercentage" 
                              @click="submitForm({dealtype: dealtype ,price: price, commissionpercentage: commissionpercentage}).then(() => {
                                  showModal = false;
                                  success= true;
                                })">Add</button>
#2

How did you get the modal to close?

#3

Honestly, I don’t know. I just changed the submit button to a standard HTML button and it worked. Maybe someone else could explain why it worked. Do you have a modal that isn’t closing?

#4

I ended up adding $this->dispatchBrowserEvent('company-added'); to my Livewire component submit method and then have Alpine.js listen for the event and close the modal.

Don’t know if this is the best method but it does work for me now.

1 Like
#5

I’m decent with coding in Laravel. New to Livewire and Alpine.JS. New to Javascript in general. I used to use a lot of JQuery, but am moving away from that and trying to use a proper Javascript framework. I really like what Caleb is doing with Livewire so I’m working on learning. :slight_smile:

1 Like