The easiest way to submit a form is to use the input tag with the submit type

<input type="submit" name="submit" value="Submit" />

But in every form it’s possible want a cancel link that navigates the user away from the page. So if we use a button and a link side by side we will end up like this :

which isn’t very pretty. We could use CSS to style those elements but I believe (edit: that means it's my personal opinion, I was always a fan of LinkButtons in WebForms, I don't really care about users with disabled JavaScript or users using IE4 and if you don't feel the same way then this solution won't probably be accepted by you!) it’s better if those elements share the same tag. So if both elements where “a” tags then it would be much more easier to style them.

But how can we submit the form when the user clicks the “Save”. With JavaScript of course. So we have to write something like this:

<a href="#" onclick="document.forms[0].submit();return false;">Submit</a>

Wow! That looks really ugly and what happens if we have more that one form in our page? Can we do better than that? Yes! And to make our life easier and our code prettier we will use jQuery.

First we create an extension method to HtmlHelper so that we can use it more easily.

public static IHtmlString SubmitLink(this HtmlHelper html, string text)
{
     return html.Raw(string.Format("<a href='#' class='type-submit'>{0}</a>", text));
}

Then we can use it like this:

And finally we will use the following jQuery code probably when our page is loaded:

$('.type-submit').click(function () {
    $(this).closest('form').submit();
    return false;
});

So what we do is taking the first form tag that the element with class ‘.type-submit’ is contained and submit it! We can also hide the link so the user cannot press it again or perform any other operation we wish.

Pretty simple, I think!

Comments are always welcomed!

Note: If you discard the Extension method part, this can be applied to any html page!