函数/代码无法在代码的一部分中运行

Function debug_to_console doesn't work when I run it inside the html tag. Should I position the function somewhere else? Or should i declare the function again in the code? Also, is there a scope for function in php?

Edit: It seems like the function only failed when it is inside the if($_SERVER["REQUEST_METHOD"]=="POST") Loop

index.php

<?php
function debug_to_console($data) {
    if(is_array($data) || is_object($data))
    {
        echo("<script>console.log('PHP: ".json_encode($data)."');</script>");
    } else {
        echo("<script>console.log('PHP: ".$data."');</script>");
    }
}
?>
<?php
/*this worked*/
debug_to_console("ok");
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" content="learning process">
<!--Javascript-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src= "web.js"></script>
</head>
<body>
 <form id="email_re" action=<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?> method="post">
<input type="text" name="email" placeholder="Type in your email adress"></input><input type="submit" value="submit"></input></li></form>
<?php
if($_SERVER["REQUEST_METHOD"]=="POST"){
    $email=$_POST["email"];
    $message="You have successfully registered";
    mail($email, 'My Subject', $message);
    /*this one failed*/
    debug_to_console("Done");
}
/*this one failed*/
debug_to_console("Done");
?>
</body> 
</html> 

javascript:

$(document).ready(function () {
      $(document).on("submit", "#email_re", function(event){
          event.preventDefault();
          $.ajax({
                 type:"POST",
                 url:"index.php",
                 data:$("#email_re").serialize(),
                 success:function(){
                    console.log("Great2");
                 }

           })

      });
})

this is what the website look like now http://cs20p.site11.com/