Html 锚标签作为提交按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17098175/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Anchor tag as submit button?
提问by Kehlan Krumme
I'm in the process of converting an existing website to use MVC and Entity Framework.
我正在将现有网站转换为使用 MVC 和实体框架。
The layout / styling is all supposed to stay the same, and in order to follow that guideline I need to submit my login form using an <a>tag, because it has a custom image for the button.
布局/样式都应该保持不变，为了遵循该准则，我需要使用<a>标签提交我的登录表单，因为它具有按钮的自定义图像。
Here's my form:
这是我的表格：
@using (Html.BeginForm("Login", "Login", FormMethod.Post, new { id = "login", action = "Login" }))
{
<label>
<span>Username
</span>
<input type="text" name="UserName" id="UserName" class="input-text required" />
</label>
<label>
<span>Password
</span>
<input type="password" name="Password" id="Password" class="input-text required" />
</label>
<label>
<input type="checkbox" name="RememberMe" id="RememberMe" class="check-box" />
<span class="checkboxlabel">Remember Me</span>
</label>
<div class="spacer">
<a href="javascript:void(0)" onclick="login();" class="login-button"></a>
</div>
}
As you can see, the <a>tag formerly submitted login info using javascript. This is not what I'm looking to accomplish.
如您所见，该<a>标签以前使用 javascript 提交登录信息。这不是我想要完成的。
How can I change that tag to submit my form to my controller action?
如何更改该标签以将我的表单提交给我的控制器操作？
回答by G?khan Girgin
I've made small changes
我做了一些小的改变
HTML
HTML
<form action="test.aspx" type="POST">
<label>
<span>Username</span>
<input type="text" name="UserName" id="UserName" class="input-text required" />
</label>
<label>
<span>Password</span>
<input type="password" name="Password" id="Password" class="input-text required" />
</label>
<label>
<input type="checkbox" name="RememberMe" id="RememberMe" class="check-box" />
<span class="checkboxlabel">Remember Me</span>
</label>
<div class="spacer">
<a href="javascript:void(0)" class="login-button">Login</a>
</div>
</form>
jquery
查询
$(document).ready(function(){
$(document).on("click",".login-button",function(){
var form = $(this).closest("form");
//console.log(form);
form.submit();
});
});
回答by Jay
Typically you do not want to put a lot of javascript inside html tags, but if this only occurs once in your solution it will be fine. If however, there are anchor tags all over that need to post using Gokan's solution would work better with a marker class and some javascript in a common place.
通常，您不想在 html 标签中放入大量 javascript，但如果这在您的解决方案中只出现一次，那就没问题了。但是，如果到处都需要使用 Gokan 的解决方案发布锚标记，那么在公共位置使用标记类和一些 javascript 会更好地工作。
Change your anchor tag to look more like this:
更改您的锚标记，使其看起来更像这样：
<a href="javascript:$('form').submit();" class="login-button"></a>
回答by Smit Patel
Just need to change Single line, For OptimizationI think this one is a best way.
只需要改变Single line，因为Optimization我认为这是最好的方法。
@using (Html.BeginForm("Login", "Login", FormMethod.Post, new { id = "login", action = "Login" }))
{
// your HTML code
<div class="spacer">
<a href="" onclick='$("#login").submit()' class="login-button"></a>
</div>
}
