在laravel表单上用图标替换提交按钮

问题描述：

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>

问题： strong> 我正在使用laravel表单来创建DELETE code>请求数据库，现在我有一个Laravel包含的 submit code>字段，但我想显示一个图标。 p>

代码： strong> p>

  {!!  Form :: open（['action'=＆gt; ['TasksController @ destroy'，$ task-＆gt; id]，'method'=＆gt;'POST'，'class'=＆gt;'float-right']）  !!} 
 
 {{Form :: hidden（'_ method'，'DELETE'）}} 
 {{Form :: submit（'Delete'，['class'=＆gt;'btn btn-outline- 危险']）}} 
 
 {!!  Form :: close（）!!} 
  code>  pre> 
 
  我想要的是什么： strong>  p> 
 
 
  {{Form :: submit（'Delete'，['class'=＆gt;'btn btn-outline-danger']）}} 
 
 //想要用icon 
 
＆lt; i替换提交字段 class =“far fa-trash-alt icon-size”＆gt;＆lt; / i＆gt; 
  code>  pre> 
  div>

答

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'])}}

答

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>

在laravel表单上用图标替换提交按钮

相关推荐