Observing change in radio button selection using Prototype JS

Question

I'm relatively new to Prototype JS (v1.7), and I'm stuck on something. I'm trying to detect when a change in the radio button selection occurs. Here's the code:

Radio buttons:

<input class="amounts" type="radio" name="amount" id="amount-1" value="1" />
<input class="amounts" type="radio" name="amount" id="amount-2" value="2" />
<input class="amounts" type="radio" name="amount" id="amount-3" value="3" />

Javascript: Here's a stab I took at it, which doesn't work:

Event.observe($$('amounts'), 'change', function(event) {
    alert('change detected');
});

When the form loads, no radio buttons are checked. I'd like the Javascript to detect these events:

1. A radio button is selected when none was previously selected
2. The radio button selection changes

Any help would be greatly appreciated.

Answer 1

It doesn't work because $$ returns an array of elements and Event needs a single element. Also $$('amounts') doesn't match any elements, there are no <amounts> tags.

A better way is to use a single ancestor element which is easy to identify.

<form id="amounts-form">
    <input class="amounts" type="radio" name="amount" id="amount-1" value="1" />
    <input class="amounts" type="radio" name="amount" id="amount-2" value="2" />
    <input class="amounts" type="radio" name="amount" id="amount-3" value="3" />
</form>

Now there is a unique ID to work with we can use Event.on

$('amounts-form').on('change', '.amounts', function(event) {
    alert('change detected');
});

Notice the events are being filtered by '.amounts', the period says to use the class name.
If you're using FireBug for FireFox or Chrome's developer tools then you can test parts of your script directly in the console. It really helps to find if a selector is matching the elements you think it is by typing $$('.amounts')