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>
- Property 'id' not found in Illuminate\Contracts\Auth\Authenticatable|null
- Laravel validate array values contained in list
- How to skip blank rows in maatwebsite-excel 3.1 for model-way import on Laravel
- Laravel - Eager Loading Polymorphic Relation's Related Models
- Image and images upload on laravel doesn't work online using laravel 6
- Laravel Filament Logo do not show
- Log-in users in flutter through social accounts with laravel-socialite backend
- FullCalendar/Laravel JSON Event Feed, Controller Route Not Found Problem
- Commit file deletions with Laravel package GrahamCampbell/Laravel-GitHub
- Laravel + Redis Cache via SSL?
- Defining Database Schema in Laravel Eloquent (db.schema error)
- Flowbite & LiveWire - Force re-render
- How to set and change ( title of page ) in inertiajs and vue3
- Artisan Output not working in a test when calling Model methods
- Laravel tests database migration from schema
- How to Pass Parameters to the handle() Function in Laravel Artisan Commands?
- Error log on Laravel 5 with the URL where error occurred
- Artisan migrate could not find driver
- Laravel 8 pusher event name not working 'App\Events\eventnotify' instead of eventnotify
- Laravel Activity Log won't work on Update and Delete
- Laravel - Delete images from storage / update post
- Laravel: Selecting all films where the condiction is in another table
- Query Condition in Laravel 5
- Laravel - How to save API rest endpoint data into my database
- Laravel (v10.45.1) collection unique method doesn't work expectedly
- How to send a variable from Laravel Controller to a Python script?
- How to alias multiple withCount on the same related object
- What is the difference between whereDate() and where() in Laravel when querying a MySQL database?
- How to update inputs based on a modal selection
- Laravel whereDate and where