Afonte
Afonte

Reputation: 25

Linking edit button from table to Laravel Edit form

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>

Upvotes: 2

Views: 16035

Answers (3)

ManojKiran
ManojKiran

Reputation: 6341

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(&quot;'.$deleteConfirmationDialog.'&quot;)">
                        <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

Upvotes: 0

Rick
Rick

Reputation: 452

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.

Upvotes: 2

Alexey Mezenin
Alexey Mezenin

Reputation: 163788

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() !!}

Upvotes: 1

Related Questions