Undefined array key email and password to login

See more:

PHP

MySQL

jQuery

HTML5

Hi Team

On my back end i am getting undefined key array email and password on line 18 and 19. Basically i am doing a session so once users are validated to login must be redirected to profile.php. But when debuggin from the form i get this error.

What I have tried:

//php code
<pre><?php

session_start();

$dbHost = 'localhost';
$dbName = 'ecommerce_store';
$dbUser = 'root';
$dbPass = '';

try {
  $pdo = new PDO("mysql:host=$dbHost;dbname=$dbName", $dbUser, $dbPass);
  $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch(PDOException $e) {
  echo "Connection failed: " . $e->getMessage();
  exit;
}

$email = $_POST['email'];
$password = $_POST['password'];

$stmt = $pdo->prepare("SELECT * FROM users WHERE email = :email");
$stmt->execute(['email' => $email]);
$user = $stmt->fetch(PDO::FETCH_ASSOC);

if ($user && password_verify($password, $user['password'])) {
  // valid credentials, store user session
  $_SESSION['user'] = $user;
  echo "success";
} else {
  // invalid credentials
  echo "failure";
}

?>

// js file

<pre lang="Javascript">$(document).ready(function() {
  $('#login-form').validate({
    rules: {
      email: {
        required: true,
        email: true
      },
      password: {
        required: true
      }
    },
    messages: {
      email: {
        required: "Please enter your email address",
        email: "Please enter a valid email address"
      },
      password: {
        required: "Please enter your password"
      }
    },
    submitHandler: function(form) {
      var email = $('#email').val().trim();
      var password = $('#password').val().trim();
      
      $.ajax({
        type: "POST",
        url: "login.php",
        data: {email: email, password: password},
        success: function(response) {
          if (response === "success") {
            window.location.href = "profile.php";
          } else {
            $('#login-messages').html('<div class="alert alert-danger" role="alert">Login failed. Please check your email and password and try again.</div>');
          }
        },
        error: function() {
          $('#login-messages').html('<div class="alert alert-danger" role="alert">Error logging in. Please try again later.</div>');
        }
      });
    }
  });
});

// form

<!--Form registration-->


<pre lang="HTML"><div class="card">
  <div class="card-body">
<form id="login-form" action="login.php" method="POST">
  <div class="form-group text-center">
   <input type="email" class="form-control" id="email" placeholder="Email" name="email" required>
  </div>
  <div class="form-group text-center">
   <input type="password" class="form-control" id="password" placeholder="Password" name="password" required>
  </div>
  <button type="submit" class="btn btn-primary">Login</button>
</form>
</div>
</div>
<div id="login-messages"></div>

</body>
<!----Javascript files validation during form submission ---->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="js/login.js"></script>