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!

Like our articles?
Check out our Laravel online courses!

8 COMMENTS

  1. You can edit button styles with CSS to make it looks like a link. Using a link and Javascript is not recommendable. If Javascript fails(sintax error, network problems, user deactivates it, whatever) the user will not be able to delete things.

  2. I had same solution in my app. when we cannot use nested forms in html and form attribute for element is not supported in all browsers.
    so i add a route and an action for resource (called ‘action’). then i set value and name property for button and depend on which bottom is clicked i decide to call action on ‘action’ method.
    I solved multiple delete or restore requests via check boxes when i used this way.
    Is there a predefined action for restore in Laravel? (it is useful action but i think there is not).

  3. Hey 🙂

    Why would you need to .submit() form via jQuery ? You could just style the submit to look exactly the way you want, then just use similar snippet with jQuery to prompt for confirmation and if prompt is not a success, return false and the form wont submit. Otherwise, it will submit the way it was supposed to in the first place

  4. This helped me out immensely, thank you. One small change I made was putting preventDefault in front of the confirm statement, so if you cancel no action is taken. Putting preventDefault after the conditional means that if you cancel, then the link does do the default action.

LEAVE A REPLY

Please enter your comment!
Please enter your name here