Laravel delete button with HTML form

Question

I'm using the HTML form, not Laravel Collective.

For now I've successfully created a CRUD for a users in my CMS, but one thing bothers me:

How can I set a Delete button in my list of users, instead of the specific edit page?

Also, it will be nice when a user clicks on the Delete button to show up confirmation popup for deleting the specific user.

So, here's my code:

The controller:

/**
 * 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'); 
}

The list of users page:

@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

The specific edit user page:

@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

The route:

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

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

Answer 1

It's not obvious from the code you posted, but your DELETE route expects DELETE method. As it should!

But on your list you're trying to access it with GET method.

Really you should just reuse the code from the edit page, which fakes DELETE method already.

Something like this:

...
<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>

Answer 2

As you have stated it will be nice when a user clicks on the Delete button to show up confirmation popup for deleting the specific user. For this you have to use jquery and ajax. Change the following code:

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

to

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

and put an event listener like:

$('.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
  }
});