Wrote a little plugin for using the default value in text elements as label, you know. Look at the right hand side in the newsletter form for an example.
[sourcecode language='javascript']
$.fn.label = function(options){
var default_settings = {
clearLabels : true
};
var settings = $.extend(default_settings, options);
return this.each(function(){
var elm = $(this);
if($(this).val().length > 0) {
$.data(elm, ‘default’, $(this).val());
elm.focus(function(){
if($(this).val() == $.data(elm, ‘default’)) {
$(this).val(”);
}
}).blur(function(){
if($(this).val() == ”) {
$(this).val($.data(elm, ‘default’));
}
});
if(settings.clearLabels) {
$(this.form).submit(function(){
if($(this).val() == $.data(elm, ‘default’)) {
$(this).val(”);
}
});
}
}
});
}
[/sourcecode]
Pingback: Unobtrusive Form Enhancements | Front-End Book
Hi!
There’s a bug in this in that the browser will sometimes auto-fill the fields. So you get the wrong default values. A more robust approach is putting the default values in the title attribute and sucking them from there.
This is probably not a problem for your newsletter form, though, due to the way it’s being used.
@Ole: Thanks for the input, I will update the script when I have the time.