jQuery: action as form is being submitted?

Question

Here's my problem: I have a selectable grid of div's that are tied to unique category IDs

I could probably re-write the grid to use hidden inputs as they are being selected, but it's a little late for that.

As the form is submitted (standard form.. no ajax), I want to gather the selected IDs into a variable.. this code below works when I test with a standard button and alert box:

parentUID = "";
$('.cat_grid').each(function() {
  cat_parent = $(this).parent();
  if (cat_parent.attr('class')=="on") {
    parentUID += $(this).attr('id')+";";
  }
});

but how can I make this fire as the submit button is being clicked? I assume inserting parentUID into a hidden form input and using some sort of delay function??

Thanks for any answers!

Answer 1

How about:

 $(form).submit( function() {
   var parentUID = "";
   $('.cat_grid').each(function() {
    cat_parent = $(this).parent();
    if (cat_parent.attr('class')=="on") {
     parentUID += $(this).attr('id')+";";
    }
  });
  $(hiddenInput).val( parentUID );
  //don't return false because we wan't the form to be submitted
 });

Answer 2

You can use onSubmit on the form and call function GetParentUIDs() with the code you have, plus storing IDs in the hidden field. Your GetParentUIDs must return true for the form to submit.

Example

<form name="yourform" action="youraction" method="post" onsubmit="return GetParentUIDs();">