How can I get the data attribute from a php variable? - php

Question

I have a form that can delete records from a MySql database using ajax and jQuery. I'm trying to get the jQuery to only select the relevant record passed to it and not just delete the top row of records which it does at the moment. I think I need to get
<div class="'.$id.'">
from my form and make it a data attribute that can be selected. Hope I'm making myself clear. Many thanks.
<script type="text/javascript">
//Delete Review
$(document).ready(function(){
//Need to get $id here.
$(".deleteReview").click(function (e) {
e.preventDefault();
var username = $("#username").val();
var film_id = $("#film_id").val();
var id = $("#id").val();
$.post('ajax_deleteReview.php', {
username: username,
film_id: film_id,
id: id
}, function(data) {
$("#message").html(data);
$("#message").hide();
$("#message").fadeIn(500);
$("#message").fadeOut(2500);
});
return false;
});
});
</script>
<form>
<div class="'.$id.'">
<input type="hidden" id="username" name="username" value="'. $username.'">
<input type="hidden" id="film_id" name="film_id" value="'.$film_id .'">
<input type="hidden" id="id" name="id" value="'.$id .'">
<button type="submit" id="" class="btn btn-danger btn-xs pull-right">delete</button>
</form>
</div>

Answer 1

I would recommend you to use data-* prefixed attributes to persists your data.
HTML
<div data-id="'.$id.'" data-username="'. $username.'" data-filmid="'.$film_id .'" class="deleteReview">
<button type="submit" id="" class="btn btn-danger btn-xs pull-right">delete</button>
<div >
Then you can fetch it using .data(key)
Return the value at the named data store for the first element in the jQuery collection, as set by data(name, value) or by an HTML5 data-* attribute
Script
//Delete Review
$(document).ready(function(){
//Need to get $id here.
$(".deleteReview").click(function (e) {
e.preventDefault();
var username = $(this).data("username");
var film_id = $(this).data('filmid');
var id = $(this).data('id');
......
return false;
});
});

Answer 2

First in your PHP do something like this, you add the data attributes to your delete button since you are not actually submitting a real form. I also moved the deleteReview class to the button.
print '<button type="submit" class="deleteReview" data-id="'.$id.'" data-film-id="'.$film_id.'" data-username="'.htmlentities($username).'" class="btn btn-danger btn-xs pull-right">delete</button>';
Then, in your jQuery, update click event callback like so:
$(".deleteReview").click(function (e) {
e.preventDefault();
var username=$(this).data('username');
var film_id=$(this).data("film-id");
var id=$(this).data('id');
/* the rest of your code */
The data attributes become accessible easily with jQuery using $(this).data('some-attribute-name')