How to properly structure this multi step form? - php

Question

I have a page create_conference.blade.php to create new confereces. In this page there is a multi step form:
in the 1st step asks the user for general conference information
in the 2nd asks for a description for the conference creator
in the 3rd aks the user for the registration types for the conference
The way the form should work is: the user enter the information for the first step then click “go to step 2”, then in step 2, the user enters that step 2 specific information and click “go to step 3”. Finally, in step 3, the user enter that step 3 specific information and also clicks in “Store” to submit the information and so the conference is created.
Do you know how to properly handle this multi step form logic with laravel? Im not having success in structuring this.
HTML:
<!-- So, the page has 3 step: General Info, Conference Creator Info and Registration Types) -->
#extends('app')
#section('content')
<div class="container nopadding py-4">
<h1 class="h5 text-center">Create Conference</h1>
<div class="row">
<div class="col-12">
<ul class="nav nav-pills registration_form_list" role="tablist">
<li class="">
<a class="nav-link active" href="#step1" data-toggle="tab" role="tab">
Step1<br><small>General Information</small></a>
</li>
<li class="disabled">
<a class="nav-link" href="#step2" data-toggle="tab" role="tab">
Step 2<br><small>Conference Creator Info</small></a>
</li>
<li class="disabled">
<a class="nav-link" href="#step3" data-toggle="tab" role="tab">
Step 3<br><small>Registration Types</small></a>
</li>
</ul>
<!-- STEP 1 - General Confenrece Information-->
<form method="post" class="clearfix" action="conference/store">
{{csrc_field()}}
<div class="tab-content registration_body bg-white" id="myTabContent">
<div class="tab-pane fade show active clearfix" id="step1" role="tabpanel" aria-labelledby="home-tab">
<form method="post" class="clearfix">
<div class="form-group">
<label for="conference_name" class="text-heading h6 font-weight-semi-bold">Conference Name </label>
<input type="text" name="conference_name" class="form-control" id="conference_name">
</div>
<div class="form-row">
<div class="form-group col-lg-6">
<label for="conference_categories" class="text-heading h6 font-weight-semi-bold">Conference Categories</label>
<select id="tag_list" name="conference_categories" multiple class="form-control" id="conference_categories">
<option>IT</option>
</select>
</div>
</div>
<div class="form-group">
<label for="address" class="text-heading h6 font-weight-semi-bold">Address</label>
<input type="text" name="conference_address" class="form-control" >
</div>
<div>
<button type="button" href="#step2" data-toggle="tab" role="tab"
class="btn mr-2 btn-primary btn next-step">
Go To Step 2
</button>
</div>
</form>
</div>
<!-- STEP 2 - Conference creator Information-->
<div class="tab-pane fade clearfix" id="step2" role="tabpanel" aria-labelledby="profile-tab">
<form method="post" class="clearfix">
<div class="form-row">
<div class="form-group">
<label for="conference_creator_description" class="text-heading h6 font-weight-semi-bold">Description</label>
<textarea name="conference_creator_description" id="conference_creator_description" class="form-control" rows="3"></textarea>
</div>
<button type="button" href="#step1" data-toggle="tab" role="tab"
class="btn mr-2 btn-primary btn next-step">
Go Back To Step 1
</button>
<button type="button" href="#step3" data-toggle="tab" role="tab"
class="btn mr-2 btn-primary btn next-step">
Go To Step 3
</button>
</form>
</div>
<!-- STEP 3 - Registration Types-->
<div class="tab-pane clearfix fade" id="step3" role="tabpanel" aria-labelledby="contact-tab">
<form method="post" class="clearfix">
<div class="form-group">
<label for="registration_type_name" class="text-heading h6 font-weight-semi-bold">Registration Type Name</label>
<input type="text" name="registration_type_name" class="form-control" id="registration_type_name">
</div>
<div class="form-group col-md-6">
<label for="registration_type_capacity" class="text-heading h6 font-weight-semi-bold">Capacity</label>
<input type="text" class="form-control" name="registration_type_name" id="registration_type_capacity">
</div>
<div class="form-group">
<button type="button" href="#step2" data-toggle="tab" role="tab"
class="btn mr-2 btn-primary btn next-step">
Go Back To Step 2
</button>
<button type="submit" data-toggle="tab" role="tab"
class="btn mr-2 btn-primary btn next-step">
Store
</button>
</div>
</form>
</div>
</div>
</form>
</div>
</div>
</div>
Laravel:
I created a ConferenceController
Then add to the form an action (action="conference/store")
Then I also created a route:
Route::post(‘/createConference, [
‘uses’ => ‘ConferenceController#store’
‘as’ => conference.store’
]
But when I enter some info and submit the form it appears:
Symfony \ Component \ HttpKernel \ Exception \ MethodNotAllowedHttpException
No message.

Answer 1

Wrong action url
Route::post(‘/createConference,[‘uses’=>‘ConferenceController#store’,‘as’=>conference.store’]);
Set form's action to route's name and add crsf field
<form action="{{route('conference.store')}}" method="post">
{{ csrf_field() }}