Ajax + PHP validation and call Javascript function inside PHP validation

Question

Basically, I'm trying to call a Javascript function inside a PHP script when using Ajax.

JavaScript:

<script type="text/javascript">
    function Validate() {
        hr = new XMLHttpRequest();
        name = document.getElementById('name').value;

        hr.open('POST', 'validator.php', true);
        hr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

        hr.onreadystatechange = function() {
            if ( hr.readyState == 4 && hr.status == 200 ) {
                document.getElementById('message').innerHTML = hr.responseText;
            }
        }
        hr.send('name=' + name);
    }

    function disable() {
        document.getElementById('message').innerHTML = '';
    }
</script>

HTML:

<div id="message"></div>
Name: <input type="text" id="name /">
<input type="button" onclick="Validate();" value="Validate" />

PHP:

<?php    
   $name = $_POST['name'];    
   if ( !empty( $name ) ) {
       if ( $name == 'Tom' ) {
           echo "<script>alert('Hello Tom, Welcome Back')</script>";
       } else {
           echo 'You are not Tom';
       }
   } else {
       echo 'Please enter a name.';
   }
?>

Everything works fine except calling the Javascript function inside PHP echo <script>alert()</script>

What I think the problem here is because I declared hr.responseText, as a result, the javascript I want to show has returned into text. But what should I do to solve this problem?

Any help would be appreciated.

Answer 1

Try changing your echo from "<script>alert('Hello Tom, Welcome Back')</script>";

to just 'Hello Tom, Welcome Back';

Then in your javascript you can call alert(hr.responseText);

You will have to change your javascript to check for what is returned so you know to call either the alert or the document.getElementById('message').innerHTML = hr.responseText;

EDIT: I will add all the changed code...

<?php

$name = $_POST['name'];

if(!empty($name)){
  if($name == 'Tom'){
   echo 'Hello Tom, Welcome Back';
}else{
    echo 'You are not Tom';
}
}else{
  echo 'Please enter a name.';
}
 ?>

Javascript

<script type="text/javascript">
function Validate(){
   hr = new XMLHttpRequest();
   name = document.getElementById('name').value;

hr.open('POST', 'validator.php', true);
hr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

hr.onreadystatechange = function(){
  if(hr.readyState == 4 && hr.status == 200){
   response = hr.responseText.replace(/^\s+|\s+$/g,'');  //remove whitespace so you can compare
   if (response == ("You are not Tom") || response == ("Please enter a name."))
     {
     document.getElementById('message').innerHTML = hr.responseText;
     }
     else {  
       alert(hr.responseText);
    }
    }
}
hr.send('name=' + name);
}

function disable(){
   document.getElementById('message').innerHTML = '';
}
</script>

Answer 2

Try this:

   function do_alert($msg){
            echo '<script type="text/javascript">alert("' . $msg . '"); </script>';
   }
   if(!empty($name)){
         if($name == 'Tom'){
             do_alert("You are tom");
          }else{
             do_alert("You are not tom");
          }
  }else{
         echo 'Please enter a name.';
   }        

Answer 3

You didn't tag jQuery, but if you are using it, $.getScript might be what you want.

Aside from that, it might be better to build the script into your original document, and then execute this or that function based on the response text.