CODEWITHSUNDEEP
htmllaravel
Amine
Amine

Reputation: 941

How to make an icon link that functions the same as a submit button in Laravel 5.7?

I have custom function in my Model Controller called block, it sets a field in the database for one user from 0 to 1 or vice versa, in my index there's a datatable that displays users along with a block/unblock button, the datatable looks like this:

enter image description here

And now I remade my datatable to a better looking one using icons which looks like this

enter image description here

the problem is clicking on the block icon doesn't do anything this is the code for first blocking button:

<td>
    <form action="{{ route('users.block',$user->id) }}" method="post">
        @csrf
        <button class="btn btn-danger" type="submit">Bloquer</button>
    </form>
</td>

and this is the new code for the block icon

<td>
    <form action="{{ route('users.block',$user->id)}}" method="post">
        @csrf
        <a class="icon" >
            <i class="fe fe-lock"></i>
        </a>
    </form>
</td>

I tried adding type="submit" to the icon properties but makes it look not the same and it doesn't work, I used <button> tag instead of <i> it works but it doesn't look like an icon, thanks for your patience

Upvotes: 0

Views: 804

Answers (2)

Piazzi
Piazzi

Reputation: 2636

You're building a form, if you want it to work you need to submit it (that's what the HTML attribute type="submit" does). I don't think it will work if you put any other tag in here.

If your problem is only with the style of the button you could do this:

<td>
   <form action="{{ route('users.block',$user->id) }}" method="post">
                  @csrf
       <a class="icon" ><button class="btn btn-danger" type="submit"><i class="fe fe-lock"></i></button></a>
   </form>
</td>

You can modify the CSS to make the button look as just a icon.

For more info click here

EDIT: Button without any style:

.form-button {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}
<button class="form-button">Put the other tags here</button>

Upvotes: 3

Iftikhar uddin
Iftikhar uddin

Reputation: 3182

You can use anchor tag for submit and add the icon code inside the a tag as below:

<td>
   <form action="{{ route('users.block', $user->id) }}" method="post">
           @csrf
       <a class="icon" type="submit"><i class="fe fe-lock"></i></a>
   </form>
</td>

Upvotes: 0

Related Questions