Shreyas Sreenivasa Shreyas Sreenivasa - 1 month ago 6
Ajax Question

How do I run JS inside PHP?

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:

enter image description here

Answer

Update Your code with below code. and try

//JS Part: 
$("#admissionNumber").on('submit',function(e){
      e.preventDefault();
        $data = $(this).serialize();
        $URL = 'php/'+$(this).attr('data-param-uri')+'.php';
        _Form.__Link($URL, $data,function (return_data){
            if(typeof (return_data.url) !== 'undefined' && return_data.success === true ){
                $(document).find("#loginErrorMessage").html("");
                window.location.href = return_data.url;
            }else{
                $(document).find("#loginErrorMessage").html(return_data.msg);
            }
        });
  });  
   _Form = {
       __Link: function ($url, $data, callback){
            $.ajax({
                url: $url,
                data: $data,
                type: 'POST',
                dataType: 'json',
                processData: false,
                contentType: 'application/x-www-form-urlencoded',
                cache:false,
                success: function (data) {
                    callback(data);
                }
            });
        }
    }
   });
  $("#admissionNumberBox").on('blur',function(e){
      $(document).find("#loginErrorMessage").html("");
  });
  $("#password").on('blur',function(e){
      $(document).find("#loginErrorMessage").html("");
  });

// PHP Part: 
function loginUser($FORMDATA){
    global $conn;

    if(empty($FORMDATA)){ $RESP['success'] = false;$RESP['msg'] = "NullData";return json_encode($RESP);}

    $sql = "SELECT * FROM Users WHERE AdmissionNumber='".$FORMDATA['admissionNumber']."' AND Password='".$FORMDATA['password']."'";
    $result = $conn->query($sql);
    $row = $result->fetch_assoc();

    //if only one user is there than is valid
    if(($result->num_rows) == 1){
        $RESP['success'] = true;
        $RESP['msg'] = "Logged in successfully..!!";
        $RESP['url'] = 'random.php';
    }else{
        $RESP['success'] = false;
        $RESP['msg'] = "Please check credentials and try again..!!";
    }
    return json_encode($RESP);// Js Accept Json Responses
}