使用标记作为提交按钮

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

为表单提供ID和链接，并调用onclick函数然后提交表单。

我们假设您有一个名为SubmitMe的表单和一个ID为ClickMe的span / div。

示例：

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

只是你知道这一点，这将提交＆＃34; SubmitMe＆＃34;形式。