access table from PHP database in Javascript-CodePudding

I have created a login page that allows you to log in using username and password. However, it is currently so that you are always redirected to the "profile" page and there is then checked by PHP whether the login data are correct, because the data are on the DB. Therefore I have the idea with a validate function directly on the loginpage to check if the data is correct and then I just create a session. Does anyone have an idea how I can do this? Here is the code:

    <?php session_start();?>
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Login</title>
    <link href="bootstrap_style.css" rel="stylesheet" id="bootstrap-css"> <!-- maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css -->
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <!-- //maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js or bootstrap.js-->
    <script src="jquery.js"></script> <!-- //cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js -->
    <link rel="stylesheet" href="style.css">
  </head>
  <body>

    <div class="wrapper fadeInDown">
      <div id="formContent">
        <!-- Tabs Titles -->

        <!-- Icon -->
        <div class="fadeIn first">
          <img src="default_logo2.png" id="icon" alt="User Icon" onclick="window.open('url', '_blank');"/>
        </div>

        <!-- Login Form -->
        <form action="searchpage.php" method="post" onsubmit="validateForm(event);">
          <input type="text" id="login" class="fadeIn second" name="username" placeholder="username">
          <input type="password" id="password" class="fadeIn third" name="password" placeholder="password">
          <input type="submit" class="fadeIn fourth" value="Log In">
        </form>

        <!-- Remind Passowrd -->
        <div id="formFooter">
          <a class="underlineHover" style="color:red" id="warning"></a>
        </div>
      </div>
    </div>
  </body>
</html>
<script type="text/javascript">
function validateForm(event) {
  var input_username = document.getElementById("login");
  var input_password = document.getElementById("password");
  if (input_username.value == '' || input_username.value.charAt(0) == ' ' || input_password.value == '') {
    event.preventDefault();
    document.getElementById("warning").innerHTML = "Fill empty fields!";
  }
  else {
    return true;
  }
}
</script>

with this I reach the DB:

$pdo = new PDO('mysql:host=localhost;dbname=ausleihe', 'root', '');

and that is the SELECT:

$login_session = "SELECT * FROM login WHERE username = '".$hereshouldbetheusernamefromform."' AND password = '".herethepasswordfromform."'";

If you need more code or have questions, ask me! Thx

CodePudding user response：

Client-side JavaScript cannot directly access a Host-side PHP program except through AJAX calls. Only the Host-side software has access to Host-side databases.