Login button keep refreshing the page

Question

I'm starting to learn Web Development and trying to build the login screen for my site.
Normally when the user logged in, he will be redirected to the Welcome page( which is the case before I work with all the Javascript). Now click Login will just refresh the page.
Here is my PHP file

<head>
    <?php include $_SERVER['DOCUMENT_ROOT'] . "\include\header.php";?>
    <title>Login</title>
    <link rel="icon" type="image/png" href="http://localhost/image/login/navi.png"/>
</head>
<?php
    // Initialize the session
    session_start();
    // Check if the user is already logged in, if yes then redirect him to welcome page
    if(isset($_SESSION["loggedin"]) && $_SESSION["loggedin"] === true && time() < $_SESSION["expire"]){
        header("location: http://localhost/main/welcome.php");
    exit;
    }
    $email = $password = "";
    $email_err = $password_err = "";
    if($_SERVER["REQUEST_METHOD"] == "POST"){

        // Validate credentials
    if(empty($email_err) && empty($password_err)){
        // Prepare a select statement
        $sql = "SELECT userid, username, email, password FROM users WHERE email = ?";

        if($stmt = mysqli_prepare($link, $sql)){
            // Bind variables to the prepared statement as parameters
            mysqli_stmt_bind_param($stmt, "s", $param_email);

            // Set parameters
            $param_email = $email;

            // Attempt to execute the prepared statement
            if(mysqli_stmt_execute($stmt)){
                // Store result
                mysqli_stmt_store_result($stmt);

                // Check if username exists, if yes then verify password
                if(mysqli_stmt_num_rows($stmt) == 1){                    
                    // Bind result variables
                    mysqli_stmt_bind_result($stmt, $id, $username, $email, $hashed_password);
                    if(mysqli_stmt_fetch($stmt)){
                        if(password_verify($password, $hashed_password)){
                            // Password is correct, so start a new session
                            session_start();

                            // Store data in session variables
                            $_SESSION["loggedin"] = true;
                            $_SESSION["id"] = $id;
                            $_SESSION["username"] = $username;
                            $_SESSION['start'] = time(); // Taking now logged in time.
                            $_SESSION['expire'] = $_SESSION['start'] + (30 * 60);

                            // Redirect user to welcome page
                            header("location: http://localhost/main/welcome.php");
                        } else{
                            // Display an error message if password is not valid
                            $password_err = "Wrong password";
                        }
                    }
                } else{
                    // Display an error message if username doesn't exist
                    $email_err = "Wrong email";
                }
            } else{
                echo "Oops! Something went wrong. Please try again later.";
            }

            // Close statement
            mysqli_stmt_close($stmt);
        }
    }

    // Close connection
    mysqli_close($link);
}
?>   
<body class="background">
    <div class="bgoverlay">
        <div class="login-container">
            <div class="wrap-login">
                <span class="login-form-title">
                    Account Login
                </span>

                <form class="login-form login-validate-form" >
                    <div id="email" class="login-wrap-input login-validate-input" data-validate = "Enter email">
                        <input class="login-input" type="text" name="email" placeholder="Email">
                        <span class="login-focus-input" data-placeholder="&#xea1e;"></span>
                    </div>

                    <div class="login-wrap-input login-validate-input" data-validate="Enter password">
                        <input id="password" class="login-input" type="password" name="password" placeholder="Password">
                        <span class="login-focus-input" data-placeholder="&#xe96b;"></span>
                        <span toggle="#password" class="login-show-pass see toggle-password"></span>
                    </div>

                    <div class="container-login-form-btn">
                        <?php 
                            if($email_err != null || $password_err !=null) {
                                echo '<script type="text/javascript">alert("'.$email.$password.'");</script>';
                            }
                        ?>
                        <input type="submit" class="login-form-btn" value="Login">
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div id="dropDownSelect1"></div>

    <script src="http://localhost/root/js/jquery-3.5.0.min.js"></script>
    <script src="http://localhost/root/js/login.js?<?php echo(rand(0,999999));?>"></script>
</body>
</html>

*I honestly don't know which part to give so I think it's best to just put them all just in case.
Here is the Javascript that I have been fixing

(function ($) {
    "use strict";


    /*==================================================================
    [ Focus input ]*/
    $('.login-input').each(function(){
        $(this).on("blur", function(){
            if($(this).val().trim() != "") {
                $(this).addClass('login-has-val');
            }
            else {
                $(this).removeClass('login-has-val');
            }
        })    
    })


    /*==================================================================
    [ Validate ]*/
    var input = $('.login-validate-input .login-input');

    function validate (input) {
        if($(input).attr('type') == 'email' || $(input).attr('name') == 'email') {
            if($(input).val().trim().match(/^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{1,5}|[0-9]{1,3})(\]?)$/) == null) {
                return false;
            }
        }
        else {
            if($(input).val().trim() == ''){
                return false;
            }
        }
    }

    $('.login-validate-form').on('submit',function(){
        var check = true;

        for(var i=0; i<input.length; i++) {
            if(validate(input[i]) == false){
                showValidate(input[i]);
                check=false;
            }
        }

        return check;
    });


    $('.login-validate-form .login-input').each(function(){
        $(this).focus(function(){
           hideValidate(this);
        });
    });

    function showValidate(input) {
        var thisAlert = $(input).parent();

        $(thisAlert).addClass('login-alert-validate');
    }

    function hideValidate(input) {
        var thisAlert = $(input).parent();

        $(thisAlert).removeClass('login-alert-validate');
    }

    /*==================================================================
    [ Show pass ]*/
    jQuery(document).ready(function() {
        jQuery(".show-pass").hide();
    });

    jQuery("#password").change(function() {
        if(this.value.replace(/\s/g, "") === "") {
           jQuery(".show-pass").hide();
        } else {
           jQuery(".show-pass").show();
        }
    });

    jQuery(".show-pass").change(function() {
        jQuery("#password").val("");
        jQuery(this).hide();
     });

    $(".toggle-password").click(function() {

        $(this).toggleClass("unsee");
        var input = $($(this).attr("toggle"));
        if (input.attr("type") == "password") {
          input.attr("type", "text");
        } else {
          input.attr("type", "password");
        }
      });

})(jQuery);

This is what the URL look like after pressed Login

Answer 1

Look at your PHP code, you taking in consideration the request should be POST

if($_SERVER["REQUEST_METHOD"] == "POST") ...

and your HTML markup for your form has no method, which is by default going to be GET . You need to edit you form tag to be like this

<form class="login-form login-validate-form" method="post" action="URL.php">

Answer 2

It's possible that your are not choosing the correct path, please reconfirm the correct path or you can try changing your header to:

header("location:welcome.php");

Login button keep refreshing the page

Question

2 answers

solution1
1 2020-04-25 18:31:24

solution2
0 2020-04-25 18:25:57

Login button keep refreshing the page

Question

2 answers

solution1 1 2020-04-25 18:31:24

solution2 0 2020-04-25 18:25:57

solution1
1 2020-04-25 18:31:24

solution2
0 2020-04-25 18:25:57