ASP.NET MVC Form Submit with Link instead of Button

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 开发者_StackOverflow社区= "loginForm" }))
  { %>
       <%= Html.TextBoxFor(x => x.UserName)%><br/>
       <%= Html.TextBoxFor(x => x.Password)%><br/>
       <a href="#" id="submit-link" class="button">Log In</a>
<%}%>

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.

If the only reason that you want to use a link instead of a button is to make it look different (whilst retaining the same functionalty), why not just style the button to look like a link...

<input type="submit" value="Submit the form" class="fakeLink"/>

<style type="text/css">

.fakeLink{
    border: 0px;
    background-color: transparent;
    color: blue;
    cursor: hand;
} 
.fakelink:hover{
    text-decoration: underline;
}

</style>

Unfortunately, the 'hover' style doesn't work with IE, but does with Firefox.

I'm not completley convinced that making a submit button look like a link is a good idea, but I'm sure that I've seen it done before.

You can add a click handler to do it like this:

$(function() {
  $("#submit-link").click(function() {
    $("#loginForm").submit();
  });
});

Or to make it more reusable, give the link a class instead, like this:

<a href="#" class="submit-link button">Log In</a>

Then reference it that way:

$(".submit-link").click(function() {
  $(this).closest("form").submit();
});

This makes any <elem class="submit-link"> work to submit the <form> it's in.

The only thing I would change in your solution that I would add the onclick event to your link in order to 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" onclick="loginForm.submit();">Log In</a>
<%}%>

Try inline JavaScript

   <a href="javascript:document.forms[0].submit()">
      Submit
    </a>

can't you just put a onclick event on it?

<a href="#" id="submit-link" class="button" onclick="submitForm()">Log In</a>

<script type="text/javascript">
  function submitForm()
       {
          document.forms.item(0).submit();
       }
</script>

In razor syntax and to add on Amer's suggestion; here's successful implementation I used:

Add the id of your form in the BeginForm method in the htmlAttributes.

Then use the inline JavaScript HREF to reference the form by it's id and submit it.

using (Html.BeginForm(actionName: "LogOff", controllerName:"Account", routeValues: new { Area = "" },method: FormMethod.Post, htmlAttributes: new {id = "logoutForm", @class = "navbar-right" }))
{
@Html.AntiForgeryToken()
<a href="javascript:document.getElementById('logoutForm').submit()">Log off</a>
}