How can I get the data from MySQL database based on the selected ID using bootstrap and Ajax?

Question

I have two php pages, the first php page contains the table which has the selection to which record will be edited using a Bootstrap Modal, the second php page process the data to update in MySQL database.

Here is the first php page (edit_account.php)

<?php
$cn = mysqli_connect("localhost","root","","testdb");
$sql = "SELECT * FROM tblinfo";
$qry = mysqli_query($cn,$sql);
$nrows = mysqli_num_rows($qry);
if ($nrows > 0) {
    while ($rows = mysqli_fetch_array($qry)) {
        $id = $rows['userid'];
        $fn = $rows['fullname'];
?>
        <tr>
            <td><?php echo $id; ?></td>
            <td><?php echo $fn; ?></td>
            <td><a href = "#edit<?php echo $id; ?>" data-toggle = "modal" class = "btn btn-success btn-sm">Edit</a></td>
        </tr>

        <div class = "modal" id = "edit<?php echo $id; ?>">
            <div class = "modal-dialog">
                <div class = "modal-content">
                    <div class = "modal-header">
                        <h5 class = "modal-title">Edit Information</h5>
                        <button class = "close" data-dismiss = "modal">&times;</button>
                    </div>
                    <div class = "modal-body">
                        <input type = "text" id = "user_id" value = "<?php echo $id; ?>" class = "form-control" />
                        <input type = "text" id = "full_name" value = "<?php echo $fn; ?>" class = "form-control" />
                    </div>
                    <div class = "modal-footer">
                        <button class = "btn btn-primary btn-sm" id = "update<?php echo $id; ?>">Update</button>
                        <button class = "btn btn-danger btn-sm" data-dismiss = "modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

        <script>
            $("#update<?php echo $id; ?>").click(function() {
                var id = $("#user_id").val();
                var fn = $("#full_name").val();
                if (confirm("Are you sure you want update this record?")) {
                    $.ajax({
                        url: "edit_account_process.php",
                        type: "POST",
                        data: {
                            userid: id,
                            fullname: fn
                        },
                        success: function(data) {
                            $("#showData").html(data);
                        }
                    });
                }
            });
        </script>                       
 <?php      

    }
}
 ?>

Second php page (edit_account_process.php): (This page will be use for updating records)

<?php
$cn = mysqli_connect("localhost","root","","testdb");
$id = $_POST['userid'];
$fn = $_POST['fullname'];

//for Testing
echo $id . " " . $fn;

$sql = "UPDATE tblinfo SET fullname = '$fn' WHERE userid = '$id' ";
$result = mysqli_query($cn,$sql);

if ($result) {
    echo "<script>alert('Successfully updated!');</script>";
}
else {
    echo "<script>alert('Unable to update the record!');</script>";
}
?>

What's happening to my code now is that it always select the first record in my database even I tried to select other records. Here's the

How can I target the specific ID which will be updated?

Thank you in advance

Answer 1

You do not need to define multiple modals, use multiple scripts - as you are now doing (inside the loop, you create a new modal, and a new script).

Instead, add one modal that you dynamically assign values to, and use one script that listens for clicks on the button. That click fetches the values you need from data-* attributes and puts them into the value of the input fields in your modal.

<?php
$cn = mysqli_connect("localhost","root","","testdb");
$sql = "SELECT * FROM tblinfo";
$qry = mysqli_query($cn,$sql);
$nrows = mysqli_num_rows($qry);
if ($nrows > 0) {
    while ($rows = mysqli_fetch_array($qry)) {
        $id = $rows['userid'];
        $fn = $rows['fullname'];
        ?>
        <tr>
            <td><?php echo $id; ?></td>
            <td><?php echo $fn; ?></td>
            <td><a href="#" class="btn btn-success btn-sm toggleEditModal" data-uid="<?php echo $id; ?>" data-fullname="<?php echo $fn; ?>">Edit</a></td>
        </tr>                  
        <?php      
    }
}
?>

<script>
    $(".toggleEditModal").on("click", function(e) {
        e.preventDefault();
        $('#user_id').val($(this).data('uid'));
        $('#full_name').val($(this).data('fullname'));
        $("#editModal").modal('show');
    });

    $("#updateUser").click(function() {
        var id = $("#user_id").val();
        var fn = $("#full_name").val();
        if (confirm("Are you sure you want update this record?")) {
            $.ajax({
                url: "edit_account_process.php",
                type: "POST",
                data: {
                    userid: id,
                    fullname: fn
                },
                success: function(data) {
                    $("#showData").html(data);
                    $("#editModal").modal('hide');
                }
            });
        }
    });
</script>     

<div class = "modal" id = "editModal">
    <div class = "modal-dialog">
        <div class = "modal-content">
            <div class = "modal-header">
                <h5 class = "modal-title">Edit Information</h5>
                <button class = "close" data-dismiss = "modal">&times;</button>
            </div>
            <div class = "modal-body">
                <input type = "text" id = "user_id" value = "" class = "form-control" />
                <input type = "text" id = "full_name" value = "" class = "form-control" />
            </div>
            <div class = "modal-footer">
                <button class = "btn btn-primary btn-sm" id = "updateUser">Update</button>
                <button class = "btn btn-danger btn-sm" data-dismiss = "modal">Close</button>
            </div>
        </div>
    </div>
</div>