Submit a form from a Php while loop using JQuery/Ajax

Question

I have searched and searched and havent been able to fix my issue.. help ;)

I have a form I create in a while loop. I then use AJAX to process it.. Problem is it only will sumbit first form, even if I click the second form. Assume this is due to each form needing a unique ID. Im having a problem doing that... any help would be wonderful.

My Php for form

echo '<table width="100%" border="0" cellspacing="0" cellpadding="0" >';
echo ' <tr>';
echo ' <td style="color:#bbb">Team Name</td>';
echo '<td style="color:#bbb">Event Name</td>';
echo ' <td style="color:#bbb">Event Level</td>';
echo ' <td style="color:#bbb">Comments</td>';
echo '<td style="color:#bbb">&nbsp;</td>';
echo ' <td style="color:#bbb">&nbsp;</td>';
echo ' </tr>';

while ($row = mysql_fetch_array($pendingresult)) {
    $id = $row['reg_id'];
    print "<form id=\"$id\" name=\"CDs\" method=\"post\" action=\"$_SERVER[PHP_SELF]\">";
    echo '<tr class="commentContainer">';
    echo "<td><input type=\"text\" name=\"team_name\" value=\"$row[team_name]\"</td>";
    echo "<td><input type=\"text\" name=\"reg_id\" value=\"$row[reg_id]\"</td>";
    echo "<td><input type=\"text\" name=\"team_level\" value=\"$row[team_level]\"</td>";
    echo "<td><input type=\"text\" name=\"notes\" value=\"$row[comments]\"</td>";
    echo "<td>";
    echo "<td class=\"delete\" align=\"center\" id=" . $row['reg_id'] . " width=\"10\"><a href=\"#\" id=\"$row[reg_id]\"><img src=\"admin/images/delete.png\" border=\"0\" ></a></td>";
    echo "<td class=\"approve\" align=\"center\" id=" . $id . " width=\"10\"><a href=\"#\" id=\"$row[reg_id]\"><img src=\"admin/images/approve.png\" border=\"0\" ></a></td>";
    echo "</td>";
    echo "</tr>";
    echo "</form>";
}

My AJAX

$(document).ready(function () {});
$(function () {
  $(".approve").click(function () {
    var commentContainer = $(this).parent('tr:first');
    var id = $(this).attr("id");
    var string = 'id=' + id;
    var formData = this.form.id;
    $.ajax({
      type: "POST",
      url: "approve.php",
      data: $("formData").serialize(),
      cache: false,
      success: function () {
        commentContainer.slideUp('slow', function () {
          $(this).remove();
        });
      }
    });
    return false;
  });
});

Answer 1

In your ajax change

data: $("formData").serialize()

to

data: $("form#"+id).serialize()

it will catch the current form you are processing

Answer 2

You are using form fields in while loop so that means they are array of input fields with same name.

So you need to combine them into one variable and pass it accordingly.

Example

var team_name = $("input[name=team_name]").map(function(){
   return $(this).val();
}).get().join(",");

And So on for others fields.

Try it.