CODEWITHSUNDEEP
phplaravelformsfont-awesome
Dax
Dax

Reputation: 827

Replacing submit button with an icon on laravel forms

Question: I'm using the laravel forms to make a DELETE request to the database, now I have a submit field that is included by Laravel but I want to display an icon instead.

Code: 

{!! Form::open(['action' => ['TasksController@destroy', $task->id],'method' => 'POST', 'class'=> 'float-right']) !!}

    {{Form::hidden('_method','DELETE')}}
    {{Form::submit('Delete', ['class' => 'btn btn-outline-danger'])}}

{!! Form::close() !!}

What I want:

{{Form::submit('Delete', ['class' => 'btn btn-outline-danger'])}}

// want to replace submit field with icon

<i class="far fa-trash-alt icon-size"></i>

Upvotes: 1

Views: 1400

Answers (2)

yrv16
yrv16

Reputation: 2275

You can use this:

{{Form::button('<i class="far fa-trash-alt icon-size"></i>', ['type' =>'submit', 'class' => 'submit-btn'])}}

with style which hides the button:

.submit-btn {
    padding:0;
    background: none;
    border:none;
}

instead of:

{{Form::submit('Delete', ['class' => 'btn btn-outline-danger'])}}

Upvotes: 4

Bal&#225;zs S&#225;rk&#246;zi
Bal&#225;zs S&#225;rk&#246;zi

Reputation: 17

You could wrap the form with something, hide it, and submit it via js. Something like this:

<style>.form-wrapper>form{/*hide the form, change cursor to pointer, etc*/}</style>
<div class="form-wrapper" onclick="$(this).getElementsByTagName('form')[0].submit()">
    <i class="far fa-trash-alt icon-size"></i>
    {!! Form::open(['action' => ['TasksController@destroy', $task->id],'method' => 'POST', 'class'=> 'float-right']) !!}
        {{Form::hidden('_method','DELETE')}}
        {{Form::submit('Delete', ['class' => 'btn btn-outline-danger'])}}
    {!! Form::close() !!}
</div>

Upvotes: 1

Related Questions