ASP.NET MVC Form Submit with Link in stead of Button

Question

Ok, I've wasted enough time trying things, time to ask for an aimed answer:

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.

Answer 2

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.

Answer 3

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>

Answer 4

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.