Я использую многошаговую форму в моем проекте Laravel -5.8. Он имеет 5 шагов. У меня есть это представление:
<form action="{{ route("hr.employees.store") }}" method="post" class="tab-wizard wizard-circle form" enctype="multipart/form-data">
{{csrf_field()}}
<!-- Step 1 -->
<h6>Personal Information</h6>
<section>
<!--<span style="color:blue;"><h4 class="box-title"><b>Personal Information</b></h4></span>-->
<hr class="m-t-0 m-b-40">
<div class="row">
<div class="col-12 col-sm-4">
<div class="form-group">
<!--<label>Minimal (.select2-danger)</label>-->
<label class="control-label"> First Name:<span style="color:red;">*</span></label>
<input type="text" name="first_name" placeholder="Enter first name here" class="form-control" value="{{old('first_name')}}" style="width: 100%;">
</div>
<!-- /.form-group -->
</div>
<!-- /.col -->
<div class="col-12 col-sm-4">
<div class="form-group">
<label class="control-label"> Other Name:</label>
<input type="text" name="other_name" placeholder="Enter other name here" class="form-control" value="{{old('other_name')}}" style="width: 100%;">
</div>
<!-- /.form-group -->
</div>
<!-- /.col -->
<div class="col-12 col-sm-4">
<div class="form-group">
<label class="control-label"> Last Name:<span style="color:red;">*</span></label>
<input type="text" name="last_name" placeholder="Enter last name here" class="form-control" value="{{old('last_name')}}" style="width: 100%;">
</div>
<!-- /.form-group -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-12 col-sm-4">
<div class="form-group">
<label class="control-label"> Employee Code:<span style="color:red;">*</span></label>
<input type="text" name="employee_code" placeholder="Enter employee code here" class="form-control" value="{{old('employee_code')}}" style="width: 100%;">
</div>
<!-- /.form-group -->
</div>
<!-- /.col -->
<div class="col-12 col-sm-4">
<div class="form-group">
<label class="control-label"> Official Email:<span style="color:red;">*</span></label>
<input type="email" name="email" placeholder="Enter Email: emailid@email.com" class="form-control" value="{{old('email')}}" style="width: 100%;">
</div>
<!-- /.form-group -->
</div>
<!-- /.col -->
<div class="col-12 col-sm-4">
<div class="form-group">
<label class="control-label"> Personal Email:</label>
<input type="email" name="email2" placeholder="Enter Email: emailid2@email.com" class="form-control" value="{{old('email2')}}" style="width: 100%;">
</div>
<!-- /.form-group -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-12 col-sm-4">
<div class="form-group">
<label class="control-label"> Gender:<span style="color:red;">*</span></label>
<select class="form-control select2bs4" data-placeholder="Choose Gender" tabindex="1" name="gender_id" style="width: 100%;">
<option value="">Select Gender</option>
@if($genders->count() > 0 )
@foreach($genders as $gender)
<option value="{{$gender->id}}">{{$gender->gender_name}}</option>
@endforeach
@endif
</select>
</div>
<!-- /.form-group -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
<!--dd($linemanagers);-->
<div class="row">
<div class="col-12 col-sm-4">
<div class="form-group">
<label class="control-label"> Position/Designation:</label>
<select class="form-control select2bs4" data-placeholder="Choose Position/Designation" tabindex="1" name="employee_designation_id" style="width: 100%;">
<option value="">Select Position/Designation</option>
@if($designations->count() > 0 )
@foreach($designations as $designation)
<option value="{{$designation->id}}">{{$designation->designation_name}}</option>
@endforeach
@endif
</select>
</div>
<!-- /.form-group -->
</div>
<!-- /.col -->
<div class="col-12 col-sm-4">
<div class="form-group">
<label class="control-label"> Grade Level:</label>
<select class="form-control select2bs4" data-placeholder="Choose Grade Level" tabindex="1" name="employee_grade_level_id" style="width: 100%;">
<option value="">Select Grade Level</option>
@if($gradelevels->count() > 0 )
@foreach($gradelevels as $gradelevel)
<option value="{{$gradelevel->id}}">{{$gradelevel->grade_level_name}}</option>
@endforeach
@endif
</select>
</div>
<!-- /.form-group -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-12 col-sm-4">
<div class="form-group">
<label class="control-label"> Department:<span style="color:red;">*</span></label>
<select class="form-control select2bs4" data-placeholder="Choose Department" tabindex="1" name="department_id" style="width: 100%;">
<option value="">Select Department</option>
@if($departments->count() > 0 )
@foreach($departments as $department)
<option value="{{$department->id}}">{{$department->dept_name}}</option>
@endforeach
@endif
</select>
</div>
<!-- /.form-group -->
</div>
<!-- /.col -->
<div class="col-12 col-sm-4">
<div class="form-group">
<label class="control-label"> Line Manager:</label>
<select class="form-control select2bs4" data-placeholder="Choose Line Manager" tabindex="1" name="line_manager_id" style="width: 100%;">
<option value="">Select Line Manager</option>
@if($linemanagers->count() > 0)
@foreach($linemanagers as $linemanager)
<option value="{{$linemanager->id}}">{{$linemanager->employee_code}} - {{$linemanager->first_name}} {{$linemanager->last_name}}</option>
@endforeach
@endif
</select>
</div>
<!-- /.form-group -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-12 col-sm-4">
<div class="form-group">
<label class="control-label"> Date of Birth:</label>
<input type="date" class="form-control" placeholder="dd/mm/yyyy" name="date_of_birth" value="{{old('date_of_birth')}}" max="{{Carbon\Carbon::now()->format('Y-m-d')}}">
</div>
<!-- /.form-group -->
</div>
<!-- /.col -->
<div class="col-12 col-sm-4">
<div class="form-group">
<label class="control-label"> Nationality:</label>
<select class="form-control select2bs4" data-placeholder="Choose Employee Type" tabindex="1" name="nationality_id" style="width: 100%;">
<option value="">Select Nationality</option>
@if($nationalities->count() > 0 )
@foreach($nationalities as $nationality)
<option value="{{$nationality->id}}">{{$nationality->nationality_code}}</option>
@endforeach
@endif
</select>
</div>
<!-- /.form-group -->
</div>
<!-- /.col -->
<div class="col-12 col-sm-4">
<div class="form-group">
<label class="control-label"> Passport Number:</label>
<input type="text" name="passport_no" placeholder="Enter passport number here" class="form-control" value="{{old('passport_no')}}" style="width: 100%;">
</div>
<!-- /.form-group -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-12 col-sm-4">
<div class="form-group">
<input type="checkbox" class="filled-in" name="is_hod" value="{{old('is_hod') ? 'checked' : '' }}">
<!--<input type="checkbox" class="form-control" name="is_current" value="{{old('is_current') ? 'checked' : '' }}">-->
<label class="control-label"> HOD ?</label>
</div>
<!-- /.form-group -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
<!--</div>-->
</section>
<!--</div>-->
<!-- Step 2 -->
<h6>Contact Informaton</h6>
<section>
<!--<div class="card-body">-->
<!--<span style="color:blue;"><h4 class="box-title"><b>Contact Informaton</b></h4></span>-->
<hr class="m-t-0 m-b-40">
<div class="row">
<div class="col-12 col-sm-4">
<div class="form-group">
<label class="control-label"> Mobile Phone No.:</label>
<input type="number" name="phone" placeholder="e.g. 23455996633" class="form-control" value="{{old('phone')}}" pattern="[0-9]{13}" style="width: 100%;">
</div>
<!-- /.form-group -->
</div>
<!-- /.col -->
<div class="col-12 col-sm-4">
<div class="form-group">
<label class="control-label"> Alt. Mobile Phone Number:</label>
<input type="number" name="phone2" placeholder="e.g 23455996631" class="form-control" value="{{old('phone2')}}" pattern="[0-9]{13}" style="width: 100%;">
</div>
<!-- /.form-group -->
</div>
<!-- /.col -->
<div class="col-12 col-sm-4">
<div class="form-group">
<label class="control-label"> Address:</label>
<!--<input type="email" name="email2" placeholder="Enter Email: emailid2@email.com" class="form-control" value="{{old('email2')}}" style="width: 100%;">-->
<textarea rows="2" class="form-control " placeholder="Enter Permanent Address" name="address" value="{{ old('address') }}"></textarea>
</div>
<!-- /.form-group -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-12 col-sm-4">
<div class="form-group">
<label class="control-label"> Country:</label>
<select id="country" class="form-control select2bs4" data-placeholder="Choose Country" tabindex="1" name="country_id" style="width: 100%;">
<option value="" selected disabled>Select Country</option>
@if($countries->count() > 0 )
@foreach($countries as $country)
<option value="{{$country->id}}">{{$country->country_name}}</option>
@endforeach
@endif
</select>
</div>
<!-- /.form-group -->
</div>
<!-- /.col -->
<div class="col-12 col-sm-4">
<div class="form-group">
<label class="control-label"> State:</label>
<select id="state" class="form-control select2bs4" data-placeholder="Choose State" tabindex="1" name="state_id" style="width: 100%;">
</select>
</div>
<!-- /.form-group -->
</div>
<!-- /.col -->
<div class="col-12 col-sm-4">
<div class="form-group">
<label class="control-label"> City/Town:</label>
<select id="city" class="form-control select2bs4" data-placeholder="Choose City/Town" tabindex="1" name="city_id" style="width: 100%;">
</select>
</div>
<!-- /.form-group -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</section>
<!--</div>-->
<!-- Step 3 -->
<h6>Additional</h6>
<section>
<!--<div class="card-body">-->
<!--<span style="color:blue;"><h4 class="box-title"><b>Contact Informaton</b></h4></span>-->
<hr class="m-t-0 m-b-40">
<div class="row">
<div class="col-12 col-sm-4">
<div class="form-group">
<label class="control-label"> Employment Date:</label>
<input type="date" class="form-control" placeholder="dd/mm/yyyy" name="employment_date" value="{{old('employment_date')}}" max="{{Carbon\Carbon::now()->format('Y-m-d')}}">
</div>
<!-- /.form-group -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</section>
<!-- Step 4 -->
<h6>Bank Details</h6>
<section>
<hr class="m-t-0 m-b-40">
<div class="row">
<div class="col-12 col-sm-6">
<div class="form-group">
<label class="control-label"> Main Bank:</label>
<select id="bank" class="form-control select2bs4" data-placeholder="Choose Main Bank" tabindex="1" name="bank_id" style="width: 100%;">
<option value="">Select Main Bank</option>
@if($banks->count() > 0 )
@foreach($banks as $bank)
<option value="{{$bank->id}}">{{$bank->bank_name}}</option>
@endforeach
@endif
</select>
</div>
<!-- /.form-group -->
</div>
<!-- /.col -->
<div class="col-12 col-sm-6">
<div class="form-group">
<label class="control-label"> Branch:</label>
<select id="bankbranch" class="form-control select2bs4" data-placeholder="Choose Branch" tabindex="1" name="bank_branch_id" style="width: 100%;">
</select>
</div>
<!-- /.form-group -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</section>
<!-- Step 5 -->
<h6>Next of Kin</h6>
<section>
<hr class="m-t-0 m-b-40">
<div class="row">
<div class="col-12 col-sm-4">
<div class="form-group">
<label class="control-label"> Name of Next of Kin:</label>
<input type="text" name="nok_name" placeholder="Full Name" class="form-control" value="{{old('nok_name')}}" style="width: 100%;">
</div>
<!-- /.form-group -->
</div>
<!-- /.col -->
<div class="col-12 col-sm-4">
<div class="form-group">
<label class="control-label"> Phone Number:</label>
<input type="number" name="nok_phone_no" placeholder="e.g 23455996631" class="form-control" value="{{old('nok_phone_no')}}" pattern="[0-9]{13}" style="width: 100%;">
</div>
<!-- /.form-group -->
</div>
<!-- /.col -->
<div class="col-12 col-sm-4">
<div class="form-group">
<label class="control-label"> Address:</label>
<textarea rows="2" class="form-control " placeholder="Enter Next of Kin Address" name="nok_address" value="{{ old('nok_address') }}"></textarea>
</div>
<!-- /.form-group -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</section>
Javascript
<script>
//Custom design form example
$(".tab-wizard").steps({
headerTag: "h6",
bodyTag: "section",
enableAllSteps: true,
transitionEffect: "fade",
titleTemplate: '<span class="step">#index#</span> #title#',
labels: {
finish: "Add Employee"
},
onStepChanged: function (event, current, next) {
if (current > 3) {
$("#save").hide();
}
else if( current <=3)
{
$("#save").show();
}
},
onFinished: function (event, currentIndex) {
$("#button").click();
},
});
</script>
<script>
$(".form-control").keypress(function(e) {
if (e.which === 13) {
e.preventDefault();
return false;
}
});
</script>
<script>
$("input").attr('autocomplete', 'off');
var $input = $('<button id="save" class="btn text-white" style="margin:0px 0 0 5px;padding:8.2px 12px;background-color:#009efb">Add Employee</button>');
$input.appendTo($('ul[aria-label=Pagination]'));
$('#save').click(function(){
$("#button").click();
})
</script>
Добавить Сотрудник должен подтвердить и отправить в базу данных. Но я заметил, что он только проверяет и отправляет в базу данных, когда я на первом этапе (1) - Личная информация.
Почему и как мне это решить?
Спасибо.