A while back I wrote a post about multiple default buttons on a form which I needed to revisit recently and as is always the way when you look back at some old code I ended up saying to myself

"What the hell were you thinking?".

I had a mild chuckle to myself as I read the blog post again and realised how far I have come with jQuery in a relatively short space of time so I thought I would improve on my previous post and hopefully save someone a bit of time when they come to do a similar thing. After all that is what the internet and blogs are all about (at least for me). Not a way to “Talk myself up” but a valuable resource for the development community and for me to come back to. It’s my notes, my journal. Lord knows all you bloggers out there have saved my butt on many occasion.

Fellow Bloggers I salute you. Blog on Dudes!

Anyway, on to the default buttons.

This time around I had 1 form that was very jQuery heavy, in fact the entire site was pretty much driven by 1 page that contained everything I needed. A tiny bit slow to load and if it had gotten any bigger I would have moved things around but it was fine as is. Once loaded it is a very pleasant experience.

I have various elements on the page that contained buttons ( anchor tags in this case with images loaded via CSS) that are contained inside hidden div elements that are displayed as modal forms.

“Oooo look at you all Web 2.0, think your soooo fancy”

“Yeh whatever, who even says Web 2.0 these days”

Depending on which input had the focus I required a different anchor tag to receive the Enter keypress event. Having all my code in place already this was the icing on the cake finishing off this piece of work.

The code to actually do whatever it is that was required is remarkably simple and generic. It doesn’t matter which anchor tag is clicked the same code gets executed.

“Code re-use and minification, what a novel concept!”

$("input").keypress(function (e) { if ((e.which && e.which 13) || (e.keyCode && e.keyCode 13)) { $("a.default-button").click(); } });

So that little snippet above captures the Enter keypress event and then says find me the anchor tag on this page that has a class of default-button.

If you find it then execute the ‘Click’ event of the anchor that you found.

Now of course this assumes that you only have 1 anchor tag on the page at any 1 time that has this class.

So to do that we just need the following code:

$("#image-search").bind("focus", function (e) { $("a").removeClass("default-button"); $("#find-images").addClass("default-button"); }) $("#image-search").blur(function (e) { $("a").removeClass("default-button"); })

So let me explain what is going on above.

The first sections says when the input with id=image-search gets the focus remove the class default-button from all anchor tags and add the class default-button to the anchor tag that I want to execute the click event on when the user presses enter.

The second section is more of a safe guard and says when the input with id=image-search loses the focus remove the class default-button from all anchor tags.

And that’s it. For each input that you want to do a different action just add the block above and modify.

As I am writing this I am sure I could reduce it down even further so I don’t need to repeat that for each input. However, for now, the clients (and business) needs are met. I am happy and they are happy.

BondiGeek