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>

Answer 1

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

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

这将修复您的代码，这是您要问的问题。但是，作为一个要点，我不建议使用链接提交表单。用户需要一个按钮来提交表单，而不是链接。不要乱用这样的语义。你会混淆并惹恼用户。

您还可以使用CSS将按钮设置为看起来像超链接。它具有完全相同的破坏惯例问题。

Answer 2

点击链接，您的浏览器会尝试将您带离页面，这样您就会丢失所有数据。你可以：

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

“formname”还是表单的id或表单的名称吗？

要使代码正常工作，您需要：

<form id="formname">

而不是

<form name="formname">

否则你可以使用

document.formname

同样

Answer 3

使用Jquery，您可以按照以下方式执行此操作

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

Answer 4

在这篇文章中：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;
}

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

4 个答案: