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

Jsquery redirect after success login – Jquery

I’m trying to get a redirect to the home page after a successful login, but I don’t know how.
I’ve already used the sleep function but somehow it doesn’t work.
Can someone help me please ?

login.php
`

<?php

include "message.php";

if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && !empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest')
{
    if(($_POST["username"] == "admin" && $_POST["password"] == "admin"))
    {
        echo message::success("Your login was successfully.");
        sleep(5);
        header("Location: index.php");
    } else {
        echo message::error("Your entered details are wrong.");
    }

} else {
    header("HTTP/1.0 404 Not Found");
}

`

index.php
`

<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>

<script>
    $(document).ready(function(){
        $("form").on("submit", function(event){
            event.preventDefault();

            var formValues= $(this).serialize();

            $.post("php/login.php", formValues, function(data){
                // Display the returned data in browser
                $("#msg").html(data);
            });
        });
    });
</script>

<body class="text-center">
    <main class="form-signin w-100 m-auto">
        <div id="msg"></div>

        <form id="contactForm" method="POST" role="form">
            <h1 class="h3 mb-3 fw-normal">Please sign in</h1>

            <div class="form-floating">
                <input type="username" name="username" class="form-control" id="floatingInput" placeholder="Username">
                <label for="floatingInput">Username</label>
            </div>
            <div class="form-floating">
                <input type="password" name="password" class="form-control" id="floatingPassword" placeholder="Password">
                <label for="floatingPassword">Password</label>
            </div>

            <div class="checkbox mb-3">
                <label>
                    <input type="checkbox" value="remember-me"> Remember me
                </label>
            </div>
            <input type="submit" name="login" class="w-100 btn btn-lg btn-primary">Sign in
            <p class="mt-5 mb-3 text-muted">&copy; 2022</p>
        </form>
    </main>
</body>

`

I’ve already used the sleep function but somehow it doesn’t work

Tags:

2

Answers


  1. 0

    You are using PHP redirect but AJAX requests don’t follow response redirects by default. PHP header() will send redirect header, but it be captured by JS. This only works when you load login.php directly from browser.

    You need to redirect user using Javascript:

    $.post("php/login.php", formValues, function(data){
    document.location.href = 'index.php';
});
    Login or Signup to reply.
  2. 0

    try this in your PHP file…

    <?php 
if(($_POST["username"] == "admin" && $_POST["password"] == "admin"))
{
    // echo message::success("Your login was successfully."); // uncomment if you want the result to send to frontend
    // sleep(5);
    header("Location: dashboard.php"); // uncomment if you want to get to your dashboard or index and print the success result there...
} else {
    echo message::error("Your entered details are wrong.");
}

    or in your javascript file:

    $.post("php/login.php", formValues, function(data){
    $("#msg").html(data);
    setTimeOut(() => {
        window.location.href = 'dashboard.php';
    }, 2000) //after displaying it will redirect to your dashboard or index
});

    You can also get into dashboard.php and print the login success result

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search