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