将HTML提交按钮转换为链接HTML？

我有以下的HTML提交按钮：将HTML提交按钮转换为链接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>

来源

2012-07-28 Piedpiper Malta

你在你的

它们在表单标签内。 – 2012-07-28 00:23:49

你为什么要那样做？ JS方法不适用于JS禁用的用户。另一方面，无论如何你都可以设置输入样式 - 甚至可以模拟一个'' – 2012-07-28 00:25:15

使用Jquery您可以按如下

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

来源

2012-07-28 00:23:30

确保id属性设置为任何你发送至getElementById()做到这一点。

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

这将修复你的代码，这是你问的问题。尽管如此，我不会推荐使用链接来提交表单。用户期望按钮提交表单，而不是链接。不要混淆像这样的语义。你会混淆和惹恼用户。

您还可以使用CSS来设置按钮的样式，使其看起来像超链接。它有违反惯例的完全相同的问题。

来源

2012-07-28 00:23:45 Trott

最好不要使用JavaScript来做到这一点。看到我的新答案。 – Wouter 2014-04-01 08:00:02

最初的海报问题不是“这样做的最佳方式是什么？”这是（解释）“这是我的代码，为什么它没有按照我期望的那样做？”这回答了这个问题。 – Trott 2014-04-01 21:47:37

够正确。但对于任何不明确要求JS方法的人来说，HTML方法提供了更多的好处。它没有明确要求，但暗示。这两个答案都是有用的，这取决于目的。如果你喜欢，随时将它们组合成一个答案。 – Wouter 2014-04-02 07:22:08

通过点击链接，您的浏览器将尝试将您带离网页，以便您丢失所有数据。您可以：

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

也是“formname”窗体的ID或窗体的名称？

对于代码工作，你需要：

<form id="formname">

而不是

<form name="formname">

否则，你可以使用

document.formname

除了

来源

2012-07-28 00:24:13 Opi

在这篇文章：How to make button look like a link?
@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; 
}

此外，你不会想-all-提交按钮有这种风格。所以我建议你这样做：

<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; 
}

来源

2014-04-01 07:59:26 Wouter

将HTML提交按钮转换为链接HTML？

回答

相关问题