Cannot submit form to add new model

[wotta]

Describe the bug
I tried creating a new "model" using three inputs that are "wired" to their respective public variables in the livewire component class.
On the form I added "wire:submit="storeShop" which I would expect trigger the storeShop function that will create a new "Shop" model, but it didn't work.

I made sure to add the quickstart code to the my project in the same "Component" and "view" and those do work.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://gist.github.com/wotta/0c2efa1153052184186833695685b33b
2. Add those files to a fresh project
3. Create a Shop model with the fields that I added.
4. Register the livewire route.
5. Go to 'project.test/shops'
6. Fill the form
7. See that the page gets refreshed and the url is : project.test/shops?

Expected behavior
I expected that the form wouldn't refresh the page but submit the function with the data that was filled in the input fields.

Screenshots
https://monosnap.com/file/s8qQqgmz9PgBokAzFylPrj3bjBkNXp

Desktop (please complete the following information):

• OS: MacOS 10.14.3 Beta (18D39a)
• Vivaldi | 2.6.1566.49 (Stable channel) (64-bit)
• Revision | d126d99a97ff62b9503aa8f44003e70741c4d90f
• JavaScript | V8 7.5.288.30
• Flash | 32.0.0.223 /Library/Internet Plug-Ins/PepperFlashPlayer/PepperFlashPlayer.plugin
• User Agent | Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.145 Safari/537.36 Vivaldi/2.6.1566.49

I hope somebody can help me.

Best regards,
Wouter.

[lightwalkernet]

I think all you are missing is 'prevent' in order to prevent the default action.
<form wire:submit.prevent="addTodo">

This works as it is preventing the default action of the form submission

[wotta]

@lightwalkernet I added the .prevent but that didn't work unfortunately.
I will go through the docs to see if I can find something about this.

[wotta]

@calebporzio @lightwalkernet So I thought I also tag Caleb since I solved it.
I was using the quickstart counter and my form.

Somehow using both in the same component ( both class and view ) will result in the fact that the form that I used to add custom "shops" to be ignored.
When I removed the quickstart code everything worked.

I am not sure at this point if that is intended.

[calebporzio]

@wotta, I wonder if .preventing the submit event on the button is what caused your problem:

It looks like you are listening for a "submit" on both the button and the form. Maybe try just the form. Also, there is .stop if .prevent doesn't do it.

Hope this helps, I'm interested to hear if that was it?

[wotta]

Goodmorning @calebporzio.
So I managed to get it working by removing the quickstart code from view.
the wire:submit is still on the button and the form but it works so that isn't the problem.

For me, the problem was most likely the 2 extra buttons that counted up and down the "counter".

If you want I can set up a small repository with the same setup I had before.

[calebporzio]

Ok, I see - no need to show me code - I'm going to close this for now then.

[wotta]

Sure thing, thanks for taking a look I really appreciate it.
Good luck with the launch 🙂

[lancepioch]

I just wanted to let you guys know that I got this same issue.

I resolved it by changing my component from:

<form wire:model.lazy="actionHere">
    ...
</form>

to:

<div>
    <form wire:model.lazy="actionHere">
        ...
    </form>
</div>

It looks like the root div can't have any (or some) wire attributes.

[davidpiesse]

Hi! Currently a Livewire component needs a plain div at the topmost level. There is another issue on this somewhere... 🕵️

…

On Sun, 28 Jul 2019, 22:42 Lance Pioch, ***@***.***> wrote: I just wanted to let you guys know that I got this same issue. I resolved it by changing my component from: <form wire:model.lazy="actionHere"> ... </form> to: <div> <form wire:model.lazy="actionHere"> ... </form> </div> It looks like the root div can't have any (or some) wire attributes. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <https://github.com/calebporzio/livewire/issues/49?email_source=notifications&email_token=AAGDPCW63A6XP7DB6YI7EPTQBYHFVA5CNFSM4IFMVMP2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD27HELA#issuecomment-515797548>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAGDPCT2YQGQNLBF3OYBGX3QBYHFVANCNFSM4IFMVMPQ> .

[abdellahrk]

Hi! Currently a Livewire component needs a plain div at the topmost level. There is another issue on this somewhere...
…
On Sun, 28 Jul 2019, 22:42 Lance Pioch, @.***> wrote: I just wanted to let you guys know that I got this same issue. I resolved it by changing my component from:

... to:

...

It looks like the root div can't have any (or some) wire attributes. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#49>, or mute the thread https://github.com/notifications/unsubscribe-auth/AAGDPCT2YQGQNLBF3OYBGX3QBYHFVANCNFSM4IFMVMPQ .

Yes I faced a similar issue and I have my form to submit after removing everything and not extending the layout but using a div or a form as root elements.

[bicibg]

This took me a moment to figure out but I can confirm that the component needs an empty div at the topmost layer. i.e.

<div>
    <form wire:submit.prevent="someFunction">
        ...
    </form
</div>

[javedbaloch4]

My form wasn't working, I forgot to add in my main theme.

<livewire:styles />
<livewire:scripts />

[ReubenRahul]

Never miss the add @livewireStyles and @livewireScripts