将一个用于提交的HTML按钮转换为链接HTML？

Question

我在HTML中有以下的提交按钮：

<input name="submit" type="submit" value="Sign In" />

我想将它转换为HTML链接，可以使用以下方法：

<a  href="#" onclick="document.getElementById('formname').submit()">Sign In</a>

但是表单没有提交。

谢谢。

完整的代码如下：

<form id="form_freeuser" action="login.php" method="post" name="form_freeuser">
            <div class="label"><label>Free User</label></div><input id="name" name="name" readonly="readonly" type="text" value="test" />
            <input id="user_email" name="email" readonly="readonly" type="password" value="test" />
            <input name="submit" type="submit" value="Sign In" />

        </form>

- Piedpiper Malta

---

你的表单标签内是否包含了它？ - Skovy

为什么要这样做呢？使用JS的方法对于禁用了JS的用户是行不通的。另一方面，您可以随心所欲地为输入框设置样式，甚至模仿链接标签（<a>）。 - Zoltan Toth

另外，您可能不想使用链接。您可以使用span标签并以任何您想要的方式进行样式设置。 - Erin

请问我该如何处理这个问题？谢谢。 - Piedpiper Malta

Answer 1

请确保id属性设置为您要发送到getElementById()的内容。

<form id="formname" action="/foo" method="get">
    <a  href="#" onclick="document.getElementById('formname').submit()">Sign In</a>
</form>​

这将会修复您的代码，也就是您所问的问题。然而，作为元问题，我不建议使用链接来提交表单。用户期望使用按钮来提交表单，而不是链接。不要这样搞乱语义。这会让用户感到困惑和恼火。

您也可以使用 CSS 来将按钮样式设置成超链接的样式。但它会有与链接相同的问题，打破传统约定。

- Trott

---

最好不要使用JavaScript来做这件事。请看我的新答案。 - Wouter

原帖的问题不是“最好的方法是什么？”而是（换句话说）“这是我的代码，为什么它不能按照我的期望工作？”这个回答了那个问题。 - Trott

足够正确。但是对于任何不需要显式使用JS方法的人来说，HTML方法提供了更多的好处。虽然没有明确要求，但这是暗示。根据用途不同，两种答案都很有用。如果愿意，可以将它们合并为一个答案。 - Wouter

Answer 2

点击链接后，您的浏览器将尝试将您带离页面，因此您将失去所有数据。您可以：

<a  href="#" onclick="document.getElementById('formname').submit();return false">Sign In</a>

“formname”是表单的ID还是名称？

要使该代码起作用，您需要：

<form id="formname">

不是

<form name="formname">

否则您可以使用

document.formname

同样地

- Opi

Answer 3

使用 Jquery 可以按照以下方式实现

$(document).ready(function(){
    $('a').click(function(e){
        $('form').submit();
    });
});

- Alex Reynolds

Answer 4

在本篇文章中：如何使按钮看起来像链接？
@odedbd提供了一个很好的解决方案：http://jsfiddle.net/zYCN9/1/

他的代码将按钮转换为普通的超链接。
与JS解决方案相比，它的好处是您不使用JS。因此，禁用JS的用户仍然可以使用您的表单。这似乎是一种更优雅和符合HTML标准的方法。

如果链接失效，我已经复制了下面的代码：

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

button {
    background:none!important;
     border:none; 
     padding:0!important;

    /*optional*/
    font-family:arial,sans-serif; /*input has OS specific font-family*/
     color:#069;
     cursor:pointer;
}
button:hover{
         text-decoration:underline;
}

此外，您可能不希望所有的提交按钮都具有这种样式。因此，我建议您这样做：

<input type="submit" class="submit_hyperlink" value="submit this form"/>

input.submit_hyperlink {
    background:none!important;
     border:none; 
     padding:0!important;

    /*optional*/
    font-family:arial,sans-serif; /*input has OS specific font-family*/
     color:#069;
     cursor:pointer;
}

input.submit_hyperlink:hover{
         text-decoration:underline;
}

- Wouter