Prototype Form Submit Validation Error

Question

I have a form with id 'new_profile_choices', and I am using Prototype to validate the form. When I tried to validate the form submit event, it does not seem to handle the event. Could you please help me to debug it. Thanks

View Source of the Form

<form action="/polls/vote" class="new_profile_choices" id="new_profile_choices" method="post">
        <input id="profile_choices_profile_id" name="profile_choices[profile_id]" type="hidden" value="2" />
        <input id="profile_choices_poll_id" name="profile_choices[poll_id]" type="hidden" value="50" />
        <div id="poll_error_messages">
            <p>Please select a valid vote</p>
        </div>
        <p>
            <p class="choice">
            <input id="profile_choices_choice_id_80" name="profile_choices[choice_id]" type="radio" value="80" />Yes
            </p>
            <p class="choice">
            <input id="profile_choices_choice_id_81" name="profile_choices[choice_id]" type="radio" value="81" />No
            </p>
            <p class="choice">
            <input id="profile_choices_choice_id_82" name="profile_choices[choice_id]" type="radio" value="82" />Can't Say
            </p>
            </p>
            <input class="r4corners" id="profile_choices_submit" name="commit" type="submit" value="   Vote   " />
</form>

Prototype Event Handler

$('new_profile_choices').observe("submit", function(event){
 alert("form submission");
}

Answer 1

In your post is a typographic mistake: at the end of script block should be a closing parenthesis (critical) and a semicolon (not so important, but should be there). Moreover, everything should be executed after the DOM is loaded (onload, ondomready):

document.observe('dom:loaded', function () {
    $('new_profile_choices').observe('submit', function (event) {
        alert('form submission');
    });
});

(test it here: http://jsfiddle.net/YuTH5/1/ )