Redirect to a specific page if user selects a dropdown's option?-CodePudding

I am facing some issue in my login page, I have three categories i.e.

Staff
Lecturer
Student

By selecting a category, my page should redirect to a specific page.

Forexample: If I select Staff and click on sumbit button, it should redirect me to 'verify-admin.php' page.

The following is my current code:

<?php 
if(isset($_POST["sub"])) {
    $value = $_POST["sp"];
    header("location: /$value");
}
?>

<head>
<script>

$("#dtls").submit(function() {
    var value = $("#sponsor").val();
    if(value == "Admin") {
        window.location.href = "/verify-admin.php";
    } else if(value == "Lecturer") {
        window.location.href = "/verify-lecturer.php";
    } else if(value == "Student") {
        window.location.href = "/verify-student.php";
    }
});

</script>
</head>
<body>
<form action="#" method="post"  id="dtls">

  <select name="sp" id="sponsor"  style="border:0" >
     <option selected>Select Category</option>
     <option value="Admin">Admin</option>
     <option value="Lecturer">Lecturer</option>
     <option value="Student">Student</option>
  </select>

  <input type="username" name="username"  placeholder="Staff / Student ID"/>
  <input type="password" name="password"  placeholder="Password"/>
  <input type="submit" name="sub"  id="but">

</form>
</body>

CodePudding user response：

Your problem is you can access form but instead of this you should target your button if button is press then you should verify and you should use onl oad method which will prevent you from error.

<?php 
if(isset($_POST["sub"])) {
    $value = $_POST["sp"];
    header("location: /$value");
}
?>

<head>

<script>

$("#but").click(function() {
    //it will stop default event
    event.preventDefault();
    var value = $("#sponsor").val();
    if(value == "Admin") {
        window.location.href = "/verify-admin.php";
    } else if(value == "Lecturer") {
        window.location.href = "/verify-lecturer.php";
    } else if(value == "Student") {
        window.location.href = "/verify-student.php";
    }
});

</script>
</head>
<body>
<form action="#" method="post"  id="dtls">

                        <select name="sp" id="sponsor"  style="border:0" >
                        <option selected>Select Category</option>
                        <option value="Admin">Admin</option>
                        <option value="Lecturer">Lecturer</option>
                        <option value="Student">Student</option>
                        </select>

                        <input type="username" name="username"  placeholder="Staff / Student ID"/>
                        <input type="password" name="password"  placeholder="Password"/>
                        <input type="submit" name="sub"  id="but">

</form>
</body>

CodePudding user response：

You are using jQuery in your code, but you have not included it. See jQuery documentation here.

You should also write your jQuery code inside $(document).ready() function. This would help https://learn.jquery.com/using-jquery-core/document-ready/.

You need to use preventDefault() to prevent the Default function of the element, This might help https://api.jquery.com/event.preventDefault/#event-preventDefault

Following is the correct code.

<?php 
    if(isset($_POST["sub"])) {
        $value = $_POST["sp"];
        header("location: /$value");
    }
?>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Your Title</title>
</head>
<body>
    <form action="#" method="post"  id="dtls">
        <select name="sp" id="sponsor"  style="border:0" >
            <option selected>Select Category</option>
            <option value="Admin">Admin</option>
            <option value="Lecturer">Lecturer</option>
            <option value="Student">Student</option>
        </select>
        <input type="username" name="username"  placeholder="Staff / Student ID"/>
        <input type="password" name="password"  placeholder="Password"/>
        <input type="submit" name="sub"  id="but">
    </form>

    <script src="https://code.jquery.com/jquery-3.6.2.js" integrity="sha256-pkn2CUZmheSeyssYw3vMp1 xyub4m e QK4sQskvuo4=" crossorigin="anonymous"></script>
    <script>
        $("#dtls").submit(function(e) {
            e.preventDefault();
            var value = $("#sponsor").val();
            if(value == "Admin") {
                window.location.href = "verify-admin.php";
            } else if(value == "Lecturer") {
                window.location.href = "verify-lecturer.php";
            } else if(value == "Student") {
                window.location.href = "verify-student.php";
            }
        });
    </script>

</body>
</html>

Here is a working example of your code without PHP.

$(document).ready(function(){
    $("#dtls").submit(function(e) {
        e.preventDefault();
        var value = $("#sponsor").val();
        var msg = "";
        if(value == "a") {
            msg = "https://www.google.com/";
        } else if(value == "b") {
            msg = "https://www.youtube.com/";
        } else if(value == "c") {
            msg = "https://stackoverflow.com/";
        }
        console.log(msg)
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Your Title</title>
    </head>
    <body>
        <form action="#" method="post"  id="dtls">
            <select name="sp" id="sponsor"  style="border:0" >
                <option selected>Select Option</option>
                <option value="a">Google</option>
                <option value="b">Youtube</option>
                <option value="c">Stackoverflow</option>
            </select>
            <input type="submit" name="sub"  id="but">
        </form>
    </body>
    </html>