I am using following code in php while loop :

<tr class="odd gradeX">
    <td><?php echo $blog_id; ?></td>
    <td><?php echo $blog_title; ?></td>
    <td><?php echo $cat_name; ?></td>
    <td class="center"><img width="50" src="<?php echo SITE_URL."assets/images/blog_images/$blog_image" ?>"/></td>
    <td class="center"><?php echo $uname; ?></td>
    <td class="center"><?php echo $added_date; ?></td>
    <td class="center"><?php echo $status; ?></td>
    <td class="center"><a data-toggle="modal" class="delete" data-id="<?php echo $blog_id; ?>" data-target="#myModal" href="<?php echo AD_SITE_URL."delete.php?name=blog&blog_id=$blog_id" ?>">Delete</td>
</tr>

When I click on delete link it's showing me a popup box with bellow code :

<form >
    <div class="modal-footer">
        <input type="submit" id="deletePost" class="btn btn-danger" name="submit" value="YES">
        <input type="submit" class="btn btn-success" name="submit" value="NO"  data-dismiss="modal">
    </div>
</form> 

Now when I press Yes button it's should show me the data-id value from the delete link, but every time it's showing me same data-id value. How can I get each delete link data-id value using jQuery ?

I am using following code :

<script>
$(document).ready(function() {
    $("#deletePost").click(function() {
        var id = $(".delete").attr("data-id");
        alert(id);
    });
});
</script>

I am using following code in php while loop :

<tr class="odd gradeX">
    <td><?php echo $blog_id; ?></td>
    <td><?php echo $blog_title; ?></td>
    <td><?php echo $cat_name; ?></td>
    <td class="center"><img width="50" src="<?php echo SITE_URL."assets/images/blog_images/$blog_image" ?>"/></td>
    <td class="center"><?php echo $uname; ?></td>
    <td class="center"><?php echo $added_date; ?></td>
    <td class="center"><?php echo $status; ?></td>
    <td class="center"><a data-toggle="modal" class="delete" data-id="<?php echo $blog_id; ?>" data-target="#myModal" href="<?php echo AD_SITE_URL."delete.php?name=blog&blog_id=$blog_id" ?>">Delete</td>
</tr>

When I click on delete link it's showing me a popup box with bellow code :

<form >
    <div class="modal-footer">
        <input type="submit" id="deletePost" class="btn btn-danger" name="submit" value="YES">
        <input type="submit" class="btn btn-success" name="submit" value="NO"  data-dismiss="modal">
    </div>
</form> 

Now when I press Yes button it's should show me the data-id value from the delete link, but every time it's showing me same data-id value. How can I get each delete link data-id value using jQuery ?

I am using following code :

<script>
$(document).ready(function() {
    $("#deletePost").click(function() {
        var id = $(".delete").attr("data-id");
        alert(id);
    });
});
</script>

• javascript
• jquery

• $(".delete") will select all elements having that class and .attr("data-id") will give the data-id attribute value of the first element from the set. When the Delete button is clicked, store the value in variable/on Yes button in DOM and use when Yes button is clicked. – Tushar Commented Oct 20, 2016 at 4:52
• $(".delete") selects all of the .delete elements in the entire document. You need to figure out how to keep track of the data-id for the <a> that was clicked (before you show the modal), and make use of that when #deletePost is clicked. – JLRishe Commented Oct 20, 2016 at 4:53
• @JaromandaX if i use this it's showing me undefined ! – shibbir ahmed Commented Oct 20, 2016 at 4:53
• @JaromandaX The deletePost input doesn't have a data-id attribute. – JLRishe Commented Oct 20, 2016 at 4:53
• @JLRishe can you show me how can i do this ? – shibbir ahmed Commented Oct 20, 2016 at 4:57

3 Answers 3

You just need to create a hidden field in your modal and populate its value each time when user click on delete link

Here is working demo

$(function() {
  $(".delete").click(function() {
    id = $(this).data('id');
    $("#myModal #post-id").val(id);
  });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn./bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn./bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<table class="table">
  <tr>
    <th>Id</th>
    <th>Title</th>
    <th>Category</th>
    <th>Desc</th>
    <th></th>
  </tr>
  <tr class="odd gradeX">
    <td>1</td>
    <td>title 1</td>
    <td>Category</td>
    <td class="center">data</td>
    <td class="center"><a data-toggle="modal" class="delete" data-id="1" data-target="#myModal" href="#">Delete</a>
    </td>
  </tr>
  <tr class="odd gradeX">
    <td>2</td>
    <td>title 2</td>
    <td>Category</td>
    <td class="center">data</td>
    <td class="center"><a data-toggle="modal" class="delete" data-id="2" data-target="#myModal" href="#">Delete</a>
    </td>
  </tr>
  <tr class="odd gradeX">
    <td>3</td>
    <td>title 3</td>
    <td>Category</td>
    <td class="center">data</td>
    <td class="center"><a data-toggle="modal" class="delete" data-id="3" data-target="#myModal" href="#">Delete</a>
    </td>
  </tr>
  <tr class="odd gradeX">
    <td>4</td>
    <td>title 4</td>
    <td>Category</td>
    <td class="center">data</td>
    <td class="center"><a data-toggle="modal" class="delete" data-id="4" data-target="#myModal" href="#">Delete</a>
    </td>
  </tr>
  <table>

    <div id="myModal" class="modal fade" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <form>
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
              </button>
              <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
              <p>Dou you want to delete</p>
              this is your hidden field for id
              <input type="text" name="id" id="post-id">
            </div>

            <div class="modal-footer">
              <input type="submit" id="deletePost" class="btn btn-danger" name="submit" value="YES">
              <input type="submit" class="btn btn-success" name="submit" value="NO" data-dismiss="modal">
            </div>
          </form>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->

I hope it will help

var id;
$("#tableid tbody").on('click','.delete', function(e){
    // show your modal
    id = $(this).attr("data-id");
});

Every time when you click on delete button of this row then set an additional data-id attribute to submit button

$('.delete').on('click',function(){
    $('[name=submit]').attr('data-id',$(this).data('id'));
}) 

& on close the data model you can remove that attribute, (you can repeat removing attribute function when you click submit in ajax success )

$('.close').on('click', function(){
   $('[name=submit]').removeAttr('data-id'))
})