Laravel删除HTML表单的按钮

时间:2017-09-07 14:22:49

标签: php html forms laravel laravel-5

我正在使用HTML表单,而不是Laravel Collective。

现在我已成功为我的CMS中的用户创建了一个CRUD,但有一件事困扰我:

如何在我的用户列表中设置删除按钮,而不是特定的编辑页面?

此外,当用户单击“删除”按钮以显示用于删除特定用户的确认弹出窗口时,这将是很好的。

所以,这是我的代码:

控制器:

/**
 * Remove the specified resource from storage.
 *
 * @param  int  $id
 * @return \Illuminate\Http\Response
 */
public function destroy($id)
{
    $user = User::findOrFail($id);
    $user->delete();

    return redirect('/admin/users'); 
}

用户列表页面:

@extends('layouts.backend')

@section('content')
  <h1>Users</h1>
  <a class="btn btn-primary" href="/admin/users/create">Create new user</a>
  <table class="table">
    <thead>
      <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Email</th>
        <th>Role</th>
        <th>Status</th>
        <th>Created</th>
        <th>Updated</th>
        <th>Operations</th>
      </tr>

    </thead>
    <tbody>
      @if($users)
        @foreach($users as $user)
          <tr>
            <td>{{$user->id}}</td>
            <td>{{$user->name}}</td>
            <td>{{$user->email}}</td>
            <td>{{$user->role ? $user->role->name : 'User has no role'}}</td>
            <td>{{$user->status == 1 ? 'Active' : 'Not active'}}</td>
            <td>{{$user->created_at->diffForHumans()}}</td>
            <td>{{$user->updated_at->diffForHumans()}}</td>
            <td>
              <a href="/admin/users/{{$user->id}}/edit" class="btn btn-primary">Edit</a>
              <a class="btn btn-danger" href="">Delete</a> // HOW TO ACHIEVE THIS?
            </td>
          </tr>
        @endforeach
      @endif
    </tbody>
  </table>

@endsection

特定的编辑用户页面:

@extends('layouts.backend')

@section('content')
  <h1>Edit user</h1>
  <form method="POST" action="/admin/users/{{$user->id}}">
    {{ csrf_field() }}
    {{ method_field('PATCH') }}

    <div class="form-group">
      <label>Name:</label>
      <input type="text" name="name" class="form-control" value="{{$user->name}}">
    </div>

    <div class="form-group">
      <label>Email:</label>
      <input type="text" name="email" class="form-control" value="{{$user->email}}">
    </div>

    <div class="form-group">
      <label>Role:</label>
      <select name="role_id" class="form-control">
        @if($user->role_id == 1)
          <option value="1" selected>Administrator</option>
          <option value="2">Editor</option>
        @else
          <option value="1">Administrator</option>
          <option value="2" selected>Editor</option>
        @endif
      </select>
    </div>

    <div class="form-group">
      <label>Status:</label>
      <select name="status" class="form-control">
        @if($user->status == 1)
          <option value="1" selected>Active</option>
          <option value="0">Not active</option>
        @else
          <option value="1">Active</option>
          <option value="0" selected>Not active</option>
        @endif
      </select>
    </div>

    <div class="form-group">
      <label>Password</label>
      <input type="password" name="password" class="form-control" value="{{$user->password}}">
    </div>

    <div class="form-group">
      <input type="submit" name="submit" value="Update user" class="btn btn-primary">
    </div>
  </form>

  <form id="delete-form" method="POST" action="/admin/users/{{$user->id}}">
    {{ csrf_field() }}
    {{ method_field('DELETE') }}

    <div class="form-group">
      <input type="submit" class="btn btn-danger" value="Delete user">
    </div>
  </form>

  @include('inc.errors')
@endsection

路线:

Route::group(['middleware'=>'admin'], function(){
     Route::resource('admin/users', 'AdminUsersController');

     Route::get('/admin', function(){
       return view('admin.index');
     });
    // Route::resource('admin/posts', 'AdminPostsController');
});

4 个答案:

答案 0 :(得分:10)

您发布的代码并不明显,但您的DELETE路由需要DELETE方法。应该这样!

但是在您的列表中,您尝试使用GET方法访问它。

真的,您应该只重复使用编辑页面中的代码,该代码已经伪造DELETE方法。

这样的事情:

...
<td>
    <a href="/admin/users/{{$user->id}}/edit" class="btn btn-primary">Edit</a>
    <form method="POST" action="/admin/users/{{$user->id}}">
        {{ csrf_field() }}
        {{ method_field('DELETE') }}

        <div class="form-group">
            <input type="submit" class="btn btn-danger delete-user" value="Delete user">
        </div>
    </form>
</td>
...

...
// Mayank Pandeyz's solution for confirmation customized for this implementation
<script>
    $('.delete-user').click(function(e){
        e.preventDefault() // Don't post the form, unless confirmed
        if (confirm('Are you sure?')) {
            // Post the form
            $(e.target).closest('form').submit() // Post the surrounding form
        }
    });
</script>

答案 1 :(得分:3)

正如您所说,当用户点击“删除”按钮以显示删除特定用户的确认弹出窗口时,这将是一件好事。为此,您必须使用jqueryajax。更改以下代码:

<a class="btn btn-danger" href="">Delete</a>

<a class="btn btn-danger delete_user" href="javascript:void(0);" id="{{$user->id}}">Delete</a>

并设置一个事件监听器:

$('.delete_user').click(function(){
  if( confirm('Are you sure?') )
  {
    var id = $(this).attr('id');
    // Make an ajax call to delete the record and pass the id to identify the record
  }
});

答案 2 :(得分:0)

您可以更新代码,如:

<a class="btn btn-danger" href="/admin/users/{{$user->id}}/delete" >Delete</a>

OR 您应该使用路线名称删除用户,例如:

<a href="{{ route('admin.user.delete', [$user->id]) }}" class="btn btn-xs btn-danger" onclick="return confirm('Are you sure?')">Delete</a>

答案 3 :(得分:0)

带有“ laravel form helper”和jquery的选项

<div class="actions">
    <a href="#" class="list-icons-item delete-action">
        <i class="icon-trash"></i>
    </a>
    {{ Form::open(['url' => route('admin.users.destroy', $user), 'method' => 'delete']) }}
    {{ Form::close() }}
</div>


<script>
    $(document).ready(function () {
        $('.delete-action').click(function (e) {
            if (confirm('Are you sure?')) {
                $(this).siblings('form').submit();
            }

            return false;
        });
    });
</script>