PHP Inside JavaScript - Quotes Issue?

Question

Good afternoon,

I've been looking around for info on this and have come up dry. The idea is to have a form that uses select boxes to display info from a mysql database. This is mainly done with html/php, but I have added JavaScript functionality that allows a user to press a button to create an additional array of selects to indicate additional products. The problem I am currently facing is that I cannot seem to get the php to work inside of the JS innerHTML.

order-add.php

<script src="/js/addProduct.js" language="Javascript" type="text/javascript"></script>

    <tr>
        <td>Product(s)</td>
        <td><div id="dynamicInput">
            <select name="orders_product[]">
                <option value="">Select One</option>
                <?php
                        $orders_product_query = $conn->prepare("SELECT product_name FROM product");
                        $orders_product_query->execute();
                        $orders_product_query->bind_result($orders_product_result);
                        while ($orders_product_query->fetch()) {
                            echo "<option value = '$orders_product_result'>$orders_product_result</option>";
                        }
                        $orders_product_query->close();
                ?>
            </select>
            </div>
            <input type="button" value="Add product" onClick="addInput('dynamicInput');">
        </td>
    </tr>

addProduct.js

var counter = 1;
var limit = 10;
function addInput(divName) {
if (counter == limit) {
    alert("You have reached the limit of adding " + counter + " products.");
} else {
    var newdiv = document.createElement('div');
    newdiv.innerHTML = "
        <select name='orders_product[]'>
        <option value=''>Select One</option>
        <?php
            $orders_product_query = $conn->prepare('SELECT product_name FROM product');
            $orders_product_query->execute();
            $orders_product_query->bind_result($orders_product_result);
            while ($orders_product_query->fetch()) {
                echo 'test';
            }
            $orders_product_query->close();
        ?>
        </select>";
    document.getElementById(divName).appendChild(newdiv);
    counter++;
    }
}

With all of the testing I've been trying to run on this, it appears that the issue is with the newdiv.innerHTML portion of the addProduct.js. I'm thinking that it is not accepting php, but it also could be that I have the inner quotes somehow messed up.

Thanks in advance for your help!

Answer 1

I think you are not understanding how this works. PHP code is executed when the client requests the page on the server side. JS is executed on the client side. There is no PHP interpreter on the web browser. What you could do is putting the PHP code in a separate file (Example: fragment.php) and calling it through AJAX. In that case your code will be executed in the server.

I hope this helps!

Answer 2

Is addProduct.js included as a tag? If so, take a look in your developer tools. This is probably showing exactly as you have it posted here, with the php tag as part of the text. You'll need to change the extension of this file to .php and change it in the script tag as well to get php to parse the file.

Alternatively, you can try somethign like what @NMO suggested, and retrieve this via AJAX.