jQuery: form input values turns up undefined

Question

Having problem with this bit of code qith jQuery. it should pick the values from current form and then submit them, but when I try to get them with jQuery they always turn up undefined. I know the SQL results are fine since they show correctly in HTML table, so it must be my inferior javascript skills. New with jQuery and I'm at loss :(

PHP/HTML:

echo "<table>\n" 
while ($row = odbc_fetch_array($query))
    {
    echo    "<form class='catForm'>\n";
    echo    "<input type=hidden class='catID' name='catID' value='".$row['running_id']."'/>\n";
    echo    "<tr>\n";
    echo        "<td>".$row['running_id']."</td>\n";
    echo        "<td>".$row['site_id']."</td>\n";
    echo        "<td>".$row['main_category']."</td>\n";
    echo        "<td>".$row['map_name']."</td>\n";
    echo        "<td><input type=textfield class='bCatID' value='".$row['mapping_id']."' size=6/></td>\n";
    echo        "<td><input type=submit class='saveCat' value='Save'/></td>\n";
    echo        "<td><input type=submit class='killCat' value='Delete' /></td>\n";
    echo    "</tr>\n";
    echo  "</form>\n";  
    }
    echo "</table>";

jQuery:

$(".catForm").submit(function () { 
  var id = $(this).find('.catID').val();
  var bCatID = $(this).find('.bCatID').val();
  var dataString = 'id='+id+'&bCatID='+bCatID;

  $.ajax({
    type: "POST",
    url: 'adminUI/bin/updateSCategories.php',
    dataType : 'json',
    data: dataString,
    success: function(data)
    {
      if (data.error == true)
        $('.failure').html("Error, save failed.").show().fadeOut(2000);
      if (data.error == false)
        $('.success').html("Saved succesfully").show().fadeOut(2000);
    },
    error: function(XMLHttpRequest, textStatus, errorThrown)
    {
      $('.failure').html("Error, save failed.").show().fadeOut(2000);
    }
  });
  return false;
});

RESULT:
id: undefined
bCatID: undefined

Answer 1

Give this a try:

$(".catForm").submit(function () { 
 $.ajax({
   type: "POST",
   url: 'adminUI/bin/updateSCategories.php',
   dataType : 'json',
   data: $(this).serialize(),
   success: function(data)
   {
    if (data.error == true)
      $('.failure').html("Error, save failed.").show().fadeOut(2000);
    if (data.error == false)
      $('.success').html("Saved succesfully").show().fadeOut(2000);
   },
   error: function(XMLHttpRequest, textStatus, errorThrown)
   {
     $('.failure').html("Error, save failed.").show().fadeOut(2000);
   }
});
return false;
});

References: .serialize()

Answer 2

Jquery doesn't play well with forms inside tables: you should restructure your html/js.