Laravel Livewire - should I bother using forms at all?

Question

My Livewire component looks like this. Very simple:

class StartLw extends Component
{
    public $count;

    public function mount() {
        $this->count = 0;
    }

    public function formSubmit() {
        $this->count++;
    }

    public function relatedToButSeparateFromForm() {
        $this->count++;
    }
}

Then I have a <form> on my HTML page which Livewire prevents from a default submit, redirecting it to a Component function. Note that inside the form there is the usual "submit" button, and a secondary button (which does something functionally-related to the form, but is technically separate from submitting the form).

To my mind, this secondary button is just an HTML object, and (perhaps mistakenly) because it isn't declared as a "submit" type, I see no reason that it should attempt to submit the form any more than clicking a check-box should.

<div class="container">

    <div class="row">
        <div class="col"><p>{{ $count }}</p></div>
    </div>

    <div class="row">
        <div class="col">
            <form method="post" wire:submit.prevent="formSubmit">
                <button type="submit">Submit Min Form</button>&nbsp;
                <button wire:click="relatedToButSeparateFromForm">Lookup something related to form</button>
            </form>
        </div>
    </div>
</div>

• When I press the main form-submit button, the on-screen counter => increments by 1
• When I press the secondary (lookup) button, the counter => increments by 2

In other words, the secondary button executes both the function it's told to in the wire:click="" attribute, but also executes the form-submit function. In my real-world application, this behaviour is causing me a major headache.

One option I'm considering is doing away with the <form> element altogether, and just allowing the buttons to work independently of one another (each executing their own wire:click="" function). Using this option and a few wire:model attributes, I think I can make this work. However, dropping <form> tags feels like it's breaking the philosophy of HTML, and I can't help but think that technologies like Livewire should integrate with (such an established technology as) HTML, not change the way it needs to be structured.

Wondering how others have worked around this issue?

Answer 1

It is recommended to specify a type for all buttons. It is quite common for browsers to treat a button without a type as if it had been specified with type="submit" (i.e defaulting to a form submit).

Define type="button" on your secondary button and you should be fine.