delete record in dynamic table with php ajax

Question

I have the following dynamic table and I want to delete the records via AJAX/PHP but I am not able.

I tried this way, passing the line id as the button id but it didn’t work...

include("dbconn.php");
<script src="jquery.min.224.js"></script>    
<?php $qry = pg_query($dbconn,"select id, nome, cidade from tabela"); ?>
<div id="tabela">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tbody>
  <?php while($qryRow = pg_fetch_assoc($qry)){ ?> 
  <form id="form" method="post">
  <script>
  $("#<?php echo $qryRow['id'];?>").click(function(e){
      e.preventDefault();
      $.ajax({
          type: "POST",
          url: "apagar.php",
          data: { botao: $(this).val() },
          beforeSend: function() { $("#loaderdiv").show(); },
          success: function(data) { $("#loaderdiv").hide(); }
      })
      .done(function(data){
          $("#apagar_msg").html(data);
          //$("#form")[0].form.reset();
      });    
  });
  </script>   
    <tr>      
      <td><?php echo $qryRow['id'];?></td>
      <td><?php echo $qryRow['nome'];?></td>
      <td><?php echo $qryRow['cidade'];?></td>
      <td><button type="button" name="apagar" id="<?php echo $qryRow['id'];?>" value="<?php echo $qryRow['id'];?>">Apagar</button></td>
    </tr>
  </form>
  <?php } ?>
  </tbody>
</table>
</div>
<div id="apagar_msg"></div>

On the delete page you receive the line value and process:

<?php
include("dbconn.php");

if(isset($_POST['apagar'])){
   $qry = pg_query($dbconn,"delete from tabela where id = ".$_POST['apagar']."");

   if(pg_affected_rows($qry)>0){
       echo 'Registro apagado';
   }else{
       echo 'Registro não apagado!';
   }
}
?>

Answer 1

Solved by checking the answer here and adapting to my code.

include("dbconn.php");
<script src="jquery.min.224.js"></script>    
<?php $qry = pg_query($dbconn,"select id, nome, cidade from tabela"); ?>
<div id="tabela">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tbody>
  <?php while($qryRow = pg_fetch_assoc($qry)){ ?> 
  <form id="form" method="post">
  <script>
  function apagar(e){
        var apagar = $(e).attr('id');
        $.ajax({
            type: 'post',
            url: 'apagar.php',
            data: {apagar: apagar},
            beforeSend: function() { $("#loaderdiv").show(); },
            success: function(data) { $("#loaderdiv").hide(); }
        })
        .done(function(data){
            $("#apagar_msg").html(data);
            //$("#form")[0].form.reset();
        });
    }
  </script>   
    <tr>      
      <td><?php echo $qryRow['id'];?></td>
      <td><?php echo $qryRow['nome'];?></td>
      <td><?php echo $qryRow['cidade'];?></td>
      <td><button type="button" name="apagar" id="<?php echo $qryRow['id'];?>"  onclick="apagar(this)">Apagar</button></td>
    </tr>
  </form>
  <?php } ?>
  </tbody>
</table>
</div>
<div id="apagar_msg"></div>

and the delete page:

<?php
include("dbconn.php");

if(isset($_POST['apagar'])){
   $qry = pg_query($dbconn,"delete from tabela where id = ".$_POST['apagar']."");

   if(pg_affected_rows($qry)>0){
       echo 'Registro apagado';
   }else{
       echo 'Registro não apagado!';
   }
}
?>