CODEWITHSUNDEEP
laravel-livewire
cartbeforehorse
cartbeforehorse

Reputation: 3487

Laravel Livewire - should I bother using forms at all?

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>

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?

Upvotes: 0

Views: 1385

Answers (2)

cartbeforehorse
cartbeforehorse

Reputation: 3487

For anyone coming across this question in the future, the correct way to do this is declare the button as a button! See @Peppermintology 's answer.

Another possible solution I've found is to add the prevent modifier to the second button as well:

<button wire:click.prevent="relatedToButSeparateFromForm">Click Me</button>

Upvotes: 1

Peppermintology
Peppermintology

Reputation: 10210

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.

Upvotes: 3

Related Questions