使用普通链接提交表单

Question

我想提交一份表格。但我没有采用提交类型的输入按钮的基本方法，而是 a 链接。

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

我尝试将 onClick =“document.formName.submit（）”应用于a元素，但我更喜欢使用html方法。

有什么想法吗？

Answer 1

两种方式。创建一个按钮并对其进行样式设置，使其看起来像是与css的链接，或者创建一个链接并使用onclick="form.submit();"。

Answer 2

在我不知情的情况下，如果没有某种形式的脚本，你就无法真正做到这一点。

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

来自Here。

的示例

Answer 3

只为这样的input type="submit"设计样式对我有用：

.linkButton { 
     background: none;
     border: none;
     color: #0066ff;
     text-decoration: underline;
     cursor: pointer; 
}

<input type="submit" class="linkButton" />

在Chrome，IE 7-9，Firefox

中测试过

Answer 4

您正在使用图片提交..因此您只需使用type="image"输入“按钮”：

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

Answer 5

使用：

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

或：

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

加上一些CSS

Answer 6

你可以用 的OnClick = “的document.getElementById（ 'formID_NOT_NAME'）。SUBMIT（）”

Answer 7

当然，没有纯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，因为在提交后可以在加载页面的URL中看到正确的参数。

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

此解决方案显然适用于接受onclick事件或某些类似事件的任何标记。

this是一个很好的选择，可以与event variable（在所有主流浏览器和IE9以后都可用）一起恢复上下文，可以直接使用或作为参数传递给函数。

在这种情况下，使用属性a替换下面一行target标记的行，该属性表示已启动事件的元素。

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