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
3 Comments
Van
October 28th, 2008 at 1:19 am
Nerd.
James
October 28th, 2008 at 5:38 am
Jock.
Peter
January 7th, 2009 at 3:53 am
Nice snippet – hadn’t thought of prefilling from the value attr.
Surround the code block in pre tags
Leave a Comment