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!

nmomn · Accepted Answer · 2015-11-23 20:05:43Z

4

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!

answered Nov 23, 2015 at 20:05

nmomn

2751 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user4406723 Over a year ago

Thanks for the response, NMO! I've never worked with AJAX before so I am trying to go through and figure out how this might work. For the basics - would there be a AJAX get function in the middle of the .js newdiv.innerHTML to pull the fragment.php and execute it? I'm confused as to how this would work.

nmomn Over a year ago

@Xerakon what you could do is calling through AJAX this new page that contains your PHP code (This will execute your code on the server side), then retrieving the output and paste it inside the desired DIV. In the link I put there is an example that perfectly suits your needs. Try reading it and if you have any other doubt do not hesitate on messaging me. Greetings

neilsimp1 · Accepted Answer · 2015-11-23 20:07:20Z

0

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.

answered Nov 23, 2015 at 20:07

neilsimp1

1,2791 gold badge12 silver badges25 bronze badges

Collectives™ on Stack Overflow

PHP Inside JavaScript - Quotes Issue?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related