使用普通链接提交表单

我想提交一份表格。但是我不会使用提交类型的输入按钮的基本方法，而是使用 一链接。

下图显示了原因。我使用图片链接来保存/提交表单。因为我有标准的 CSS 标记的图像链接，我不想使用输入提交按钮。

我尝试将 OnClick = “ document.formName.mit ()”应用到 a 元素，但是我更喜欢使用 html 方法。

alt text

有什么想法吗？

328715 次浏览
小开
最佳答案

两条路。要么创建一个按钮并设置它的样式，使它看起来像一个带有 css 的链接，要么创建一个链接并使用 onclick="this.closest('form').submit();return false;"。

小开

你正在使用图像提交. . 所以你可以简单地使用 type="image"输入“按钮”:

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

据我所知，如果没有某种形式的脚本，你是不可能做到这一点的。

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

来自 给你的例子。

小开

用途:

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

或:

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

还有一些 CSS

小开

像这样设计一个 input type="submit"对我来说很有效:

.link-button {
background: none;
border: none;
color: #1a0dab;
text-decoration: underline;
cursor: pointer;
}
<input type="submit" class="link-button" />

Tested in Chrome, IE 7-9, Firefox

小开

毫无疑问，没有纯 HTML 的解决方案来提交带有 link (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>

假设我用自己的名字输入:

Filled form

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

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>
小开

你可以利用 OnClick = “ document.getElementById (‘ formID _ NOT _ NAME’) . SUBMIT ()”


提交答案