I’m in the midst of doing a bit of a progressive enhancement upgrade to this site, which essentially means splitting down my stylesheets to typography, layout and colours, then adding a nice layer of css3 goodness.
Anyhoo, part of that exercise involves streamlining my jquery javascript for the pre-population of form fields on this site, so here’s what I’ve put together:
$("form label").each(function(){
var forminput = "input#" + $(this).attr("for");
var labelmsg = $(this).text();
$(forminput).attr({"value":labelmsg});
$(this).hide();$(forminput).each(function(){
$(this).focus(function(){
$(this).attr({"value":""});
});
});
});
Right, the script looks for <label> fields on the page, then I build a string that lets jquery pick up it’s associated input field. From there the lovely jquery pixies grab each the text of the label, pre-populate the field with that text and finally another function clears the field when you focus on it. It’s nice and low calorie, enjoy.
Self note: need to think about a nice style for the <code> tags…
