And this is labelify: a jQuery plugin to add labels to your textboxes, written , and concerning JavaScript and the DOM, Howtos
Comments
Hi, I tried this on http://teamterastorm.googlepages.com/contactus_form_test.html , but it won't work. Do you know why?
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!)
Thanks, it works now!
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!
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.
Wouldn't you only need one label value? The one that is shown in the dropdown when 'nothing is selected' (<option class=labelledClass>My label</option>), 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..
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!
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! :)
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!
Great plugin. But if your page submits to itself and re-populates the form with the post data (when outputting the HTML), labelify still replaces populated fields with the label text.
Makes server-side validation a pain :(
Nick: it's not meant to do that. Can you show me an example?
Here's a quick example of what I'm doing:
http://www.popcornwebdesign.co.uk/2009-04-02-labelify-test/
The page requires a valid postcode and valid email address. It submits to itself and performs the validation with server-side script, if the data is not valid, it redisplays the form with the fields populated - and in this situation it would be better if labelify didn't replace the field contents with labels (unless the data is manually removed).
I realise I could avoid the issue by doing the validation on the client-side or with AJAX, but I'm retro-fitting the feature to an existing website, so thats not really an option.
Maybe you can see a way to solve this problem?
Thanks for the plug-in Stuart. Just what the doctor ordered!
Nick: the flaw with having labelify not replace after a submit, in your example, is that the user will have no idea what the fields mean; there's no label. Clicking in the textfields does show the actual text they entered...
Any ideas on how to use this together with the placeholder attribute.
Of course with a question mark at the end :)
Krijn: I don't think it should be so used; placeholder is for examples, not instructions, and labelify puts instructions in the field...
Huh, you mean like for your first example on http://www.kryogenix.org/code/browser/labelify/ ? :)
I think placeholder="" is exactly what you've implemented with labelify. Safari and Chrome already support it that way, so in that case it doesn't work too well together with labelify.
Krijn: true enough, heh. Labelify already can use the placeholder attribute by passing a custom function, though:
$("input").labelify({
text: function(input) {
return input.getAttribute("placeholder");
}
});
If you also have the Prototype library loaded this fails. A simple find-replace of '$' to 'jQuery' in jquery.labelify.js completely fixes the problem. It should still compress just as well, too.
your pluuugin is sooo awesome thanks a lot seriously, it saved my day...
I love your plugin and have been using it a fair bit recently, however, I'm having a slight problem.
When I use it with the jquery form validation plugin and the validation fails, the labels don't repopulate so they're all left blank. How would I make them repopulate?
Trip: I don't know without taking a detailed look at it and some custom work to fix it. Drop me an email and we can talk about rates and so on.
Great Plugin! Many thanks!
@Trip: I'm stuck with the same problem... Have you found a working sollution to this?
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.