Question 35809 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Redirect to a specific page if user selects a dropdown's option? – Jquery

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

  1. Staff
  2. Lecturer
  3. 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" class="login100-form" id="dtls">

  <select name="sp" id="sponsor" class="input100" 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" class="input100" placeholder="Staff / Student ID"/>
  <input type="password" name="password" class="input100" placeholder="Password"/>
  <input type="submit" name="sub" class="login100-form-btn" id="but">

</form>
</body>
Tags:

2

Answers


  1. 0

    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 onload 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" class="login100-form" id="dtls">

                        <select name="sp" id="sponsor" class="input100" 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" class="input100" placeholder="Staff / Student ID"/>
                        <input type="password" name="password" class="input100" placeholder="Password"/>
                        <input type="submit" name="sub" class="login100-form-btn" id="but">

</form>
</body>
    Login or Signup to reply.
  2. 0

    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" class="login100-form" id="dtls">
        <select name="sp" id="sponsor" class="input100" 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" class="input100" placeholder="Staff / Student ID"/>
        <input type="password" name="password" class="input100" placeholder="Password"/>
        <input type="submit" name="sub" class="login100-form-btn" 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" class="login100-form" id="dtls">
            <select name="sp" id="sponsor" class="input100" 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" class="login100-form-btn" id="but">
        </form>
    </body>
    </html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search