在 Laravel 5.6 中打开其他表单时提交模态表单

Question

我有什么：

我有一个网络应用程序，我希望能够向用户添加资格。

当我打开 Edit Employee 表单时，选择框旁边有一个 Add 按钮和一个 Delete 按钮，显示所有与那个用户。单击“添加”按钮时，会打开一个 Bootstrap 模式，其中包含另一个表单，您可以在其中选择 Qualification 以及 Date Of Issue。

我想要什么：

现在我希望将资格添加到用户，然后让控制器重定向到编辑视图，并显示成功消息。稍后我想通过 Ajax 添加资格，关闭窗口并显示成功消息。如果可能的话，也许只刷新主表单中的 Qualifications 表单元素。

问题：

当我在模态中提交表单时，主表单被提交，而不是来自模态的表单，即使我在提交时调用了不同的控制器方法。

我的表单：

模态：

<link href="{{ asset('css/modals.css') }}" media="all" rel="stylesheet" type="text/css" />

<div class="modal fade" id="qualificationModal" tabindex="-1" role="dialog" aria-labelledby="qualificationModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="qualificationModalLabel" style='font-weight: bold;'>Add Qualification</h4>
      </div>
      <div class="modal-body">

        {!! Form::open(['route' => ['qualification.add', $employee->id], 'method' => 'PUT']) !!}

        <div class="form-group">
          {{ Form::label('qualification', 'Qualification') }}<br>
          {{ Form::select('qualification', $qualification_names, null, array('class' => 'form-control', 'required' => 'required')) }}
        </div>

        <div class="form-group">
          {{ Form::label('issue_date', 'Date Of Issue') }}<br>
          {{ Form::date('issue_date', \Carbon\Carbon::now(), array('class' => 'form-control', 'required' => 'required')) }}
        </div>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        {!! Form::submit('Add', array('class' => 'btn btn-primary')) !!}
      </div>
    </div>
  </div>
</div>

主要：

@section('content')
  <div class='col-lg-4 col-lg-offset-4'>

      <h1><i class='fa fa-user-plus'></i> Edit {{$employee->name}}</h1>
      <hr>

      {{ Form::model($employee, ['route' => ['employees.update', $employee->id], 'method' => 'PUT']) }}

      <div class="form-group">
          {{ Form::label('name', 'Name') }}
          {{ Form::text('name', null, array('class' => 'form-control', 'required' => 'required')) }}
      </div>

      <div class="form-group">
          {{ Form::label('email', 'Email') }}
          {{ Form::email('email', null, array('class' => 'form-control', 'required' => 'required')) }}
      </div>

      <h5><b>Give Role</b></h5>

      <div class='form-group'>
          @foreach ($roles as $role)
              {{ Form::checkbox('roles[]',  $role->id, $employee->roles ) }}
              {{ Form::label($role->name, ucfirst($role->name)) }}<br>
          @endforeach
      </div>

      <div class="form-group">
          {{ Form::label('password', 'Password') }}<br>
          {{ Form::password('password', array('class' => 'form-control', 'placeholder' => ' • • • • • • • • • •', 'required' => 'required')) }}
      </div>

      <div class="form-group">
          {{ Form::label('password', 'Confirm Password') }}<br>
          {{ Form::password('password_confirmation', array('class' => 'form-control', 'required' => 'required')) }}
      </div>

      <div class="form-group">
          {{ Form::label('qualifications', 'Qualifications') }}<br>
          {{ Form::select('qualifications', $employee->qualifications, null, ['size' => 5, 'class' => 'form-control']) }}
          <button
             type="button"
             class="btn btn-default pull-right"
             data-toggle="modal"
             data-target="#qualificationModal"
             data-qualifications="{{ $qualifications }}"
             data-qualification_names="{{ $qualification_names }}">
             Add
          </button>
          <button type="button" class="btn btn-danger pull-right">Remove</button>
          @include('dispo.employees.add_qualification')

          <br>
          <br>
      </div>


      {{ Form::submit('Save', array('class' => 'btn btn-primary')) }}

      {{ Form::close() }}

  </div>
@stop

路线：

Route::put('', [
  'as' => 'qualification.add',
  'uses' => 'DispoEmployeeController@addQualification'
]);

Route::resource('employees', 'Dispo\DispoEmployeeController');

控制器

public function update(Request $request, $id){
    $employee = User::findOrFail($id); 

    //Validate name, email and password fields
    $this->validate($request, [
        'name'=>'required|max:120',
        'email'=>'required|email|unique:users,email,'.$id,
        'password'=>'required|min:6|confirmed',

    ]);
    $input = $request->only(['name', 'email', 'password']);
    $roles = $request->get('roles'); //Retreive all roles
    $employee->fill($input)->save();

    if (isset($roles)) {
        $employee->syncRoles($roles); 
    }
    else {
        $employee->roles()->detach(); 
    }
    return redirect()->route('employees.index')->with('success','User successfully edited.');
}

public function addQualification(Request $request, $id){
  $employee = User::findOrFail($id);

  $this->validate($request, [
  ]);

  $qualification = $request->input('qualification');

  $employee->qualifications()->attach($qualification);

  return redirect()->route('employees.edit')->with('success','Qualification successfully edited.');
}

Answer 1

我在这个答案中做了一个假设，所以如果这是错误的，请告诉我，我可以调整。

假设：您的模态正在通过刀片部分 @include('dispo.employees.add_qualification') 添加到页面。

如果这是包含模态的方式，那么您将模态表单嵌套在主表单中（这将解释为什么要提交主表单）。

解决方案：将模态框移到主窗体之外，方法是将主刀片文件中的@include('dispo.employees.add_qualification') 移动到{{ Form::close() }} 之下。