John Davidson

php - My ajax code get only one value from a group of hidden inputs

0 comments
Message:


So basically I have this html document, generated dinamically by php code (foreach) that extracts rows of different comments (with different user id for each authors) and I stored cid (comment's id) and uid (user id of comment's author) in a group of hidden input:


hidusr = auth id


<?php foreach ($comments as $comment) : ?>



<a href="javascript:void(0);" class="banusr"
class="btn btn-info btn-link pull-right "> <i class="fa fa-ban"></i>
Ban</a>

<input type="hidden" class="hidden" id="hidusr" name="uid"
value="<?php echo trim(htmlspecialchars($comment['idauth'])) ?>" />
<p><?php echo htmlspecialchars($comment['text']); ?></p>
<?php endforeach; ?>

So the result in a web page it's like this:


<a href="utenti.php?id=2"> Author Name  </a>
<a href="javascript:void(0);" class="banusr" class="btn btn-info btn-link pull-right "> <i class="fa fa-ban"></i>
Ban</a>

<input type="hidden" class="hidden" id="hidusr" name="uid" value="2" />

<a href="utenti.php?id=9"> Other Author Name </a>
<a href="javascript:void(0);" class="banusr" class="btn btn-info btn-link pull-right "> <i class="fa fa-ban"></i>
Ban</a>

<input type="hidden" class="hidden" id="hidusr" name="uid" value="9" />

Now I have some javascript/jquery code that manage this, at the click of Ban button, ajax takes hidusr param (so the author of that comment) and send request to php page that bans that user, an extract:


$(document).ready(function() {
bans = $(".banusr");

for (var i = 0; i < bans.length; i++) {

ban = bans[i];

ban.onclick = function(e) {

uid = $("#hidusr").val();

$.ajax({
method: "POST",
url: "./ajax/ban.php?post",
data: {

usr_uid: uid
}
});

But I don't know why, if you start banning users from up to down in the comments serie, it's okay, code takes correct id.


So I ban first from up: Ajax response in Headers: usr_uid: 2
Then I goes down, click ban: Ajax response in Headers: usr_uid 9


But if I click from down, example: I press Ban for last comment ("Other Author Name", hidusr: 9) Ajax response in Headers: usr_uid 2


Anyone knows how to resolve this, thanks in advance



My Answer:
The issue is that you are using the same id for all the hidden inputs (hidusr). When you use $("#hidusr").val(), jQuery will always select the first element with that id on the page.

To fix this issue, you can modify your code to select the hidden input relative to the clicked Ban button. You can do this by using jQuery's closest() and find() functions. Here's how you can modify your code:

javascript
$(document).ready(function() {
$(".banusr").click(function(e) {
var uid = $(this).closest("div").find(".hidusr").val();

$.ajax({
method: "POST",
url: "./ajax/ban.php?post",
data: {
usr_uid: uid
},
success: function(response) {
// handle the response
}
});
});
});


In this code, we are using $(this) to refer to the clicked Ban button. We then use closest("div") to find the closest parent div element, which contains the hidden input for that specific comment. Finally, we use find(".hidusr") to find the hidden input within that div and get its value.

Make sure to update your HTML code to use class="hidusr" instead of id="hidusr" for the hidden inputs:

html



With this modification, your code should now correctly send the correct user id when banning a user, regardless of the order in which you click the Ban buttons.

Rate this post

5 of 5 based on 3598 votes

Comments




© 2024 Hayatsk.info - Personal Blogs Platform. All Rights Reserved.
Create blog  |  Privacy Policy  |  Terms & Conditions  |  Contact Us