Resource Controller Delete: link instead of a button?

Laravel has Resource Controllers which allow us to quickly set up create/read/update/delete operations. But the trickiest one is probably DELETE one - we have to create a separate form for it. With submit button. What if in our table Delete is not a button, but a link? An icon with a link on it. Here's how to get the whole thing working with link instead of a button. First, let me show you what I mean visually. 0208_laraveldaily_delete_01

Look at the right side - Edit and Delete actions are actually links. So how to perform that with Blade Form? In general example, Blade code would look something like this:

@foreach($companies as $company)
  
    ...
    ...
    ...
    
      
        
      {!! Form::open(['method' => 'DELETE',
        'route' => ['companies.destroy', $company->id]]) !!}
        {!! Form::submit('Delete') !!}
      {!! Form::close() !!}
    
  
@endforeach

So, to rephrase the question - how to replace Form::submit() with a href? There are several steps here.

Add an HTML code for link with ID parameter
Add an attribute to the delete form
Perform a jQuery operation to override default link behavior, instead it would call form submit event

So, now, step by step:


  {!! Form::open(['method' => 'DELETE',
    'route' => ['companies.destroy', $company->id]]) !!}
    
      
  {!! Form::close() !!}

We have an "empty" link with an icon. Great. Now, let's give attributes to it, and to the form too:


  {!! Form::open(['method' => 'DELETE',
    'route' => ['companies.destroy', $company->id],
    'id' => 'form-delete-companies-' . $company->id]) !!}
    
      
  {!! Form::close() !!}

As you can see, we added attribute id to the form and data-form and class attributes to the link. If it doesn't make sense yet, I'm pretty sure it will when you look at jQuery code below - how it all comes together:

$(function () {
  $('.data-delete').on('click', function (e) {
    if (!confirm('Are you sure you want to delete?')) return;
    e.preventDefault();
    $('#form-delete-' + $(this).data('form')).submit();
  });
});

What we're actually doing here? On click of any link with class="data-delete":

Confirming if the user really wants to delete? Otherwise don't do anything;
Preventing the default link behavior (meaning link won't lead anywhere);
Get the form attribute (from data-form);
Submit that particular form with that particular ID.

This little jQuery piece of code is quite universal - you can use it for all your forms and tables, just put in correct id to the form and data-form to the link. And that's it - now you have links instead of buttons for Delete. I guess, there is even prettier way to achieve it, so if you know one - welcome to the comments!

Resource Controller Delete: link instead of a button?

Like our articles?

Recent New Courses

Livewire VS Vue VS React: Simple Project

React.js + Inertia in Laravel 11: From Scratch

[Mini-Course] Laravel 11: Breeze with User Role Areas