The stepper form does not send data after clicking submit. MDBootstrap Laravel
I'm using "laravel vue ui auth" to authentication, and all the functions are working. then I changed the form register using stepper from mdbootstrap. But the submit button doesn't work and the data doesn't perform the post action. There seems to be a flaw or error in the stepper, but I don't know what it is. blade:
<ul method="POST" action="{{ route('register') }}" class="stepper linear">
@csrf
<li class="step active">
<div class="step-title waves-effect waves-dark">Personal Info</div>
<div class="step-new-content">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="name">Full Name</label>
<input id="name" type="text" class="form-control @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" placeholder="Via Sarah">
</div>
</div>
</div>
<div class="step-actions">
<button class="waves-effect waves-dark btn btn-sm btn-primary next-step">CONTINUE</button>
<button class="waves-effect waves-dark btn btn-sm btn-secondary previous-step">BACK</button>
</div>
</div>
</li>
<li class="step">
<div class="step-title waves-effect waves-dark">Login Information</div>
<div class="step-new-content">
<div class="form-group">
<label for="email" class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>
<div class="col-md-6">
<input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email">
@error('email')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="form-group">
<label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Password') }}</label>
<div class="col-md-6">
<input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="new-password">
@error('password')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="form-group">
<label for="password-confirm" class="col-md-4 col-form-label text-md-right">{{ __('Confirm Password') }}</label>
<div class="col-md-6">
<input id="password-confirm" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password">
</div>
</div>
<div class="step-actions">
<div class="form-group">
<button class="waves-effect waves-dark btn btn-sm btn-primary m-0 mt-4" type="submit">{{ __('Register') }}</button>
</div>
</div>
</div>
</li>
</ul>
controller:
protected function create(array $data)
{
$user = User::create([
'name' => $data['name'],
'email' => $data['email'],
'password' => Hash::make($data['password']),
]);
return view('auth.register');
}
Solution
The controller method needs to be public not protected.
Also use Request $request in the arguments.
Here is code:
public function create(Request $request)
{
// Validate request
$user = User::create([
'name' => $request->name,
'email' => $request->email,
'password' => Hash::make($request->password),
]);
return view('auth.register');
}
Note: Don't forget to use Request in the top of controller.
Update:
Wrap your <ul> with form. <ul> doesn't support method and action attributes.
Here is the final version:
<form method="POST" action="{{ route('register') }}">
<ul class="stepper linear">
@csrf
<li class="step active">
<div class="step-title waves-effect waves-dark">Personal Info</div>
<div class="step-new-content">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="name">Full Name</label>
<input id="name" type="text" class="form-control @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" placeholder="Via Sarah">
</div>
</div>
</div>
<div class="step-actions">
<button class="waves-effect waves-dark btn btn-sm btn-primary next-step">CONTINUE</button>
<button class="waves-effect waves-dark btn btn-sm btn-secondary previous-step">BACK</button>
</div>
</div>
</li>
<li class="step">
<div class="step-title waves-effect waves-dark">Login Information</div>
<div class="step-new-content">
<div class="form-group">
<label for="email" class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>
<div class="col-md-6">
<input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email">
@error('email')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="form-group">
<label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Password') }}</label>
<div class="col-md-6">
<input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="new-password">
@error('password')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="form-group">
<label for="password-confirm" class="col-md-4 col-form-label text-md-right">{{ __('Confirm Password') }}</label>
<div class="col-md-6">
<input id="password-confirm" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password">
</div>
</div>
<div class="step-actions">
<div class="form-group">
<button class="waves-effect waves-dark btn btn-sm btn-primary m-0 mt-4" type="submit">{{ __('Register') }}</button>
</div>
</div>
</div>
</li>
</ul>
</form>
- Laravel phpunit testing get with parameters
- Filament PHP: Showing RelationManager Table through Action
- How to get single dimensional array from two dimensional array in php/laravel?
- Job has been attempted too many times or run too long
- Laravel Livewire - How to force child component refresh
- Session store not set on request Laravel 11
- Why to use DB::raw inside DB::select in Laravel?
- How to use composite primary key in laravel 8?
- Cannot declare class Controller, because the name is already in use
- zsh: command not found: laravel - How to fix
- Attempt to assign property "Tenant_id" on null
- Laravel - Edit and Update Page
- How to generate mobile phone number with Faker
- What is .phpunit.result.cache
- During seeding, i have to face this error "Attempt to read property "id" on null"
- Get a distinct list of all related model instances in Eloquent
- Laravel livewire repeater loading time
- Laravel: display data in view without Eloquent
- Fetch recent chat entries per user using Laravel Eloquent
- Clean an array in Laravel
- Highcharts error 14 when passing in an manually created JSON string
- Why can't laravel/eloquent find certain table?
- What's the best way to localise a date on Laravel?
- Eloquent model update method not working through web but working through tinker in Laravel 10.45.1
- Column not found: 1054 Unknown column '0' in 'field list' - Laravel - I don't have a 0 column anywhere in my code
- how to display 2 google charts inline
- SQLSTATE[42P07]: Duplicate table: 7 ERROR: relation "migrations" already exists
- Class \"Barryvdh\\DomPDF\\Facade\" not found"
- In Laravel, how can I obtain a list of all files in a public folder?
- Laravel Livewire - Lookup a table and return data