4

我在 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>
4

4 回答 4

5

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

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

这将修复您的代码，这是您要问的问题。不过，作为一个元点，我不建议使用链接来提交表单。用户期望一个按钮来提交一个表单，而不是一个链接。不要乱用这样的语义。你会迷惑和惹恼用户。

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

于 2012-07-28T00:23:45.230 回答
1

通过单击链接，您的浏览器将尝试将您从该页面带走，因此您会丢失所有数据。你可以：

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

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

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

<form id="formname">

代替

<form name="formname">

否则你可以使用

document.formname

同样

于 2012-07-28T00:24:13.167 回答
0

在这篇文章中：如何使按钮看起来像一个链接？
@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-submit 按钮具有这种样式。所以我建议这样做：

<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-01T07:59:26.697 回答
0

使用Jquery你可以这样做

$(document).ready(function(){
    $('a').click(function(e){
        $('form').submit();
    });
});
于 2012-07-28T00:23:30.150 回答