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. 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.
7878ed99-98a0-4950-af3a-6d102c7ef9c4|0|.0