Having trouble calling external javascript function through PHP

Question

I'm building a website, and I am incorporating PHP and Javascript into the website. What I am trying to do with this website is to use an interface that allows a user to "log in" in a sense, and then store the information entered through the use of cookies. I am trying to call an external js function using php, however for some reason, although the script tag is being added into the html document as desired, the function is not being called at all and can't figure out why or how to fix it. I have attached a portion of my code below. Thank you very much in advance.

My PHP code:

<?php
 $fail="";
 $success="";
 if (isset($_POST['submit'])) {
 echo "<script>console.log('Submitted');</script>";
 $first=$_POST["first"];
 $last=$_POST["last"];
 $city=$_POST["city"];
 if ($first!="test"||$last!="test"||$city!="test"){
 $fail="This is an error message";
 }
 else{
 echo "<script>console.log('This is working from html');</script>";
 $success= "<script src='main.js'>
 console.log('success variable is working');
 createCookie('first',$first);
 createCookie('last',$last);
 createCookie('city',$city);
 </script>
 <script>
 console.log("Hello World!");
 </script>";
 }
 }
?>

Portion of my HTML:

<div id="container">
 <?=$fail?>
<form action="" method="POST">
 <p>Enter Family Name (as it appears on your invitation): </p>
 <input class="entry" type="text" name="first" placeholder="FIRST NAME" required><br><br>
 <input class="entry" type="text" name="last" placeholder="LAST NAME" required><br><br>
 <input class="entry" type="text" name="city" placeholder="CITY (ONLY)" required><br><br>
 <input name="submit" type="submit" style="margin:auto; display:block">
</form>
<?=$success?>

Javascript code:

function createCookie(name,value){
 document.cookie=name+"="+value;
 console.log("This is working");
 console.log(document.cookie);
 console.log("This is too");
}
function getCookie(name){
 var split=document.cookie.split(";");
 for (let i=0;i<split.length;i++){
 if (split[i].indexOf(name)===0){
 return split[i].substring(name.length+1); 
 }
 }
}

• IncredibleHat: PHP cannot call a javascript function, because PHP is used to create the html that is returned to the browser client. The browser then processes and executes any javascript. (just to be clear ;)
• Sal: The PHP is creating the appropriate HTML and including it in the code, as per developer tools once I hit "submit", but for some reason, the javascript is not being executed even though it is being added
• IncredibleHat: Also... please read this bit: stackoverflow.com/a/19509427/2960971 ... since you have combined both src and code in the same script tag.
• IncredibleHat: Hmm. Well. Ok, I tried ;) I guess there is some flow or fundamental missing code somewhere. If you already have main.js included in the head, and are then echo'ing out the new script tags below... it should find them and execute. Not sure why its not without seeing the FULL html source of the output.
• Sal: It's working :) Thanks a lot

Answer 1

This portion of code is creating a conflict in behavior in the web browser (you have both src and code in the same script tag):

 $success= "<script src='main.js'>
 console.log('success variable is working');
 createCookie('first',$first);
 createCookie('last',$last);
 createCookie('city',$city);
 </script>";

You should change this, by simply making a second script tag (splitting them up):

 $success= "<script src='main.js'></script>
 <script>
 console.log('success variable is working');
 createCookie('first',$first);
 createCookie('last',$last);
 createCookie('city',$city);
 </script>";

That way the src does not negate any code content of the script tag.

Second, you should also quote the strings being added from php in those js function calls. Like so:

 $success= "<script src='main.js'></script>
 <script>
 console.log('success variable is working');
 createCookie('first',". json_encode($first) .");
 createCookie('last',". json_encode($last) .");
 createCookie('city',". json_encode($city) .");
 </script>";

The use of json_encode here is to ensure the values are javascript safe to pass through and not break the script.

• Sal: So the the code I included was just to test if the script was running in the first place, but I see how that could cause some conflict. I have removed that line, and tried once again, to no avail. I have also included the "main.js" in the <head> tag, so it is being included twice in the same document, would that be causing an issue? I added it twice because when I didn't have the src within the php code, it couldn't find "createCookie" function
• Sal: I removed it from <head> and tried refreshing again, but it still did not work. Also, at the bottom of the snippet of my html code, I have <?=$success?>, which prints out the script tag when the appropriate entry is submitted, and shows up in the source code under developer tools