Linking edit button from table to Laravel Edit form - forms

Question

I have a table that displays the data from my database. at the end of each row I have an Edit/Update Button. I would like it when clicking on the edit button it reference the the Edit Form.
My edit form works. I can access the data when visiting computers/{id}/edit, The form displays the current data and I can edit the data and submit the updates and it updates in the database (mysql).
This is my index.blade.php, which displays the table with the update button
#extends('layout')
#section('content')
<h1>Inventory</h1>
<table class="table table-striped">
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Department</th>
<th>Building</th>
<th>Room</th>
<th>Manufacturer</th>
<th>Device</th>
<th>Model</th>
<th>Service Tag</th>
<th>Mac Address</th>
<th>Status</th>
<th>Comments</th>
</tr>
</thead>
<tbody>
#foreach($inventories as $inventory)
<tr>
<td>{{$inventory->lastName}}</td>
<td>{{$inventory->firstName}}</td>
<td>{{$inventory->department}}</td>
<td>{{$inventory->building}}</td>
<td>{{$inventory->room}}</td>
<td>{{$inventory->manufacturer}}</td>
<td>{{$inventory->device}}</td>
<td>{{$inventory->model}}</td>
<td>{{$inventory->tag}}</td>
<td>{{$inventory->macAddress}}</td>
<td>{{$inventory->status}}</td>
<td>{{$inventory->comments}}</td>
<td>
{{--Need the button to open up my edit form--}}
<button formaction="computers/{id}/edit">{{ trans('computers.edit') }}</button>
{{--<input type="submit" name="update" id="update" value="Update" class="btn btn-primary">--}}
</td>
</tr>
#endforeach
</tbody>
</table>
#stop
This is my form.blade.php - which is a partial that I include in my create.blade.php and edit.blade.php and both of these pages work.
<div class="row">
<div class="col-md-6">
<div class="form-group">
{!! Form::label('lastName', 'Last Name:') !!}
{!! Form::text('lastName', null, ['class' => 'form-control' ]) !!}
</div>
<div class="form-group">
{!! Form::label('firstName', 'First Name:') !!}
{!! Form::text('firstName', null, ['class' => 'form-control']) !!}
</div>
<div class="form-group">
{!! Form::label('departmen', 'Department:') !!}
{!! Form::text('department', null, ['class' => 'form-control']) !!}
</div>
<div class="form-group" >
{!! Form::label('building', 'Building:') !!}
{!! Form::select('building', ['vanHall' => 'Vanderbilt Hal',
'wilf' => 'Wilf Hall',
'dag' => 'D Agostino Hall',
'furmanHall' => 'Furman Hall',
'wsn' => 'WSN',
'mercer' => 'Mercer',
'training' => 'Traing Room',
'storage' => 'Storage'
</div>
<div class="form-group">
{!! Form::label('room', 'Room:') !!}
{!! Form::text('room', null, ['class' => 'form-control']) !!}
</div>
<div class="form-group">
{!! Form::label('manufacturer', 'Manufacturer:') !!}
{!! Form::text('manufacturer', null, ['class' => 'form-control']) !!}
</div>
</div>
<div class="col-md-6">
<div class="form-group">
{!! Form::label('device', 'Device:') !!}
{!! Form::select('device', ['desktop' => 'Desktop',
'laptop' => 'Laptop',
'classroom' => 'Classroom',
'printer' => 'Printer',
'mifi' => 'MiFi',
'panopto' => 'Panopto',
'Other' => 'Other',
], null, ['placeholder' => 'Select Device'])!!}
</div>
<div class="form-group">
{!! Form::label('model', 'Model:') !!}
{!! Form::text('model', null, ['class' => 'form-control']) !!}
</div>
<div class="form-group">
{!! Form::label('tag', 'Service Tag:') !!}
{!! Form::text('tag', null, ['class' => 'form-control']) !!}
</div>
<div class="form-group">
{!! Form::label('macAddress', 'Mac Address:') !!}
{!! Form::text('macAddress', null, ['class' => 'form-control']) !!}
</div>
<div class="form-group">
{!! Form::label('status', 'Status:') !!}
{!! Form::select('status', ['active' => 'Active',
'inactive' => 'Inactive',
], null, ['placeholder' => 'Status'])!!}
</div>
<div class="form-group">
{!! Form::label('comments', 'Comments:') !!}
{!! Form::text('comments', null, ['class' => 'form-control']) !!}
</div>
</div>
<div class="col-md-12">
<hr>
<div class="form-group">
{!! Form::submit($submitButtonText, ['class' => 'btn btn-primary form-control']) !!}
{{--<button type="submit" class="btn btn-primary">Submit</button>--}}
</div>
</div>

Answer 1

Instead of using a button I would use an <a> tag.
<a href="{{ url('computers/'.$inventory->id.'/edit') }}>{{ trans('computers.edit') }}</a>
the url() function is a Laravel helper function
Also.. I'm sure there are enough examples of things like this, so make sure you google your question first.

Answer 2

Try this:
<button href="computers/{id}/edit">{{ trans('computers.edit') }}</button>
Or you could use form (Laravel Collective way):
{!! Form::open(['method' => 'Get', 'route' => ['computers.edit', $inventory->id]]) !!}
{!! Form::submit(trans('computers.edit')) !!}
{!! Form::close() !!}

Answer 3

sorry for the late reply
if you are creating the bigger project and if you hate being write the code in every
index.balde.php file for generarting the Edit,Show,Delete Buttons
just use my helper function
For Eg:
Laravel 5.7
Open Your Model it may be Computer or SomeModel
Just Paste the following Code into it
public static function tableActionButtons($fullUrl,$id,$titleValue,$buttonActions = ['show', 'edit', 'delete'],$buttonOptions='')
{
//Value of the post Method
$postMethod = 'POST';
//if the application is laravel then csrf is used
if (function_exists('csrf_token'))
{
$token = csrf_token();
}elseif (!function_exists('csrf_token'))
//else if the mcrypt id is used if the function exits
{
if (function_exists('mcrypt_create_iv'))
{
// if the mcrypt_create_iv id is used if the function exits the set the token
$token = bin2hex(mcrypt_create_iv(32, MCRYPT_DEV_URANDOM));
}
else{
// elseopenssl_random_pseudo_bytes is used if the function exits the set the token
$token = bin2hex(openssl_random_pseudo_bytes(32));
}
}
//action button Value
//(url()->full()) will pass the current browser url to the function[only aplicable in laravel]
$urlWithId =$fullUrl.'/'.$id;
//Charset UsedByFrom
$charset = 'UTF-8';
// Start Delete Button Arguments
//title for delete functions
$deleteFunctionTitle = 'Delete';
//class name for the deletebutton
$deleteButtonClass = 'btn-delete btn btn-xs btn-danger';
//Icon for the delete Button
$deleteButtonIcon = 'fa fa-trash';
//text for the delete button
$deleteButtonText = 'Delete Button';
//dialog Which needs to be displayes while deleting the record
$deleteConfirmationDialog = 'Are You Sure t';
$deleteButtonTooltopPostion = 'top';
// End Delete Button Arguments
// Start Edit Button Arguments
//title for Edit functions
$editFunctionTitle = 'Edit';
$editButtonClass = 'btn-delete btn btn-xs btn-primary';
//Icon for the Edit Button
$editButtonIcon = 'fa fa-pencil';
//text for the Edit button
$editButtonText = 'Edit Button';
$editButtonTooltopPostion = 'top';
// End Edit Button Arguments
// Start Show Button Arguments
//title for Edit functions
$showFunctionTitle = 'Show';
$showButtonClass = 'btn-delete btn btn-xs btn-primary';
//Icon for the Show Button
$showButtonIcon = 'fa fa-eye';
//text for the Show button
$showButtonText = 'Show Button';
$showButtonTooltopPostion = 'top';
// End Show Button Arguments
//Start Arguments for DropDown Buttons
$dropDownButtonName = 'Actions';
//End Arguments for DropDown Buttons
$showButton = '';
$showButton .='
<a href="'.$fullUrl.'/'.$id.'"class="'.$showButtonClass.'"data-toggle="tooltip"data-placement="'.$showButtonTooltopPostion.'"title="'.$showFunctionTitle.'-'.$titleValue.'">
<i class="'.$showButtonIcon.'"></i> '.$showButtonText.'
</a>
';
$editButton ='';
$editButton .='
<a href="'.$urlWithId.'/edit'.'"class="'.$editButtonClass.'"data-toggle="tooltip"data-placement="'.$editButtonTooltopPostion.'" title="'.$editFunctionTitle.'-'.$titleValue.'">
<i class="'.$editButtonIcon.'"></i> '.$editButtonText.'
</a>
';
$deleteButton='';
$deleteButton .='
<form id="form-delete-row' . $id . '" method="'.$postMethod.'" action="'.$urlWithId.'" accept-charset="'.$charset.'"style="display: inline" onSubmit="return confirm("'.$deleteConfirmationDialog.'")">
<input name="_method" type="hidden" value="DELETE">
<input name="_token" type="hidden" value="'.$token.'">
<input name="_id" type="hidden" value="'.$id.'">
<button type="submit"class="'.$deleteButtonClass.'"data-toggle="tooltip"data-placement="'.$deleteButtonTooltopPostion.'" title="'.$deleteFunctionTitle.'-'.$titleValue.'">
<i class="'.$deleteButtonIcon.'"></i>'.$deleteButtonText.'
</button>
</form>
';
$actionButtons = '';
foreach ($buttonActions as $buttonAction)
{
if ($buttonAction == 'show')
{
$actionButtons .= $showButton;
}
if ($buttonAction == 'edit')
{
$actionButtons .= $editButton;
}
if ($buttonAction == 'delete')
{
$actionButtons .= $deleteButton;
}
}
if (empty($buttonOptions))
{
return $actionButtons;
}
elseif (!empty($buttonOptions))
{
if ($buttonOptions == 'group')
{
$buttonGroup = '<div class="btn-group" role="group" aria-label="">
'.$actionButtons.'
</div>';
return $buttonGroup;
}elseif($buttonOptions == 'dropdown')
{
$dropDownButton =
'<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
'.$dropDownButtonName.'
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
'.$actionButtons.'
</div>
</div>
';
return $dropDownButton;
}else
{
return 'only <code>group</code> and <code>dropdown</code> is Available ';
}
}
}
Now all are set then open your index.blade.php
and replace your code
<td>
{{--Need the button to open up my edit form--}}
<button formaction="computers/{id}/edit">{{ trans('computers.edit') }}</button>
<input type="submit" name="update" id="update" value="Update" class="btn btn-primary">
</td>
With This
{!! Computer::tableActionButtons(url()->full(),$inventory->id,$inventory->firstName,['edit',delete,delete],'dropdown'); !!}
If you find any bugs or any issues in buttons please comment in below section to improve my helper script
VERY CAREFUL NOTE THIS IS FOR LARAVEL EXPERTS IF YOU ARE NOW BEGGINER DONT USE IT
just Watch the tutorial at
https://appdividend.com/2018/09/06/laravel-5-7-crud-example-tutorial/
https://laracasts.com/series/laravel-from-scratch-2018
Hope it saved time