Storing PHP in Javascript doesn't work when in separate document

Question

When I put the script directly in the .PHP file my script works perfectly:

function setup()
{
    var setRows = <?php if(!isset($_GET['rows']))echo 3;else echo $_GET['rows']; ?>;
    var setColumns = <?php if(!isset($_GET['columns']))echo 3;else echo $_GET['columns']; ?>;
    document.getElementById('rows').value = setRows;
    document.getElementById('columns').value = setColumns;
    document.getElementById('rowOutputId').value = setRows;
    document.getElementById('colOutputId').value = setColumns;
}

However, when I put it in a separate file and link it, it prints out the literal string instead of the correct value. So like this:

<script type="text/javascript" src="js/file.js"></script>

It echoes the following:

<?php if(!isset($_GET['rows']))echo 3;else echo $_GET['rows']; ?>

Also, it's important to note that when I have it directly in the HTML file it stores the PHP perfectly without the quotes around it, but in the separate file it gives me the following error if I take away the quotes:

Uncaught SyntaxError: Unexpected token <

Answer 1

Your server decides what to do with a request based on its extension (this is an over-simplification, but will do for now).

Your server has been configured to treat files ending on .php as a php file. This means, that when you request this file from Apache, Nginx, or whatever webserver software you are using, your webserver will first ask the php software to parse and execute it. When the PHP software executes the first code, it will run anything between <?php and ?> . It will then return the result of the code execution to your webserver, which will pass it back to the client.

However, when your browser loads the .js file, your webserver considers this as a "normal" file. It will then read the file and return it straight to the client, without passing it to the PHP software first. Therefore, nothing will be executed or interpreted, and you will simply see all the text in the file.

Now assume you put PHP code in your .js file. It wasn't executed, and therefore the PHP code will still be present when your browser receives the response from the webserver. Your browser will then try to parse and execute the javascript in the file, but your <?php tag isn't valid javascript. Therefore, attempting to execute this file will cause errors in your browser console.

You can configure which extensions should be treated as PHP code in your webserver config. For Apache this is done through addHandler , while for nginx this can be done through location directives . I would strongly advice against changing this to treat javascript as PHP, as your javascript files aren't supposed to contain PHP code. If you want to pass something to a variable, just do it in the HTML code generated by the PHP file.