Использование тега в качестве кнопки отправки

Question

Как я могу использовать тег в качестве кнопки отправки в моей форме (это просто вопрос дизайна для меня, а не функциональности)

My form

<form action="{{route('wishlist.store')}}" method="post">
  {{csrf_field()}}
  <input type="text" name="user_id" value="{{Auth::user()->id}}" hidden>
  <input type="text" name="product_id" value="{{$product->id}}" hidden>


  <button type="submit" class="wish-list">
    <i class="fas fa-heart"></i>
  </button>
</form>

Вся проблема, с которой я столкнулся, заключается в том, что серая рамка за значком моего шрифта вызвана <button>, поэтому мне нужно использовать тег <a>.

Я также пыталсяизмените мою кнопку с тегом и добавьте что-то вроде:

$(document).on("click","#sendwish",function(){
    $('form').submit(function(evt){
        evt.preventDefault();
        var url = $('form').attr("action");
        var formData = $('form').serialize();
        $.post(url, formData, function(response){
            console.log(response);
        });
    });
});

но это не сработало.

Есть идеи?

Answer 1

Возможно, вы можете просто перезаписать стили по умолчанию на кнопке?

.wish-list {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
}

или, если необходимо:

<button style="background: none; border: none; padding: 0; margin: 0;"></button>

Answer 2

Дайте вашей форме идентификатор, а также ссылку и вызовите функцию onclick, чтобы затем отправить форму.

Допустим, у вас есть форма, вызываемая с идентификатором SubmitMe и span / div сИдентификатор ClickMe.

Пример:

document.getElementById("#ClickMe").onclick = function(){
    document.getElementById("#SubmitMe").submit();
}

Чтобы вы знали об этом, в форме «SubmitMe» будет отправлено действие.