Unobtrusive label to textbox association using JQuery

Well things just seem to be getting easier and easier. Next up I have a form that I wanted to try the concept of unobtrusive JavaScript on. The form is relatively simple containing two labels and text boxes for a first name and a last name. Here we have the form in Razor (MVC3)

�

   1: <form id="registrationForm">

   2: @Html.LabelFor(x => x.FirstName)

   3: @Html.TextBoxFor(x => x.FirstName)

   4: <br />

   5: @Html.LabelFor(x => x.LastName)

   6: @Html.TextBoxFor(x => x.LastName)

   7: form>

Then I started experimenting with the page JavaScript is located in a separate file. So it would be included in a script tag. It actually turned out way simpler than I initially thought.

�

Here is my first iteration of the JavaScript file

   1: /**

   2: * Configure the function to handle the label insertion into

   3: * the text areas

   4: */

   5: $(function () {

   6:     $('#registrationForm label').each(function (i) {

   7:         var label = $(this);

   8:         var textBoxId = "#" + label.attr("for");

   9:         var text = label.text();

  10:         var textBox = $(textBoxId).val(text);

  11:� 

  12:� 

  13:         textBox.focus(function () {

  14:             if (this.value == text) {

  15:                 this.value = "";

  16:             }

  17:         })

  18:         .blur(function () {

  19:             if (this.value == "")

  20:                 this.value = text;

  21:         });

  22:� 

  23:         label.hide();

  24:     });

  25: });

And that, honestly, was that. Of course looking at that I couldn’t help but feel it better to wrap it in a function so I don’t have to replicate that code on every form. So this is what I ended up with in my handy little helper class:

   1: function Helper() { }

   2:� 

   3: Helper.processFormLabels = function (formId) {

   4:     var query = "#" + formId + " label";

   5:     $(query).each(function (i) {

   6:         var label = $(this);

   7:         var textBoxId = "#" + label.attr("for");

   8:         var text = label.text();

   9:         var textBox = $(textBoxId).val(text);

  10:� 

  11:� 

  12:         textBox.focus(function () {

  13:             if (this.value == text) {

  14:                 this.value = "";

  15:             }

  16:         })

  17:         .blur(function () {

  18:             if (this.value == "")

  19:                 this.value = text;

  20:         });

  21:� 

  22:         label.hide();

  23:     });

  24: }

Then the document on load script looks like this

   1: /**

   2: * Configure the function to handle the label insertion into

   3: * the text areas

   4: */

   5: $(function () {

   6:     Helper.processFormLabels("registrationForm");

   7: });

Include all relevant JavaScript files and viola! Off you go.