代码之家 › 专栏 › 技术社区 › DarkLeafyGreen

使用普通链接提交表单

submit hyperlink forms css html

109

DarkLeafyGreen · 技术社区 · 14 年前

我想提交一份表格。但我不打算使用带有submit类型的input按钮,而是使用一链接。

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

我试着申请 onClick=“document.formName.submit()” 但我更喜欢一个html方法。

alt text

有什么想法吗?

7 回复 | 直到 14 年前

155

isherwood 10 年前

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

JonVD 14 年前

据我所知,如果没有某种形式的脚本,就不能真正做到这一点。

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

示例来自 Here .

Serj Sagan 6 年前

只是设计一个 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中测试

ThiefMaster 14 年前

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

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

RobertO 14 年前

使用:

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

或:

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

加上一些CSS

Sameh Helaly 7 年前

你可以用 OnClick=“document.getElementById('formID_NOT_NAME').SUBMIT()”

-1

Nathan Tuggy TonyLuigiC 7 年前

当然,没有纯HTML的解决方案来提交带有链接的表单( a )标签。标准HTML只接受按钮或图像。正如其他一些合作者所说,可以使用按钮模拟链接的外观,但我想这不是问题的目的。

IMHO,我认为提议和接受的解决方案行不通。

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

因此可以使用一行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 in form method属性,因为提交后可以在加载页的URL中看到正确的参数。

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

这个解决方案显然适用于任何接受 onclick 事件或类似事件。

这 是恢复上下文和 event variable (在所有主要浏览器和IE9以后的版本中都可用)可以直接使用或作为参数传递给函数。

在这种情况下,用 一 使用属性按下面的行标记 target ,指示已启动事件的元素。

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