How to print JavaScript with PHP

Question

I need to pass some JS variable to PHP and am having some trouble.

I have tried the following:

$product_id = \"

        

Answer 1

JavaScript runs on the client side while PHP runs on the server. They execute at completely different times in the page lifecycle, so they cannot communicate in the manner you have used.

Instead you could to use AJAX to send a value in JS to a PHP page.

Answer 2

By doing it your way, it's just impossible. PHP can't "read" or "interact with" javascript directly in the same page.

You have to understand that PHP is a preprocessor, it generates HTML on the server, then the generated page is sent to the client. In this page, the PHP code has entirely disappeared. You can only see what it generated (that is, HTML or JS). Then, the javascript code runs, and it has no idea it was generated using PHP, and no idea of PHP's presence whatsoever.

In order to pass variables to a PHP script, you have to call the file with GET or POST methods :

(JS)

$.get( 'myScript.php', { // This is calling the PHP file, passing variables (use get or post)
     variable1 : "Hello",
     variable2 : "world!"
   }, function(data){ // PHP will then send back the response as "data"
      alert(data); // will alert "Hello world!"
});

(myScript.php)

    $variable1 = $_GET['variable1']; // or POST if you're using post
    $variable2 = $_GET['variable2'];

    echo $variable1 . " " . $variable2; // Concatenates as "Hello world!" and prints it out.
//The result of the PHP file is sent back to Javascript when it's done.

Of course, this is a very basic example. Never read and use directly what is sent to PHP (as I just did), because anyone could inject whatever they'd want. Add securities.

Answer 3

Thanks for the assistance, very much appreciated! I have managed to get it done by using ajax as suggested:

<script type="text/javascript">
jQuery("document").ready(function(){
    var $ = jQuery
    $("form").submit(function(){
        var data = "";
        data = $(this).serialize() + "&" + $.param(data);
        var prod_id_one =   $('#prod1').val();
        var prod_id_two =   $('#prod2').val();
        var prod_id_three = $('#prod3').val();
        var prod_id_four =  $('#prod4').val();

        $.ajax({
            type: "GET",
            url: "my_ajax_url_here", 
            data: data,
            success: function(data){ 
                window.location = "price-calculator?width="+ $('#wpti-product-x').val() + "&height=" +  $('#wpti-product-y').val() + "&id1=" + prod_id_one + "&id2=" + prod_id_two + "&id3=" + prod_id_three + "&id4=" + prod_id_four;
            }
        });
        return false;
    });
});
</script> 

It is now working with the above code. Thanks again!