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!
Wesley on said
"We could use CSS to style those elements but I believe it’s better if those elements share the same tag." What is your reason for believing that? Computer Science is not about believing, it is an exact matter actually. And tags have a specific meaning. Its like telling that you are believing that a knife should not be used as a knife, but as a fork. Why?
Besides that, your page will stop working if the client doesn't have JavaScript enabled. So this is a really bad post actually.
Regards,
Wesley
Miguel on said
I agree with Wesley for the most part, but who in our days makes a site that doesn't have javascript? That would or could be true 10 years ago but now today.
And I like the post. It's a clean and scientifically pretty solution :p
Paul on said
This makes no sense to me, and is counter-intuitive. The link appearance is (as you said) easy to achieve with CSS if that's your preference, and the need to have matching tags is totally in your head; most web users will never notice and even web devs who do a view source probably won't think twice about it.
As has been said, there are still users which can't (or won't, for security reasons) enable JavaScript on their browsers, though I think that issue's shrinking.
Finally, if you're really into the whole semantics movement, you'd be better off using an input with type="reset" for the cancel button, since that's more semantically correct to what you're doing, then override *its* behavior with javascript to do a location.href shift to the page of your choice.
djsolid on said
Great comments and thank you for that!
@Wesley
First of all Web Design it's not Computer Science. At least not in my head. The issue that the above suggestion is trying to resolve relates with purely a designer prospective. That is why I am categorizing it inside Web Design.
I totally agree that if an "a tag" submits a form it works different than expected as "a tags" are supposed to be links navigating the user through pages.
@Miguel
Thank you
@Paul
That's true about the users not noticing any difference. Also the suggestion of using an input with type="reset" is pretty neat! But in the end a choose an "a tag" over an "input tag" any day. Why? Because I feel that I'm not doing anything wrong. I just prefer another way.
Wesley on said
@djsolid: This has got nothing to do with design. As you said yourself... you can solve the design part perfectly with CSS which is actually built for it. You are just being stubborn.
@miguel: you are right, but in this case I don't understand why one would add this needless dependency?
@paul: fully agree with you. Although I'm not all that in the semantics movement. I just don't get why one does hate the "input" tag so much that he creates code and adds a dependency just to not have to use it. Doesn't make sense to me at all.
Regards, Wesley
djsolid on said
@Wesley
On second thought, you 're right!
Wesley on said
@djsolid: You're a true sport!