使用普通链接提交表单

Question

我想提交一个表单。但我不会使用基本的输入按钮和提交类型，而是使用a链接。

下面的图片说明了原因。我正在使用图像链接来保存/提交表单。因为我有标准的CSS标记，所以我不想使用输入提交按钮。

我尝试将onClick="document.formName.submit()" 应用于a元素，但我更喜欢一种HTML方法。

任何想法？

- DarkLeafyGreen

---

使用按钮和CSS来显示图片，或者使用JavaScript，没有真正的方法可以在没有JavaScript的情况下简单地使用href提交表单。 - Anton S

我赞同这一点，不幸的是没有不用 JavaScript 的简单方法。 - benhowdle89

你这么做的原因听起来像是一种虚伪的节约。最好只需想出一个标准CSS以供提交按钮使用，并按照它们被设计的方式使用表单。这里有一堆关于按钮CSS技术的描述：http://www.tripwiremagazine.com/2009/06/24-essential-submit-button-enhancements.html。 - dnagirl

Answer 1

有两种方法。一种是创建一个按钮并使用CSS对其进行样式设计，使其看起来像链接，或者创建一个链接，然后使用onclick="this.closest('form').submit();return false;"。

- Jan Sverre

---

这是关于如何将按钮样式设置为链接的参考：https://dev59.com/CXM_5IYBdhLWcg3wdy_z - flipchart

请注意，如果没有 JavaScript，form.submit() 将无法运行。 - baptx

即使是旧款智能手机也可以启用JavaScript。 - Mahdi Jazini

@MahdiJazini 很多人默认禁用 JavaScript，这可能会对性能造成干扰并影响某些情况下的表现。如果 JavaScript 失败，它可能会破坏整个网站（例如使用 CDN 而没有本地回退且第三方域名被阻止）。如果存在 HTML 错误，您仍然可以使用该网站。开发人员应该遵循渐进增强原则。 - baptx

如果您想支持不使用 JavaScript 的用户，请执行此答案中描述的第一种选项，将按钮样式设置为链接。例如 input[type=submit].link { border: none; background: none; display: inline; color: blue; text-decoration: underline; } 和 <input type=submit class="link" />。 - Jan Sverre

Answer 2

据我所知，你不能真正实现这个功能而不使用某种形式的脚本。

<form id="my_form">
<!-- Your Form -->    
<a href="javascript:{}" onclick="document.getElementById('my_form').submit(); return false;">submit</a>
</form>

这个例子来自这里。

- JonVD

---

亲爱的访客们，请不要忘记设置 >>> id="my_form"，这是id而不是name :D - Mahdi Jazini

这应该是最好的和明确的答案，谢谢！ - yehanny

Answer 3

我只需要像这样为 input type="submit 添加样式即可：

.link-button { 
     background: none;
     border: none;
     color: #1a0dab;
     text-decoration: underline;
     cursor: pointer; 
}

<input type="submit" class="link-button" />

已在Chrome、IE 7-9和Firefox中进行测试

- Serj Sagan

---

仅供参考：您应该使用CSS选择器选择适当的“input”元素，而不将类附加到HTML元素。 - Erik Kaplun

尽管您的评论是首选方式，但这并非总是可能的。 - Serj Sagan

为什么那是首选的方式？ - Mark

这是一种半成熟的编码实践，通常会留下更干净的HTML代码...但这并不是一个很大的问题。 - Serj Sagan

这个答案也不依赖于JavaScript，这样就少了一件要担心的事情。 - Matthew Lock

请参见此处：https://dev59.com/CXM_5IYBdhLWcg3wdy_z?noredirect=1&lq=1 - Matthew Lock

Answer 4

你正在使用图像来提交表单... 因此你可以简单地使用一个type="image"的输入按钮：

<input type="image" src="yourimage.png" name="yourinputname" value="yourinputvalue" />

- ThiefMaster

---

...或者一个包含 <img/> 元素的 <button> 元素。 - DanMan

这是MDN的链接，以防其他人需要参考：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/image - Sam

Answer 5

使用：

<input type="image" src=".."/>

或者：

<button type="send"><img src=".."/> + any html code</button>

再加上一些CSS

- atlavis

Answer 6

毫无疑问，使用纯HTML无法通过链接（a标签）提交表单。标准的HTML只接受按钮或图像。正如其他合作者所说，可以使用按钮模拟链接的外观，但我想这不是问题的目的。

在我看来，我认为提出并接受的解决方案不起作用。

我已经在表单上测试过了，浏览器没有找到对表单的引用。

因此，可以使用一行JavaScript代码解决它，使用this对象，该对象引用被点击的元素，该元素是需要提交的表单的子节点。因此，this.parentNode是表单节点。之后只需在该表单中调用submit()方法即可。不需要从整个文档中进行研究以找到正确的表单。

<form action="http://www.greatsolutions.com.br/indexint.htm"                   
   method="get">
    <h3> Enter your name</h3>
    First Name <input type="text"  name="fname"  size="30"><br>
    Last Name <input type="text" name="lname" size="30"><br>
    <a href="#" onclick="this.parentNode.submit();"> Submit here</a>
</form>

假设我输入我的名字：

我在表单的方法属性中使用了get，因为在提交后加载的页面中可以看到正确的参数。

http://www.greatsolutions.com.br/indexint.htm?fname=Paulo&lname=Buchsbaum

这个解决方案显然适用于任何接受 onclick 事件或类似事件的标签。 this 是恢复上下文的绝佳选择，加上 event 变量（在所有主要浏览器和 IE9 及以上版本中都可用），可以直接使用或作为参数传递给函数。

在这种情况下，使用属性 target 替换带有 a 标签的行，并指示已启动事件的元素。

<a href="#" onclick="event.target.parentNode.submit();"> Submit here</a>

- Paulo Buchsbaum

---

@Nathan，我没有太多在“Stackoverflow”写作的经验。我希望你的更正能够帮助我改善我的风格。我的英语也不太好。 - Paulo Buchsbaum

Answer 7

你可以使用 OnClick="document.getElementById('formID_NOT_NAME').SUBMIT()"

- Sameh Helaly