How do I run JS inside PHP?

Question

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. Here's 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 jQuery and AJAX:

$(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);
      }
    });
  });
});

My login.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>';
  } 
?>

Thank you in advance!

Answer 1 · 2016-10-30T20:57:31Z

October 30, 2016 8:57pm

Since my answer was requested: You don't.

For your specific case: It's usual to return a 401 status to a bad login request, and $.ajax() allows you to set up handlers for other status codes. This will hopefully start you on the path building out your login/authorization feature.

Welcome to the Treehouse Community

Looking to learn something new?

Shreyas Sreenivasa

Shreyas Sreenivasa

How do I run JS inside PHP?

1 Answer

Seth Kroger

Seth Kroger