Javascript 获取单选按钮值中的动态数据并更新MySQL数据库

我有一个仪表板，我有一个页面，我在一个页面中设置了三个带有点击事件的导航选项卡，我可以在一个页面中通过选项卡链接进行导航

在“导航”选项卡中，我有“用户”选项卡，可以在其中访问所有用户数据。在用户区，我有“更改角色”按钮，当我单击按钮时，弹出窗口将出现，并有两个按钮（是或否）的单选按钮。 我唯一想实现的是将用户id传递给弹出框，将动态值从弹出框中的数据库获取到单选按钮（“已实现，但它不显示值，只显示单选按钮”），并在不刷新页面的情况下更改用户角色，并停留在当前选项卡上

这是我的密码：

<tbody>
    <?php
        $query = mysqli_query($conn,"select * from tbl_users, tbl_user_roles WHERE tbl_users.user_role_id = tbl_user_roles.user_role_id");
        $i = 1;
        while($fetch = mysqli_fetch_array($query))
    {?>
    <tr>
    <td><?php echo $i++?></td>
    <td><?php echo $fetch['Username']?></td>
    <td><?php echo $fetch['email']?></td>
    <td><?php echo $fetch['role']?></td>
    <td><a href="#" onclick="show_dialog()" id="btn-show-dialog">Change Role</a></td>
    </tr>
    <?php } ?>
</tbody>

弹出框

<div class="overlay-roles" id="dialog-container">
    <form method="POST">
        <div class="popup-roles">
        <?php 
            $roles_query = mysqli_query($conn,"select * from tbl_user_roles");
            while ($roles = mysqli_fetch_array($roles_query)){
                $user_role = $roles['user_role'];
                echo "<tr><td><input type='radio' name='radio' value='<?php echo $user_role>'  /></td></tr>";
            }
        ?>
            <div class="text-right">
                <button  class="conf-dialog-btn-no" id="ignore">Cancel</button>
                <button name="delete-user" class="conf-dialog-btn-yes" id="confirm">Apply</button>
            </div>
        </div>
    </form>
</div>

在javascript中，在定义函数之前，将各种函数指定为
事件处理程序。在其中一个函数（
confirm（）
）中，您有一个错误的前导斜杠
/
，
confirm
是一个标准的js函数如果您需要获取
用户id
，并将其传递给PHP进行进一步处理，为什么您没有在HTML输出中的任何地方使用用户id？您可以轻松地将其作为参数分配给
show_dialog
，或者使用同级选择器从同一行中访问它（如果它存在的话）。我将$i auto increment替换为$fetch User\u id现在做什么？？？在定义函数之前，在javascript中将各种函数分配为
事件处理程序。在其中一个函数（
confirm（）
）中，您有一个错误的前导斜杠
/
，
confirm
是一个标准的js函数如果您需要获取
用户id
，并将其传递给PHP进行进一步处理，为什么您没有在HTML输出中的任何地方使用用户id？您可以轻松地将其作为参数分配给
show_dialog
，或者使用同级选择器从同一行中访问它（如果有），或者使用$fetch User\u id替换$i auto increment现在该怎么办？？？
<script type="text/javascript">
    document.getElementById("btn-show-dialog").onclick = function(){show_dialog()};
    
    var overlayme = document.getElementById("dialog-container");
    function show_dialog() {
        overlayme.style.display = "block";
    }
    
    document.getElementById("confirm").onclick = function(){confirm()};
    function confirm() {/   
        overlayme.style.display = "none";
    }
    
    document.getElementById("cancel").onclick = function(){cancel()};
    function cancel() {
        overlayme.style.display = "none";
    }
</script>