Anchor tag as submit button?

Question

I\'m in the process of converting an existing website to use MVC and Entity Framework.

The layout / styling is all supposed to stay the same, and in order to follow

Answer 1

Just need to change Single line, For Optimization I think this one is a best way.

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

Answer 2

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.

Change your anchor tag to look more like this:

<a href="javascript:$('form').submit();" class="login-button"></a>

Answer 3

I've made small changes

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

JSFiddle