Comments on: labelify: a jQuery plugin to add labels to your textboxes

By: Garrett LeSage

Garrett LeSage — Thu, 26 Jun 2008 15:05:45 +0000

Hey Stuart!

I actually write my own jQuery plugin to do the exact same thing, and used almost exactly the same techniques as you used. It’s shockingly similar. After seeing yours via Planet GNOME, I decided to drop mine and switch to yours. (It works exactly the same a drop-in replacement, once I passed the option to use a different classname.)

My own git branch is at github now. I took the liberty to adapt your HTML page to text and include it as a README file (with a link at the top of the file)… and I also fixed a couple of minor semicolon bugs, too. If/when I find more bugs, I’ll commit them as well. (It’s better to work on a unified codebase than each having our own.)

My git branch is now located at:
http://github.com/garrett/jquery.labelify

Thanks for your version the plugin!

By: Krijn Hoetmer

Krijn Hoetmer — Thu, 26 Jun 2008 08:51:21 +0000

Ah, okay. I don’t think submitting a blank value is a problem, but you could throw in an extra setting, which holds the submitted value when nothing is selected (”" by default). I see you in September, though! :)

By: sil

sil — Thu, 26 Jun 2008 08:37:06 +0000

Krijn: the problem is: what happens if someone submits the form without ever touching the select? You haven’t attached a value to the new option, so it’ll submit as blank…but that might not be what you want the default to be, and there’ll be no way of overriding that. I see your theory, though!

By: Krijn Hoetmer

Krijn Hoetmer — Thu, 26 Jun 2008 08:34:40 +0000

Wouldn’t you only need one label value? The one that is shown in the dropdown when ‘nothing is selected’ (), that’s removed on focus and put back when no option is selected? I’m probably missing something here :)

A quick try: http://krijnhoetmer.nl/zooi/js/labelify-select - only some bad UI in IE, but that’s to be expected..

By: sil

sil — Thu, 26 Jun 2008 07:53:15 +0000

Krijn: labelifying select elements is easy from a code point of view but not from a UI point of view, because a selected entry in a dropdown has _two_ values: the text that’s shown in the dropdown and the value that’s sent to the server when the form is submitted. It’s certainly possible to imagine ways of getting two values from the title attribute or label or both, but the code you wrote would be annoying if it were generic enough to be used by everyone who might need it, so the library wouldn’t be very good.

By: Krijn Hoetmer

Krijn Hoetmer — Thu, 26 Jun 2008 07:47:08 +0000

Nice! Just what I needed. Also very smart that it clears the label values on form submit. That should be reason number 4 in your ‘why use it’ list :)

And how about labelifying select elements like this as well? That’s a huge pita to do right now. Would it be easy to insert a temporary option, just like you do with a temporary value?

Thanks!

By: MindstormsKid

MindstormsKid — Wed, 25 Jun 2008 18:29:55 +0000

Thanks, it works now!

By: sil

sil — Wed, 25 Jun 2008 18:25:05 +0000

MindstormsKid: yep. You’re using $(”input[text]“) as a selector, which looks for input elements with an attribute named “text”. What you want is $(”:text”) or something similar — see http://docs.jquery.com/Selectors for details.

(This was wrong in my original writeup, and I’ve since changed it; thanks for the pointer!)

By: MindstormsKid

MindstormsKid — Wed, 25 Jun 2008 17:56:57 +0000

Hi, I tried this on http://teamterastorm.googlepages.com/contactus_form_test.html , but it won’t work. Do you know why?

By: Olly

Olly — Wed, 25 Jun 2008 16:15:24 +0000

Thanks Stuart, this looks like a handy plugin.

I tried to implement something similar myself but ran into all sorts of issues with the various ways the browsers do their auto-complete thing.