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 that guideline I need to submit my login form using an <a> tag, because it has a custom image for the button.

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.

How can I change that tag to submit my form to my controller action?

Answer 1

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

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

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