Laravel - многоступенчатая форма применяется только для проверки и отправки, когда на шаге 1 - PullRequest
0 голосов
/ 05 марта 2020

Я использую многошаговую форму в моем проекте 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) - Личная информация.

Почему и как мне это решить?

Спасибо.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...