使用 <a> 锚元素提交表单，不使用 javascript

Posted 2023-02-22

【中文标题】使用 <a> 锚元素提交表单，不使用 javascript

【英文标题】：Submit a form using <a> anchor element, without javascript

【发布时间】：2013-06-09 07:29:38

【问题描述】：

如何在不使用 javascript 的情况下用链接替换提交按钮？有没有办法将提交属性添加到链接？因为没有“提交”，表单不会通过简单的链接发送。

<form:form action="/getPage" >
     <div class="buttons">

         <a class="link" href=""> 
           <img src="icon.png" />
         </a>

     </div>         
</form:form>

我在应用程序网络中工作，所以如果我使用 javascript，则服务器不会映射链接..

【问题讨论】：

***.com/questions/1367409/…

如果您将 按钮 设为链接，请确保 Google 和其他搜索引擎不会浏览您的页面。您不希望由搜索引擎触发删除链接。

真正的问题是：为什么必须使用<a> 来提交表单？ <input> 或 <button> 有什么问题？？

【参考方案1】：

还有另一种出路。使用此方法，您可以使用任何元素来提交表单。 下面是一个例子：

<span onclick="$('#submit').trigger('click')" style="cursor:pointer;">
     anything
</span>

添加隐藏提交按钮：

 <input style="display:none;" type="submit" id="submit"/>

这将与实际提交按钮完全相同。

【参考方案2】：

这样可以达到同样的效果，看起来像<a>

注意：btnbtn-link来自bootstrap

<button class="btn btn-link" type="submit"><img src="icon.png" /></button>

【参考方案3】：

您不能单独使用<a> 标签提交表单。如果您坚持使用<a> 标签，您将需要某种类型的 javascript 来提供帮助：

<a href="#" onclick="$(this).closest('form').submit()">Submit the Form</a>

或

<a href="#" onclick="document.getElementById('form-id').submit()">Submit the Form</a>

或超级黑客：

<a href="backendPage.php?param1=yes&param2=no">Submit the Form</a>，然后在 backendPage.php 上您可以使用$_GET 请求来处理信息，并将访问者重定向到预期页面。但这是一个可怕的想法哈哈

【讨论】：

你好，伙计，我使用了这个方法，效果很好，但是当我将href值更改为空字符串（href=""）时不起作用，你能告诉我#的含义是什么。 ...

嗨@fazkan，href="#whatever" 告诉浏览器更改 URL 中的哈希，这通常意味着不重新加载页面（不包括 Angular 等）。空的href 属性将与指向将重新加载页面的当前页面相同。或者，您可以完全删除 href 属性并使用 CSS cursor:pointer 使鼠标悬停看起来像一个链接。

【参考方案4】：

试试这个：

CSS

button 
    background:none!important;
    border:none; 
    padding:0!important;
    /*border is optional*/
    border-bottom:1px solid #444; 

HTML

<button>your button that looks like a link</button>