Question

I’m trying to learn some javascript and i’m having trouble figuring out why my code is incorrect (i’m sure i’m doing something wrong lol), but anyways I am trying to create a login page so that when the form is submitted javascript will call a function that checks if the login is in a mysql database and then checks the validity of the password for the user if they exist. however I am getting an error (Illegally Formed XML Syntax) i cannot resolve. I’m really confused, mostly because netbeans is saying it is a xml syntax error and i’m not using xml. here is the code in question:

function validateLogin(login){

  login.addEventListener("input", function() {
    $value = login.value;
    if (<?php
    //connect to mysql
    mysql_connect(host, user, pass) or die(mysql_error());
    echo("<script type='text/javascript'>");
    echo("alert('MYSQL Connected.');");
    echo("</script>");
    //select db
    mysql_select_db() or die(mysql_error());
    echo("<script type='text/javascript'>");
    echo("alert('MYSQL Database Selected.');");
    echo("</script>");
    //query
    $result = mysql_query("SELECT * FROM logins") or die(mysql_error()); 
    //check results against given login
    while($row = mysql_fetch_array($result)){
      if($row[login] == $value){
        echo("true");
        exit(0);
      }
    }
    echo("false");
    exit(0);
      ?>) {
      login.setCustomValidity("Invalid Login. Please Click 'Register' Below.")
    } else {
      login.setCustomValidity("")
    }

  });
}

the code is in an external js file and the error throws on the last line. Also from reading i understand best practices is to not mix js and php so how would i got about separating them but maintaining the functionality i need?
thanks!

Answer 1

You can’t mix PHP and JavaScript in this way as all of your PHP has already executed on the server before any of your JavaScript executes on the client.

The error is because the client is receiving and failing to execute this as JavaScript:

function validateLogin(login){

  login.addEventListener("input", function() {
    $value = login.value;
    if (<script type='text/javascript'>alert('MYSQL Connected.');</script>...
// etc.

To interact with PHP from the client, you’ll have to make another HTTP request — either by <a> click, <form> submit, or Ajax request (using jQuery.post for brevity; see Using XMLHttpRequest for further details):

function validateLogin(login){
  login.addEventListener("input", function() {
    $.post('/validateLogin.php', { login: login }, function (result) {
      if (result === "true") {
        login.setCustomValidity("Invalid Login. Please Click 'Register' Below.")
      } else {
        login.setCustomValidity("")
      }
    });
  });
}

Adjust the URL, /validateLogin.php, as needed; but create a PHP file for this URL similar to:

<?php
$value = $_POST['login'];

mysql_connect(host, user, pass) or die(mysql_error());
mysql_select_db() or die(mysql_error());

$result = mysql_query("SELECT * FROM logins") or die(mysql_error());
while($row = mysql_fetch_array($result)){
  if($row[login] == $value){
    echo("true");
    exit(0);
  }
}
echo("false");
exit(0);
?>