Laravel delete button with HTML form - php

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

Answer 3

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:
Delete

Answer 4

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>

Answer 5

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;