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

DevK · Accepted Answer · 2017-09-07 14:46:10Z

46

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>

edited Sep 7, 2017 at 14:46

answered Sep 7, 2017 at 14:40

DevK

10k2 gold badges33 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

user2519032 Over a year ago

Wow, this is the best solution and simple! How did I not think about of using directly form in the loop...so, I don't need of AJAX for this. I've already tried and it's working great! Thank you so much, devk!

DevK Over a year ago

Happy to help :)

Mayank Pandeyz Over a year ago

Plus one for a better solution than mine :)

Anoop P S Over a year ago

hi i am also trying this kind of user delete functionality but not working <a href="javascript:void();" class="btn btn-outline-danger" onclick="deleteUser();" role="button" aria-pressed="true">Delete</a>

CodeToLife Over a year ago

@csrf and @method('DELETE') curently

|

Mayank Pandeyz · Accepted Answer · 2017-09-07 14:41:40Z

3

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
  }
});

edited Sep 7, 2017 at 14:41

answered Sep 7, 2017 at 14:30

Mayank Pandeyz

26.3k4 gold badges43 silver badges61 bronze badges

1 Comment

user2519032 Over a year ago

Yes, I've guessed I have to use AJAX for this task. OK, thank you for your answer. Cheers!

halfer · Accepted Answer · 2018-02-17 22:32:02Z

1

You can update your code like:

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

OR you should delete user using route name like:

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

edited Feb 17, 2018 at 22:32

halfer

20.2k20 gold badges110 silver badges207 bronze badges

answered Sep 7, 2017 at 14:28

AddWeb Solution Pvt Ltd

21.8k5 gold badges30 silver badges61 bronze badges

1 Comment

user2519032 Over a year ago

This won't work, because I don't have a route for delete method and I don't wanna create a page for that. As Mayank answered, it's best thing to use AJAX. Thank you anyway!

fico7489 · Accepted Answer · 2020-05-01 13:23:28Z

0

option with "laravel form helper" and 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>

answered May 1, 2020 at 13:23

fico7489

8,6507 gold badges60 silver badges93 bronze badges

Comments

KaZaiya · Accepted Answer · 2023-01-21 08:46:01Z

0

Using route closures to delete

show.blade.php

 <form>
<h1>Title: {{$tutorial->title}}</h1>
<p>Title Description: {{$tutorial->title_description}}</p>
<p>Video: {{$tutorial->video}}</p>
<form action="{{ route('delete-tutorial', [$tutorial->id])}}" 
method="post">
@csrf
@method('DELETE')
<button class="btn btn-primary" onclick="return confirm('Are you sure?')" 
type="submit" name="Delete">Delete</button>
</form>

for the route for deleting

Route::delete('tutorial/{id}',function($id){
$tutorial = Tutorial::findOrFail($id)->first();
$tutorial->delete();
return redirect('tutorial'); 
})->name('delete-tutorial');

Also don't forget to add this on your routes/web.php

use App\Models\Tutorial;

answered Jan 21, 2023 at 8:46

KaZaiya

971 silver badge7 bronze badges

Collectives™ on Stack Overflow

Laravel delete button with HTML form

5 Answers 5

7 Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

7 Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related