How can I update a hidden form field on AJAX submit in Rails 3? - ruby-on-rails

Question

Questions on Rails 3.0.7, and JQuery 1.5.1
Overview
I'm trying to do the following thing. I have a web page with a form on one side that lets me create a category, and a list of items on the other side, with a checkbox for each item. I would like to be able to check the check box, for each item, so that when I submit the form to create the category, the newly created category also creates a has_many through association with each item.
So the association part works almost, I can submit a list of checked checkboxes, and Rails creates the association on the backend if I send the list of checked items.
Problem:
Here's what doesn't work:
I am trying to submit the form via Ajax, so I wanted to bind an event handle to the rails.js 'ajax:beforeSend' event, so that it would scan through my list of checked checkboxes and at the checked ids to a hidden form field.
The problem is: I try to get a list of all the checked boxes, and add them to the hidden field when the user clicks the Submit button. Therefore, I figured I'd place the code to do so in the ajax:beforeSend event handler. What I "THINK" I'm noticing however, is that rails.js has somehow already processed the form fields, and constructed the HTTP query before this handler fires. I notice this through the following behavior:
Observed Behavior
1) I can reload a fresh page, click the button to submit the form, the alert boxes from my handler pop up saying that no boxes are checked, and the created category in my db has no associated items (CORRECT BEHAVIOR)
2) I then click 1 checkbox, the alert boxes pop up showing which boxes are checked (CORRECT). But then when I submit thee form, the category in the DB still has no associate items. And I can see through firebug and the server logs that and HTTP query was sent containing the old parameter list, not the newer one. (WRONG)
3) I then submit the same form again, changing nothing, and it shows me the correct number of items.
So I get the impression that the parameter construction is lagging. I hope this wasn't too long, an someone can help me figure out what is going on.
My Question:
What event do I need to bind to, so that the form gets submitted with the correct parameters? Or is there another way to go about it completely?
Thanks
Here's my code below.
Thanks,
$('#my_form')
/* Now we need to configure the checkboxes to create an association between
* the items, and the interaction that is being created. First we will bind a
* function to the click event, and if the box is then checked, we will add
* the item id to the list of interaction items. If it is unchecked, we will
* remove the item from the list of interaction items.
*/
.live('ajax:beforeSend', function(event){
// First get a list of all the checked Items
var checked_items = new Array();
$('#items input[type="checkbox"]:checked').each(function(){
checked_items.push(this.getAttribute('data-item-id'));
});
// Then add this list of items to the new_interaction form to be submitted
$('#interaction_new_items').val(checked_items);
alert(checked_items);
alert($('#interaction_new_items').val());
})

Answer 1

Bind to the click event on the submit button itself. The click event will be processed before your ajax beforeSend event.
$('#my_form .submit').click(function() {
// rest of your code here
});

Answer 2

A more flexible solution (say, in case you wanted to submit the form with something other than a click) would be to bind to the form's submit event.
$('#my_form').submit(function() {
// Tweak your form data here
})