How to pass a mysql database data to a javascript function using php?

Question

I'm creating a web where people can add fanbase on it and delete it by clicking an X button. Here's what I want: when a user click on the X button, a modal will pop-up saying "are you sure", and when he presses delete button on the modal, the data will be deleted from database (I'm using mysql database).

When the user clicks the X button, I hope the modal showed up with the specific name of the fanbase that the user want to delete. But I don't know how to pass the fanbase's id (from my database) to a function i made and use it. Here what it looks like:

the modal from "welcome.php"

    <div class="modal fade" id="delmdl">
            <div class="modal-dialog">
            <div class="modal-content">
            
                <!-- Modal Header -->
                <div class="modal-header">
                <h4 class="modal-title">Delete Fanbase</h4>
                <button type="button" class="close" data-dismiss="modal">×</button>
                </div>
                
                <!-- Modal body -->
            <form id="" method="post" action="deletefanbase.php">
                <div class="modal-body">
                <h5>Are you sure you want to delete this fanbase?
                    <span><!-- this is where the fanbase's name should be --></span>
                </h5>
                </div>               
                <!-- Modal footer -->
                <div class="modal-footer">
                <button name="addfbmdl" type="submit" class="btn btn-danger" >Delete</button>
                </div>  
            </form>             
            </div>
            </div>
        </div>

the code for iteratively add divs of fanbases from "showfanbase.php"

<?php
  require "session.php";
  require "connect.php";
  if(!isset($_SESSION["loggedin"])||$_SESSION["loggedin"]!==true){
     header("location: login.php");
     exit;
  }
  
  $sql="SELECT fanroom.id AS fr_id, fanroom.uid AS uid, fanroom.aid AS aid, fanroom.name AS fr_name, 
  fanroom.description AS fr_desc,
  artists.id, artists.name AS a_name, users.username,users.id AS user_id
  FROM fanroom INNER JOIN artists ON fanroom.aid=artists.id INNER JOIN users ON fanroom.uid=users.id 
  ORDER BY fanroom.created_at DESC";

   $result=$link->query($sql);
   if($result){
   $output="<div class='container' style='margin:15px;'>";
     if($result->num_rows>0){
        while($row = $result->fetch_assoc()){
           if($row['user_id']==$_SESSION['id']){
               $username="You";
               $output.="<div class='row'>
                <div class='col border' style='margin:10px;border-radius:10px;padding:15px;'>
                <h3>".$row['fr_name']."</h3>
                <p style='color:grey;'>Made by <b>".$username."</b></p>
                <h5 style='color:grey;'>A <b>".$row['a_name']."'s</b> Fanbase</h5>
                <p>".$row['fr_desc']."</p> 
                <button id='delete' type='button' class='btn btn-danger' 
                   onclick='deletefunction(".$row['fr_id'].")' >x</button> #this is the X button
                </div>
                </div>";
            }
            else{
                 $username=$row['username'];
                 $output.="<div class='row'>
                <div class='col border' style='margin:10px;border-radius:10px;padding:15px;'>
                <h3>".$row['fr_name']."</h3>
                <p style='color:grey;'>Made by <b>".$username."</b></p>
                <h5 style='color:grey;'>A <b>".$row['a_name']."'s</b> Fanbase</h5>
                <p>".$row['fr_desc']."</p>
                </div>
                </div>";
             }   
          }
$output.="</div>";
echo $output;
   }
}?>

and onclick of that button, a function (deletefunction()) on the "Welcome.php" will be executed. inside it i pass the fanbase's id that is about to be deleted. This function suppose to be only showing the modal, but i want to make this function can hold the fanbase's id that is about to be deleted.

<script>
function deletefunction(del_id){
    $('#delmdl').modal();} 
</script>

what do I had to add to my code so I can show the fanbase's name on the modal and so I can pass that fanbase's id to deletefanbase.php(this is for deleting the data at mysql database)?

Answer 1

you should take a hidden field to the form the post that value to the deletefanbase.php

take a hidden field in welcome.php in eg

<input type='hidden' name='delbyid' id='delbyid value="">

when function goes execute set delete id to the hidden field befor you submit the form

$('#delbyid').val(del_id);

it will post the value of that field with $_POST['delbyid'] on deletefanbase.php here you can execute the query to delete particular record with that id

//you need to make connection for database or include database connection file before run query
    $delid=$_POST['delbyid'];
    $sql="DELETE FROM table_name WHERE id = $delid ";
    $result=$link->query($sql);
    if($result){
    echo "delete successfully";
    }

Answer 2

THANKS FOR THE REPLY, IT WORKS. and I added an ajax on welcome.php to get the fanbase name on the modal. I figured out you can't pass javascript variable directly to php variable.

so, it's like this:

the modal from "welcome.php"

    <div class="modal fade" id="delmdl">
            <div class="modal-dialog">
            <div class="modal-content">
            
                <!-- Modal Header -->
                <div class="modal-header">
                <h4 class="modal-title">Delete Fanbase</h4>
                <button type="button" class="close" data-dismiss="modal">×</button>
                </div>
                
                <!-- Modal body -->
            <form id="" method="post" action="deletefanbase.php">
                <div class="modal-body">
                <h5>Are you sure you want to delete this fanbase?</h5>
                
                <p>Fanbase name: <span id="fbname"></span></p>
                <input type='hidden' name='delbyid' id='delbyid' value="">
                </div>               
                <!-- Modal footer -->
                <div class="modal-footer">
                <button name="addfbmdl" type="submit" class="btn btn-danger" >Delete</button>
                </div>  
            </form>             
            </div>
            </div>
        </div>

the function on the welcome.php

function deletefunction(del_id){
    $('#delmdl').modal(); 
    $('#delbyid').val(del_id);
    $.ajax({
        url:"getfbname.php",
        type:"POST",
        data:({fb_id:del_id}),
        success:function(response){
            $('#fbname').html(response);
        }
    });
}

the getfbname.php, this is the php to get the fanbase name to show up on the modal

<?php
require "session.php";
require "connect.php";
if(!isset($_SESSION["loggedin"])||$_SESSION["loggedin"]!==true){
    header("location: login.php");
    exit;
}
$id=$_POST['fb_id'];
$sql="SELECT name FROM fanroom WHERE id=$id";
$result=$link->query($sql);
if($row=$result->fetch_assoc()){
    echo $row['name'];
}?>

thankyou again for the answer, helped me alot!