ASP.NET MVC Form Submit with Link instead of Button

Question

I would like to have a simple login form (or any form for that matter), and be able to post it, not with a button, but with a link.

So no input, but a.

I've seen plenty of solutions for this type of question, and I've tried lots of different options, and every single time, nothing happens.

I've stripped all the JQuery from what I have, so this is the "base" situation: what's missing to make it submit the form?

<% using (Html.BeginForm("Login", "Account", FormMethod.Post, new { id = "loginForm" }))
  { %>
       <%= Html.TextBoxFor(x => x.UserName)%><br/>
       <%= Html.TextBoxFor(x => x.Password)%><br/>
       <a href="#" id="submit-link" class="button">Log In</a>
<%}%>

Answer 1

The only way to make this happen is using javascript:

<form id="fooForm" action="/foo" method="post">
    <a href="#" id="submit_link" class="button">Log In</a>
</form>

and in javascript:

$(function() {
    $('a#submit_link').click(function() {
        $('form#fooForm').submit();
    });
});

Although I would suggest you using a submit button:

<button type="submit">
    <a href="#" id="submit_link" class="button">Log In</a>
</button>

And try to style it to look as an anchor. My suggestion is to always use submit buttons to submit forms. This is more semantically correct, you will also find that things like pressing the Enter key while editing a text field will submit the form which is kind of native. So do what's semantically correct and do the styling in CSS.