laravelmdbootstrapstepperformwizardstep
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>
- How to Migrate and seed before the full test suite in Laravel with in memory database?
- How to create a rendered view from a string instead of a blade file?
- My Routes are Returning a 404, How can I Fix Them?
- How to save API endpoint into database?
- Laravel API: Timestamps (updated_at, created_at) are null
- How to get column between two values as per user input
- Laravel: renaming database table breaks functionality
- saving number field with a value of zero in Laravel 5.5
- Adding secondary query to query based on parameter in Laravel
- Trouble Overriding Default Tailwind Colors in Laravel with Vite
- Use JavaScript Code to run Puppeteer from Laravel Controller
- Memory exhausted while running phpunit
- jQuery isn't working properly in Laravel 8
- Vite manifest not found at: /css/custom.css/manifest.json
- Append a Laravel collection with another collection
- Call to undefined method Dompdf\\FrameDecorator\\Page::add_line()
- How to set compilerOptions.isCustomElement for VueJS 3 in Laravel project
- Laravel validator and excel files error
- Statamic AppServiceProvider halting app bootstrapping
- Laravel Removing Pivot data in many to many relationship
- Laravel Mix does not give local url address
- How to write custom validation rule in controller Laravel?
- Error 500 - Premature end of script headers in Laravel
- How to solve this error in the Laravel project: SQLSTATE[HY000] [2002] No such file or directory?
- HTTP 500 Error (Axios, React/Laravel, WSL2, Docker)
- Overriding the "email" attribute on Notifiable Trait Laravel
- How to call custom helper in laravel 5?
- InertiaJS - Vue - Laravel : Utilizing CSS Files
- Make adding custom instrumentation in Sentry less verbose
- How to get Route name in Laravel 8