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;
  });
});

you are inserting your form tag in a table, directly on place of the TR, that's bad and I'm not sure about the behaviour of your form. You should emmbed a full table in each form instead. Secondly, you should check what contain your this.form.id. — MatRt
– MatRt, Commented Feb 12, 2013 at 3:25
You are using the same id for your FORM and for your TD, an id should be unique on the page. Moreover, I'm not sure the $("formData") will return something. You should debug your code with some console.debug — MatRt
– MatRt, Commented Feb 12, 2013 at 3:34

AbuHuraira Lakdawala · Accepted Answer · 2015-08-22 16:11:52Z

1

In your ajax change

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

to

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

it will catch the current form you are processing

edited Aug 22, 2015 at 16:11

answered Aug 22, 2015 at 16:04

AbuHuraira Lakdawala

7861 gold badge9 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dipesh Parmar · Accepted Answer · 2013-02-12 03:27:47Z

0

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.

answered Feb 12, 2013 at 3:27

Dipesh Parmar

27.3k8 gold badges65 silver badges92 bronze badges

4 Comments

MatRt Over a year ago

inputs with the same name is not a problem. And each form has an unique id which is enough to get the good one.

user2063334 Over a year ago

Problem is I dont know how to pass the ID to the AJAX ;(

Dipesh Parmar Over a year ago

you can define it as url: "approve.php?id="+ID

user2063334 Over a year ago

Im trying to pass the ID to the AJAX though not the approve.phpdata: $("formData").serialize(),

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related