个人中心
gpt4 book ai didi

javascript - 仅为管理员用户启用单选按钮

转载 作者：太空宇宙 更新时间：2023-11-04 15:42:25 26 4
gpt4 key购买 nike

在我正在开发的应用程序中，我有一个管理面板，其中有一个创建、编辑和删除用户的功能。

在表单中，我使用 while 循环创建 3 个用户类型，该循环从数据库中拖动数据，这 3 个用户类型是:

  • 管理员
  • 经理
  • 用户

HTML 表单:

<?php
/**
 * Created by PhpStorm.
 * User: SiNUX
 * Date: 4/6/2017
 * Time: 3:41 PM
 */

session_start();
include_once("../iConnect/handShake.php");

$getUserRole = "SELECT * FROM userroles ORDER BY urId ASC";
$getUserRoleQuery = $dbConnect -> query($getUserRole);
?>

<html>
<head>
    <title>Timer User Creation</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Style Sheets -->
    <link rel="stylesheet" type="text/css" href="../../CSS/main.css">

    <!-- Java Scripts -->
    <script language="JavaScript" type="text/javascript" src="../../jScripts/jquery-3.2.0.min.js"></script>
    <script language="javascript" type="text/javascript" src="../../jScripts/svrTimeDate.js"></script>
    <script language="JavaScript" type="text/javascript" src="../../jScripts/reload.js"></script>
    <script language="JavaScript" type="text/javascript" src="../../jScripts/setMsg.js"></script>
    <script language="JavaScript" type="text/javascript" src="../../jScripts/userCreatFunctions.js"></script>
    <script language="JavaScript" type="text/javascript" src="../../jScripts/multiScript.js"></script>
    <script language="JavaScript" type="text/javascript" src="../../jScripts/getIds.js"></script>

</head>
<body onload="pauseLoad4()">
    <div id="divCenter" class="box">
        <label id="userName">Hello <?php echo $_SESSION["fName"]." ".$_SESSION["lName"]; ?></label><br><br>
        <label id="uId" hidden>1</label>
        <div style="width: 166px; position: absolute; left: 642px; top: 20px; height: 44px;">
            <img src="../../images/logo.png" width="142" height="33">
        </div>
        <label for="date">Date:</label>
        <label id="date" style="margin-left: 50px;"></label><br><br>
        <label for="fName">First Name:</label>
        <input type="text" id="fName" name="fName" style="margin-left: 10px;" onkeyup="checkEmpty();">
        <label for="lName" style="margin-left: 8px;">Last Name:</label>
        <input type="text" id="lName" name="lName" style="margin-left: 10px;" onkeyup="checkEmpty();" disabled>
        <label for="uName" style="margin-left: 8px;">User Name:</label>
        <input type="text" id="uName" name="uName" style="margin-left: 7px;" onkeyup="checkEmpty();" disabled><br><br>
        <label for="pWord1" style="margin-left: 8px;" >Password:</label>
        <input type="password" id="pWord1" name="pWord1" style="margin-left: 17px;" onkeyup="checkLength();" disabled>
        <label for="pWord2" style="margin-left: 8px;">Confirm Password:</label>
        <input type="password" id="pWord2" name="pWord2" style="margin-left: 8px;" onkeyup="checkPass();" disabled>
        <label for="uTeam" style="margin-left: 8px;">Team</label>
        <select name="uTeam" id="uTeam" style="width: 170px;" onchange="teamId(this.id);enableRoles();" disabled>
            <option></option>
        </select>
        <input type="text" name="uTeamId" id="uTeamId" hidden><br><br>
        <div id="userRoles">
            <label for="userRoles">User Role:</label><label for="uAttrib" style="margin-left: 250px;">User Attributes:</label><br>
            <?php while ($row = $getUserRoleQuery -> fetch(PDO::FETCH_ASSOC)) { ?>
                <input type="radio" class="userRoles" name="userRoles" value="<?php echo $row["urId"]; ?>"
                <?php if ($_SESSION["uRole"] != "1" && $row["userRole"] == "Admin" ){?> disabled <?php } ?>><?php echo $row["userRole"]; }?>
                <input type="checkbox" id="tl" name="tl" value="yes" style="margin-left: 120px;" disabled>Team Leader
        </div>
        <label id="msgID" hidden></label>
        <div id="msg"></div>
        <div id="sbmBtns">
            <input type="button" value="Reset" name="reset" id="reset" class="btn" onclick="resetForm()">
            <input type="button" value="Submit" name="submit" id="submit" class="btn" onclick="pauseLoad3();" disabled>
        </div>
    </div>
</body>
</html>

我使用 JavaScript 来验证表单，并在满足验证条件时启用下一个文本框。

JavaScript:

function checkEmpty() {
    var msg = document.getElementById('msg'),
        fName = document.getElementById('fName'),
        lName = document.getElementById('lName'),
        uName = document.getElementById('uName'),
        pass1 = document.getElementById("pWord1");

    //Using ajax made the function to check if the text box value is empty or not
    //when that text box has focus.
    if ($("#fName").is(':focus')){
        if (fName.value.length <= 3){
            msg.innerHTML = "First name is too short";
        }else{
            msg.innerHTML = "";
            lName.disabled = false;
        }
    }

    if ($("#lName").is(':focus')){
        if (lName.value === fName.value){
            msg.innerHTML = "Last and first name can't be the same";
            pass1.disabled = true;
        }else{
            if (lName.value.length <= 3){
                msg.innerHTML = "Last name is too short";
            }else{
                msg.innerHTML = "";
                uName.disabled = false;
            }
        }
    }

    if ($("#uName").is(':focus')){
            if (uName.value.length <= 3){
                msg.innerHTML = "User name is too short";
                pass1.disabled = true;
            }else{
                if(uName.value.length > 0){
                    checkUname();
                }
            }
    }

    function checkUname() {

        if(window.XMLHttpRequest)
        {
            xmlhttp=new XMLHttpRequest();
        }
        else
        {
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }

        xmlhttp.onreadystatechange=function(){

            if(xmlhttp.readyState==4 && xmlhttp.status==200){
                if (xmlhttp.responseText === "1"){
                    msg.innerHTML="Username taken";
                    pass1.disabled = true;
                }else{
                    msg.innerHTML = "";
                    pass1.disabled = false;
                }
            }
        };
        xmlhttp.open("POST","../Functions/matchUname.php?uName="+uName.value,true);
        xmlhttp.send();
    }
}

function checkLength() {
    var pass1 = document.getElementById("pWord1"),
        pass2 = document.getElementById("pWord2"),
        passLength1 = pass1.value.length;

    if(passLength1 <= 4){
        document.getElementById("msg").innerHTML ="Password is less than 4 characters!";
    }else{
        document.getElementById("msg").innerHTML ="";
        pass2.disabled = false;
    }
}

function checkPass() {
    var pass1 = document.getElementById("pWord1"),
        pass2 = document.getElementById("pWord2"),
        uTeam = document.getElementById("uTeam"),
        matchColor = "#66cc66",
        noMatchColor = "#ff6666";

    if (pass1.value === pass2.value){
        document.getElementById("msg").innerHTML ="Passwords match!";
        pass1.style.backgroundColor = matchColor;
        pass2.style.backgroundColor = matchColor;
        uTeam.disabled = false;
    }else{
        document.getElementById("msg").innerHTML ="Passwords do not match!";
        pass1.style.backgroundColor = noMatchColor;
        pass2.style.backgroundColor = noMatchColor;
    }
}

function enableRoles() {
    var team = document.getElementById("uTeam").value,
        teamId = document.getElementById("uTeamId").value,
        tlCheck = document.getElementById("tl"),
        role = document.getElementsByClassName("userRoles");

    if (team !== ""){
        //For loop to enable radio buttons
        for (var i = 1; i < role.length; i++){
            role[i].disabled = false;

                //This part will take the team is from uTeamId text box
                //send it to getTeam.php checks if that team has a leader if that team has a leader
                //"set" value will be returned making the check box for team attribute team leader disabled.
                if(window.XMLHttpRequest){

                    xmlhttp=new XMLHttpRequest();

                }else{

                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }

                xmlhttp.onreadystatechange=function(){

                    if(xmlhttp.readyState==4 && xmlhttp.status==200){

                        // document.getElementById("msgID").innerHTML = xmlhttp.responseText;
                        tlCheck.disabled = xmlhttp.responseText === "set";

                    }
                };
                xmlhttp.open("POST","../Functions/getTeam.php?teamId="+teamId,true);
                xmlhttp.send();
            }

        }
}

$(document).ready(function () {
    /*Register the change element to #roles
     || When clicked...*/

    //This code base was originally developed by zer00ne I'm using it under his permission
    //Thanks man

    var form = document.getElementById('userRoles');

    if (form){
        form.addEventListener('change', function(e) {

                /* Determine if the e.target (radio that's clicked)
                 || is NOT e.currentTarget (#roles)
                 */
                if (e.target !== e.currentTarget) {

                    // Assign variable to e.target
                    var target = e.target;

                    // Reference the submit button
                    var btn = document.querySelector('[name=submit]');

                    // Enable submit button
                    btn.disabled = false;

                    // call rolrDist() passing the target,value
                    roleDist(target.value);
                }
        }, false);
    }

    function roleDist(rank) {
        var display = document.getElementById("msg");

        if (rank !== null) {
            display.innerHTML = "All done! You can save";
        } else {
            display.innerHTML = "Please Select User Type";
        }
    }
});

它运行正常，没有任何错误，但如果登录用户不是管理员，我想禁用管理员用户类型。我可以使用纯 PHP 来完成此任务，但它破坏了表单的流程。

在我的 HTML/PHP 表单中，我使用 PHP 来归档我所描述的内容，但这并不是我真正想要做的事情，我想使用 JavaScript 或 jQuery 或 AJAX 来归档它。

我使用的 PHP:

 <div id="userRoles">
            <label for="userRoles">User Role:</label><label for="uAttrib" style="margin-left: 250px;">User Attributes:</label><br>
            <?php while ($row = $getUserRoleQuery -> fetch(PDO::FETCH_ASSOC)) { ?>
                <input type="radio" class="userRoles" name="userRoles" value="<?php echo $row["urId"]; ?>"
                <?php if ($_SESSION["uRole"] != "1" && $row["userRole"] == "Admin" ){?> disabled <?php } ?>><?php echo $row["userRole"]; }?>
                <input type="checkbox" id="tl" name="tl" value="yes" style="margin-left: 120px;" disabled>Team Leader
        </div>

有人可以引导我走上正确的道路或告诉我如何做到这一点。

更新:在与专业人士交谈后，我了解到我所做的就是用自己的枪搬起自己的脚。使用客户端语言来处理安全选项是一个坏主意，我们不能信任用户。我的主要问题是表单的流程，但安全性胜过美观，因此这将被分成另一个普通用户甚至希望看到管理选项的表单。

我想把这个问题留在这里，不介意它是否被关闭，以便其他人可以从我的错误中学习一些东西。

最佳答案

只是为了确定这一点......

美好之后chat discussion ，看来 Jack (OP) 已经了解不在客户端管理用户级安全性的重要性。

问题不再需要更多答案。
;)

关于javascript - 仅为管理员用户启用单选按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43774064/

26 4 0
文章推荐： c++ - 如何在单个 Visual Studio 2010 项目中执行多个主要文件？
文章推荐： jquery - 为单击的不同类动态更改文本 - Jquery 灯箱插件
文章推荐： Python - 将有符号 float 转换为无符号长整数(win32 为 DWORD)
文章推荐： c++ - 指向成员函数的指针 vector
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com