提交带有链接的表单不起作用

Posted 2023-05-09

【中文标题】提交带有链接的表单不起作用

【英文标题】：Submit a form with an a link does not work

【发布时间】：2019-11-08 15:30:16

【问题描述】：

我有这个表格

<form method="POST" action="http://site.test/nodes/destroy" accept-charset="UTF-8" class="form-horizontal" role="form"><input name="_token" type="hidden" value="G2Mk8eZLwPOw5YYvKMSLj7kw6ThR4e2fP7aAWoGt">

    <a href="" onclick="form.submit();">
        <i class="fa fa-trash text-danger"></i>
    </a>


    <input name="ip" type="hidden" value="172.18.29.241">

</form>

当我点击垃圾箱时，它假设提交表单，它没有。

我可以看到页面正在刷新，但它从未到达我的控制器。

我错过了什么？

【问题讨论】：

尝试将href="" 更改为href="#"。你可能需要onclick="document.forms[0].submit();" 而不是你现在拥有的。

好的，现在试试。

只是补充一下，如果我这样做了，它将起作用<button type="submit" class="btn btn-danger"> Delete </button> - 但目标是使用 a 标签。

为什么不使用提交按钮并将其样式设置为看起来像链接？如果您使用的是 Bootstrap（这些类暗示您可能是），那么样式就很简单了。

要确认，您应该为此使用按钮，而不是锚点。它们有不同的语义。

【参考方案1】：

简而言之，不要为此使用链接（锚点）。这样做会导致您尝试编写 javascript 代码（以及诸如 href="#" 之类的黑客攻击），以尝试在您应该只使用按钮时与使用链接的语义作斗争。

由于您有 Bootstrap，将按钮设置为 看起来像链接是微不足道的。例如：

<button type="submit" class="btn btn-link">
    <i class="fa fa-trash text-danger"></i>
</button>

它保持 html 简洁明了，不会引入不必要的复杂性，无需 JavaScript 即可工作，并且更容易被屏幕阅读器等工具访问，并且使用元素的语义而不是对抗它们。