Im trying to create a website and write now I'm creating my login Page. I have been successful in checking whether the user exists. But I want to return an error if it is wrong and that is possible only using JavaScript. My PHP file is run using AJAX. I have tried many solutions but none have worked. I tried putting the script tags in echo but that didn't work. So basically I want to run my JavaScript code inside PHP.
My HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>NHG</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link type="text/css" rel="stylesheet" href="css/normalize.css"/>
<link type="text/css" rel="stylesheet" href="css/style.css"/>
<link type="text/css" rel="stylesheet" href="css/resposive.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="JS/script.js"></script>
<script src="JS/jQuery.js"></script>
</head>
<body>
<div id="abhimanyu">
<p>"Life will test you but remember this, when you walk up a mountain your legs get stronger"</p>
</div>
<div id="arjun">
<p>"There is no such thing as a failed experiment, only experiments with unexpected outcomes"</p>
</div>
<br>
<div id="bheem">
<p>"Do not look where you fell, but where you slipped."</p>
</div>
<div id="eklavya">
<p>"Sometimes life touches one person with a bouquet and another with a thorn bush, but the first may find a wasp in the flowers, and the second may discover roses among the thorns."</p>
</div>
<header>
<div id="main-head">
<!-- REMEMBER TO CHANGE THE COLOR OF HEADING -->
<a href="#" id="main-heading"><h2><span>sKool</span><span>Talk</span></h2></a>
</div>
</header>
<section>
<div id="container">
<div id="wrapper">
<img src="https://i.imgsafe.org/a40bbe047e.png" alt="avatar" id="schoolAvatar" align="middle">
<div id="admissionNumberDiv">
<form method="get" id="admissionNumber">
<input type="text" name="admissionNumber" id="admissionNumberBox" placeholder="Enter your asmission number..."/>
<br>
<input type="password" name="password" id="password" placeholder="Enter your Password...">
<br>
<button type="submit" id="admissionSubmitButton">
<p>Next</p>
</button>
<br>
<p id="loginErrorMessage"></p>
</form>
<br>
</div>
</div>
</div>
</section>
<br>
<footer>
<div class="footerHR">
</div>
</footer>
</body>
</html>
My JS:
$(document).ready(function() {
$('#schoolSubmitButton').click(function(){
var schoolName = $('#schoolNameBox').val().toLowerCase();
switch (schoolName) {
case 'new horizon gurukul':
$('#container').remove();
$.get("NHGLogin.php", function(data){
var NGHLogin = $(data).find('div#container');
$('body').append(NGHLogin);
});
break;
default:
$('#schoolErrorMessage').text('Please Enter a valid school name, still if invalid schoold does not exist!').css('color', 'red');
}
});
var name = $('#admissionNumberBox').val();
var pwd = $('#password').val();
var dataString = "admissionNumber: " + name;
$('#admissionSubmitButton').click(function() {
$.ajax({
url: 'php/login.php',
method: 'get',
cache: 'true',
dataType: 'html',
data: {'admissionNumber': name, 'password': pwd},
success: function(response){
$('#container').append(response);
$('body').append(response);
$('#loginErrorMessage').text(response);
alert(response);
}
});
});
});
and my PHP:
<?php
session_start();
$dbserver = "localhost:3306";
$dbuser = "root";
$dbpass = "";
$dbname = "NewHorizonGurukul";
$username = $_GET['admissionNumber'];
$password = $_GET['password'];
// Create connection
$conn = new mysqli($dbserver, $dbuser, $dbpass, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT * FROM Users WHERE AdmissionNumber='$username' AND Password='$password';";
$result = $conn->query($sql);
$numRows = $result->num_rows;
$row = $result->fetch_assoc();
if ($numRows > 0) {
header('location: ../random.php');
echo "<script>window.location('../random.php')<script/>";
} else {
echo '<script type="text/javascript">',
'document.getElementById("loginErrorMessage").innerHTML = "Pleas enter a valid username or password";',
'</script>';
}
?>
Here's what it returns:
