Any button element inside a form element is going to submit the form by default. Since the form only deals with deleting, I recommend moving the two anchor links outside the form. Alternatively, you could drop the nested button element and adjust the link styling accordingly.
Jun 30, 2022
1
Level 2
Show button delete row in table
Hello! I'm trying to build simple CRUD operation for adding projects. In my table I have three buttons: show, edit and delete. When I click on show button it should show my project, but in my case show button deletes my project. I don't have idea how can I solve this issue. Here is the part with buttons:
<tr>
@if (!empty($projects))
@foreach ($projects as $project)
<td class="text-center text-dark-gray font-medium text-base py-5 px-2 bg-[#F3F6FF] border-b border-1 border-[#E8E8E8] text-bold">{{ ++$i }}</td>
<td class="text-center text-dark font-medium text-base py-5 px-2 bg-white border-b border-[#E8E8E8]"><img src="/img/{{ $project->image }}" width="200px"></td>
<td class="text-center text-dark-gray font-medium text-base py-5 px-2 bg-[#F3F6FF] border-b border-1 border-[#E8E8E8] text-bold"> {{ $project->name }}</td>
<td class="text-center text-dark font-medium text-base py-5 px-2 bg-white border-b border-[#E8E8E8] text-bold"> {{ $project->detail }}</td>
<td class="text-center text-dark-gray font-medium text-base py-5 px-2 bg-[#F3F6FF] border-b border-1 border-[#E8E8E8]">
<form action="{{ route('destroy', $project->id) }}" method="POST">
<a href="{{ route('show', $project->id)}}"><button class="text-white font-bold bg-red-700 hover:bg-red-800 focus:outline-none focus:ring-4 focus:ring-red-300 rounded-full text-sm px-4 py-2.5 text-center mr-2 mb-2 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900">Show</button></a>
<a href="{{ route('edit', $project->id)}}"><button type="button" class="text-white bg-yellow-400 hover:bg-yellow-500 focus:outline-none focus:ring-4 focus:ring-yellow-300 font-bold rounded-full text-sm px-4 py-2.5 text-center mr-2 mb-2 dark:focus:ring-yellow-900">Edit</button></a>
@csrf
@method('DELETE')
<button type="submit" class="text-white bg-green-700 hover:bg-green-800 focus:outline-none focus:ring-4 focus:ring-green-300 font-bold rounded-full text-sm px-4 py-2.5 text-center mr-2 mb-2 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800">Delete</button>
</form>
</td>
</tr>
@endforeach
@endif
and my Controller:
public function show(Project $project)
{
return view('components.projects.show', compact('project'));
}
public function edit(Project $project)
{
return view('components.projects.edit', compact('project'));
}
public function update(Request $request, Project $project)
{
$request->validate([
'name' => 'required',
'detail' => 'required',
]);
$input = $request->all();
if ($image = $request->file('image')){
$destinationPath = 'img/';
$profileImage = date('YmdHis') . "." . $image->getClientOriginalExtension();
$image->move($destinationPath, $profileImage);
$input['image'] = "$profileImage";
}else{
unset($input['image']);
}
$project->update($input);
return redirect()->route('index')->with('success', 'Product updated successfully');
}
public function destroy(Project $project)
{
$project->delete();
return redirect()->route('index')->with('success', 'Product deleted successfully');
}
}
and also when I try to access route show/1 it shows my project, but show button doesn't redirect me to the right path. How can I solve this? Thanks in advance!
Level 54
Please or to participate in this conversation.