CODEWITHSUNDEEP
phpjquery
morten
morten

Reputation: 53

How to get id from php loop in jquery

Hi I'm trying to get the id for each row shown in while loop in my jquery function

Here are the request and view (PHP code)

<div class="container">
  <table class="table table-striped">
    <div class="table responsive">
      <thead class="black white-text">
        <tr>
          <th>#</th>
          <th>Nom et Prénoms</th>
          <th>Fonction</th>
          <th>Université</th>
          <th>Email</th>
          <th>Contact</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>

        <?php 

          $result = $connection->query($stmt) ;

          if($result->rowCount() > 0)
          {
            while($row = $result->fetch(PDO::FETCH_BOTH))
            {

            echo '<tr>
                <td scope="row">'.$row["id"].'</td>
                <td>'.$row["nom"].'</td>
                <td> '.$row["fonction"].'</td>
                <td> '.$row["nomU"].'</td>
                <td> '.$row["email"].'</td>
                <td> '.$row["Contact"].'</td>
                <td>' ?>
<button type="button" class="btn btn-success valider">Valider</button> /<button type="button" class="btn btn-danger rejeter">Rejeter</button>
<?php 
                  echo '</td>
                  <td>'
                ?>
<input type="hidden" class="the_id" value='<?php echo $row[' id ']; ?>'>

<?php echo '</td>
             </tr>';

            }
          }
          else
          {
            echo "0 results";
          }
        ?>

      </tbody>
    </div>
  </table>

</div>

And I want to show the id of each row when I click on the button "valider" for the line with jquery but it's showing the first id for all the row.

Here is th jquery code

$(document).ready(function(){

    $('.valider').click(function(e){

      alert($('.the_id').val());
    });


  });

Upvotes: 1

Views: 1353

Answers (3)

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

You need to go up to the parent tr to get the related input so you could use closest() with the $(this) :

$('.valider').click(function(e){
   alert( $(this).closest('tr').find('.the_id').val() );
});

Upvotes: 1

delboy1978uk
delboy1978uk

Reputation: 12375

Almost right. Remember that when accessing by a class name rather than an ID, you will get all of those objects.

So, we need to be more specific. Give this a try:

$('.valider').click(function(e){
   var id = $(this).parent().parent().find('td').find('.the_id').val();
   alert(id);
});

This takes you from $(this), your button, to its parent <td>, then the parent <tr>, then looks for any classes of .the_id inside the tr, in other words, the specific one you want.

Upvotes: 4

Johan
Johan

Reputation: 3611

I usually add a custom attribute to the elements, like data-custom-id.

'<button type="button" class="btn btn-success valider" data-custom-id="'.$row["id"].'">Valider</button>'

And then in the calling function I can access the object with this

$('.valider').click(function(e){
    alert($(this).attr('data-custom-id'));
});

Upvotes: 1

Related Questions