I want to make a popup appear in php - php

Question

I am making a forum-like website in php and I added a button inside each question container to delete questions on the forum. I am looking for a way to make a popup appear when the user clicks the delete button. I am using bootstrap and I found a popup modal on the bootstrap website. With my current code, the popup appears when the button is clicked and it asks the user to confirm that he wants to delete his question. The problem is that I don't know how to get the ID of the question the users wants to delete so after I can delete it in my MySQL database.
This is my current button and it is inside a php echo '...'
<div class="col-1" title="delete your comment"><button name="delmsgbtn" class="btn-reseter" type="button" data-bs-toggle="modal" data-bs-target="#delmsg">delete</button></div>
And this is the popup modal from bootstrap that shows up when button is clicked
<div class="modal fade" id="delmsg" tabindex="-1" aria-labelledby="delmsgLabel" aria-hidden="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="delmsgLabel">Are you sure you want to delete this message?</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">cancel</button>
<button type="button" class="btn btn-danger">delete</button>
</div>
</div>
</div>
</div>
I had the idea to redirect the user to the same page but with the url containing the question id, so after I can have it using the get method. So I modified the button by adding a redirection.
New button also inside a php echo that is why the backslash
<div class="col-1" title="delete your comment"><button name="delmsgbtn" class="btn-reseter" onclick="location.href = \'course.php?courseid='.$_GET["courseid"].'&quesid='.$idQues.'\';" type="button" data-bs-toggle="modal" data-bs-target="#delmsg">delete</button></div>
But when doing this, the page refreshes and the popup disappears. Can you help me.

Answer 1

First, modify your modal open button. Should be something like this
<button class="btn-reseter delmsgbtn" data-comment_id="<?= PHP_COMMENT_ID ?>">delete</button>
Be sure to replace PHP_COMMENT_ID with an actual PHP variable that holds the comments ID.
Replace the "delete" button in the modal with a form.
<form method="POST" action="PHP_PROCESS_SCRIPT">
<input type="hidden" name="comment_id" id="comment_id_input"/>
<button type="submit" class="btn btn-danger">delete</button>
</form>
Make sure that PHP_PROCESS_SCRIPT points to the PHP script to process the comment deletion. Also, if applicable, make sure in this script that the user who is deleting the comment is actually allowed to.
Create a click handler to open the modal, instead of inline attributes.
<script>
$('.delmsgbtn').on('click', function() {
//update #comment_id_input in the popup form,
//based on data-comment_id added to the button from the first snippet
$('#comment_id_input').val($(this).data('comment_id'));
$('#delmsg').modal('show'); //open the modal
});
<script>
When the form is submitted, the PHP script you hooked up will get a value $_POST['comment_id'].
Alternatively, you could make an ajax call from a click handler attached to the delete button inside the modal. This is better if you want to prevent a page refresh. First, modify the delete button like this
<button id="delmsg_submit" type="button" class="btn btn-danger">delete</button>
Then, add some click handlers
<script>
var active_comment_id = null;
$('.delmsgbtn').on('click', function() {
//update active_comment_id,
//based on data-comment_id added to the button from the first snippet
active_comment_id = $(this).data('comment_id');
$('#delmsg').modal('show'); //open the modal
});
$('#delmsg_submit').on('click', function() {
if(active_comment_id) {
//send ajax call
}
});
<script>

Answer 2

I would put the id of the element with php
like
<button id="element-id-<?php echo $id ?>" class="myBtn" >
then i would use a javascript function to do execute the call on database
<script>
const btn = document.querySelector('.myBtn')
btn.addEventLIstener('click', () => {
const elementId = this.id //then remove the 'element-id-' from the value
const data = { id: elementId }
fetch( URLforBackend, {
method: 'post',
headers: {
'Content-Type': 'application/json'
}
body: JSON.stringify(data)
})
</script>
this will give to your backend the id.
in php, in there, just do the deletion