Reference: Why does the PHP (or other server side) code in my Javascript not work?

68 down vote accepted

Your code is split into two entirely separate parts, the server side and the client side.

                    |
               ---------->
              HTTP request
                    |
+--------------+    |    +--------------+
|              |    |    |              |
|    browser   |    |    |  web  server |
| (Javascript) |    |    |  (PHP etc.)  |
|              |    |    |              |
+--------------+    |    +--------------+
                    |
  client side       |      server side
                    |
               <----------
          HTML, CSS, Javascript
                    |

The two sides communicate via HTTP requests and responses. PHP is executed on the server and outputs some HTML and maybe Javascript code which is sent as response to the client where the HTML is interpreted and the Javascript is executed. Once PHP has finished outputting the response, the script ends and nothing will happen on the server until a new HTTP request comes in.
The example code executes like this:

<script type="text/javascript">
    var foo = 'bar';
    <?php
        file_put_contents('foo.txt', ' + foo + ');
    ?>

    var baz = <?php echo 42; ?>;
    alert(baz);
</script>

Step 1, PHP executes all code between <?php ?> tags. The result is this:

<script type="text/javascript">
    var foo = 'bar';

    var baz = 42;
    alert(baz);
</script>

The file_put_contents call did not result in anything, it just wrote " + foo + " into a file. The <?php echo 42; ?> call resulted in the output "42", which is now in the spot where that code used to be.
This resulting HTML/Javascript code is now sent to the client, where it gets evaluated. The alert call works, while the foo variable is not used anywhere.
All PHP code is executed on the server before the client even starts executing any of the Javascript. There's no PHP code left in the response that Javascript could interact with.
To call some PHP code, the client will have to send a new HTTP request to the server. This can happen using one of three possible methods:

1. A link, which causes the browser to load a new page.
2. A form submission, which submits data to the server and loads a new page.
3. An AJAXrequest, which is a Javascript technique to make a regular HTTP request to the server (like 1. and 2. will), but without leaving the current page.

You can also use Javascript to make the browser open a new page using window.location or submit a form, emulating possibilities 1. and 2.

Posted in: javascript