Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

sunilbfcj's avatar

Livewire form submit not working

Actually form submitted as formal form submits with get method, also not calling submit function.

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\Traits\API;

class AddCategory extends Component
{
    use API;

    public $data;
    public $name;
    public $color;

    public function submit(){
        //dd($this->name);
        $this->data = $this->callApi([
            'endpoint' => 'category/create',
            'form_data' => [
                'name' => $this->name,
                'color' => $this->color,
            ],
            'method' => 'post',
        ]);

        extract($this->data);

        if($failed){
            foreach($json['errors'] as $key => $error){
                $this->addError($key, $error[0]);
            }
        }

        if($successful){
            return redirect()->back()->with('success','Category created.');
        }

    }

    public function render()
    {
        return view('livewire.add-category');
    }
}

blade file

@section('page-name')
Add Categories
@endsection

@section('content')

<div class="sales-summary w-100 bg-white border mb-4">
  <form wire:submit.prevent="submit" class="flex flex-col w-100 border-1 py-5 px-8">
    <div class="flex flex-col mb-4">
      <label for="name" class="mb-2 text-base text-gray-700">Category Name</label>
      <input type="text" name="name" id="name" class="border-gray-300 focus:shadow-red-900 rounded py-1.5" wire:model="name">
      @error('name')<span class="text-red-700 text-xs">{{ $message }}</span> @enderror
    </div>
    
    <div class="flex flex-row justify-between mt-5">
      <div class="flex">
        <a href="{{ url('help') }}" class="transition bg-keppel py-2 rounded px-4 text-white font-semibold tracking-wide mr-3">Help</a>
      </div>
      <div class="">
        <button type="button" class="transition bg-keppel py-2 rounded px-4 text-white font-semibold tracking-wide mr-3">Cancel</button>
        <button type="submit" class="transition bg-keppel py-2 rounded px-4 text-white font-semibold tracking-wide">Save</button>
      </div>
    </div>
  </form>
</div>

@endsection

0 likes
8 replies
Snapey's avatar

Included livewire scripts on the page?

1 like
karthikswot's avatar

Livewire scripts are included and working well. But the form process just reloading the page.

lushrombile's avatar

Did you solved this? I'm facing the same problem. Even the wire:click does not trigger anything in the network.

dd(here)'s avatar

Step 1 create live wire component Step 2 create a route ; laravel 8 is defined as below Route::get('someroute' , App\Http\Livewire\LiveWireComponentName::class);

Step 3 Livewire component are in 2 parts, class, and view file Step 4 In layouts/app.blade.php create a new file called livewire.blade.php Step 5 Define the following layout, and. make sure to include the component

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	@livewireStyles
</head>
<body>
   @livewire('componentname')  ----> This is most important
   @livewireScripts
</body>
</html>

Step 6 Once the layout is defined, create the submit method, and form Step 7 Go to config/livewire.php, and inside the layout change the layout to "layouts.livewire"

Step 8 Done

Snapey's avatar

@dd(here) why have you posted this out of date code?

erikgreasy's avatar

For any future readers using Livewire 3. This may also be caused by having Alpine manually initialized in your JS file, while Livewire initialize it's own instance. Just remove your Alpine initialization from your JS file and leave it to Livewire itself.

akaydin's avatar

@erikgreasy Do you think this would solve? I tried your suggestion but still not working.

Please or to participate in this conversation.