• Choose a category
• All
• Classic-Fiction

chapter_07/07_form_hints/script.js (excerpt)

$('input.clear').each(function() {

$(this)

.data('default', $(this).val())

.addClass('inactive')

.focus(function() {

$(this).removeClass('inactive');

if ($(this).val() == $(this).data('default') || '') {

$(this).val('');

}

})

.blur(function() {

var default_val = $(this).data('default');

if ($(this).val() == '') {

$(this).addClass('inactive');

$(this).val($(this).data('default'));

}

});

});

We need to go through each element and save the default value when the document loads. Then we keep track of the focus and blur events that will fire whenever the user moves into or out of our inputs. On focus, we test if the value of the text box is the same as our default text; if it is, we clear the box in preparation for the user’s input.

On the way out, we check to see if the text box is empty, and if it is we put the original value back in. We add and remove a class as we go; this allows us to style the form fields differently when they’re displaying the hint. In our example, we’ve simply made the text color a little lighter.

Check All Checkboxes

With text inputs firmly under our control, it’s time to move on to other form controls. We’ll start off with a bugbear of StarTrackr’s users: there’s too much checkbox ticking required when filling in the various celebrity information forms. This is resulting in skewed data, bored users, and inaccurate reports on celebrities. Our client has asked that each category of statistic have a “check all” box, so that the user can toggle all of the checkboxes off or on at once.

Knowing the jQuery form filters makes this task a walk in the park. We just have to select all checkboxes in the same group, and check or clear them. The way we group checkboxes together in HTML forms is by giving all of the related items the same name:

chapter_07/08_check_all/index.html (excerpt)

We’ve given the last checkbox the special class of check-all. This box will act as our master checkbox: when it is checked or unchecked, our code springs to life. First, we construct a selector string that will select all of the checkboxes with the same name as the master checkbox. This requires gluing a few strings together, to end up creating a selector that looks like :checkbox[name=reason].

We then set all of the related checkboxes to have the same checked value as our master checkbox. Because our code is running after the user has changed the value, the checked property will reflect the new state of the checkbox—causing all of the related items to be either selected or deselected accordingly:

chapter_07/08_check_all/script.js (excerpt)

$('.check-all:checkbox').change(function() {

var group = ':checkbox[name=' + $(this).attr('name') + ']';

$(group).attr('checked', $(this).attr('checked'));

});

Tip: Performance Issues

If your page is large, trawling through every DOM node looking for checkboxes can be slow. If you’re noticing pages becoming unresponsive, you might want to investigate the context parameter of the jQuery selector, which limits where jQuery will hunt for your selections. We’ll cover the context parameter in Chapter 8.

Inline Editing

Inline editing (aka edit in place) was one of the first effects that truly showed Ajax’s power to create naturally helpful controls. The first time you used an inline edit box you were amazed; every time after that it was unnoticeable