Livewire with alpinejs conflict

#1

I have a weird problem
I have tabs inside the form (using livewire) when I hit to switch the tabs it submits the form, any ideas?

part of the code

....
              <form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 w-10/12 mx-auto"
                        wire:submit.prevent="update">
                    <div
                        x-data="{
                        openActiveTap: 1,
                          activeClasses: 'border-l border-t border-r rounded-t text-blue-700',
                          inactiveClasses: 'text-blue-500 hover:text-blue-800'
                        }"
                        class="p-6"
                    >
                        <ul class="flex border-b">
                          <li @click="openActiveTap = 1" :class="{ '-mb-px': openActiveTap === 1 }" class="-mb-px mr-1">
                            <button :class="openActiveTap === 1 ? activeClasses : inactiveClasses"
                                     class="bg-white inline-block py-2 px-4 font-semibold">
                              General Settings
                            </button>
                          </li>
....
#2

Likely because your button is triggering the submit. By default, buttons submit forms. You need to add type="button" to the button.

1 Like
#3

You are right, I forget about it at all,
thank you for your help

#4

@skywalker @shortbrownman

I am using this technique. Getting data on form submit.

But other inputs like input text, radio buttons, select (only one option select) are working fine.
Only select input with multi select option not working.

#5

what about the real time validation in this case?