Proper method of including PHP inside of Javascript code

Question

I'm trying to add some dynamic rows with a press of a button. The example I was working with was working fine, but for some reason i think the way i use PHP inside of Javascript is breaking everything. And i keep getting this error on the console.

Uncaught SyntaxError: Unexpected identifier

Here is my HTML code and the js code. Is there way to fix this issue?

<table class="table table-bordered" id="orderItems2">
                    <thead>
                        <tr>
                            <th>Product Code</th>
                            <th>WSP</th>
                            <th>Margin</th>
                            <th>DP</th>
                            <th>Std Bonus</th>
                            <th>Min Qty</th>
                            <th>Spcl Bonus</th>
                            <th>Case Size</th>
                            <th>Cases</th>
                            <th>Qty</th>
                            <th>Free Issues</th>
                            <th>Total</th>
                            <th>Current Qty</th>
                            <th>Stock Value</th>
                        </tr>
                    </thead>
</table>

This is the static row i have and i'm trying to create these row's when i press the add button.

 <tr class="distributorItemDetails">
                            <td>
                                <div class="form-group">
                                    <select class="item-details form-control select2" name="items[1][product_code]" style="width: 100%;">
                                        <option selected="selected" value="" required>Select Product</option>
                                        <?php foreach ($products as $product):?>
                                            <option 
                                                data-wholesaleprice="<?= h($product->whole_sale_price)?>" 
                                                data-distributormargin="<?= h($product->distributor_margin)?>" 
                                                data-stdbonus="<?= h($product->standard_bonus_minimum_qty.":".$product->standard_bonus_free_issues)?>"
                                                data-standard_bonus_minimum_qty="<?= h($product->standard_bonus_minimum_qty)?>"
                                                data-standard_bonus_free_issues="<?= h($product->standard_bonus_free_issues)?>"
                                                data-minqty="<?= h($product->minimum_qty_to_apply_special_bonus)?>" 
                                                data-scplbonus="<?= h($product->special_bonus_minimum_qty.":".$product->special_bonus_free_issues)?>" 
                                                data-special_bonus_minimum_qty="<?= h($product->special_bonus_minimum_qty)?>" 
                                                data-special_bonus_free_issues="<?= h($product->special_bonus_free_issues)?>" 
                                                data-casesize="<?= h($product->case_size)?>"
                                                value="<?= h($product->product_code)?>" required><?= h($product->product_code)?>
                                            </option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                            </td>
                            <td>
                                <div class="form-group">
                                    <input type="number" class="form-control val-wholesaleprice" name="items[1][wholesale_price]" required min="0" step="any" readonly>
                                </div>
                            </td>
                            <td>
                                <div class="form-group">
                                    <input type="number" class="form-control val-distributormargin" name="items[1][distributor_margin]" required min="0" step="any" readonly>
                                </div>
                            </td>
                            <td>
                                <div class="form-group">
                                    <input type="number" class="form-control val-distributorprice" name="items[1][distributor_price]" readonly>
                                </div>
                            </td>
                            <td>
                                <div class="form-group">
                                    <input type="text" class="form-control val-sb" name="items[1][standard_bonus]" readonly>
                                </div>
                            </td>
                            <td>
                                <div class="form-group">
                                    <input type="number" class="form-control val-minqty" name="items[1][min_qty]" readonly>
                                </div>
                            </td>
                            <td>
                                <div class="form-group">
                                    <input type="text" class="form-control val-scplbonus" name="items[1][special_bonus]" readonly>
                                </div>
                            </td>
                            <td>
                                <div class="form-group">
                                    <input type="number" class="form-control val-casesize" name="items[1][case_size]" readonly>
                                </div>
                            </td>
                            <td>
                                <div class="form-group">
                                    <input type="number" class="form-control val-noofcases" name="items[1][no_of_cases]">
                                </div>
                            </td>
                            <td>
                                <div class="form-group">
                                    <input type="number" class="form-control val-totalqty" name="items[1][total_qty]" readonly>
                                </div>
                            </td>
                            <td>
                                <div class="form-group">
                                    <input type="number" class="form-control val-freeissues" name="items[1][total_free_issues]" readonly>
                                </div>
                            </td>
                            <td>
                                <div class="form-group">
                                    <input type="number" class="form-control val-totalprice" name="items[1][total_value]" readonly>
                                </div>
                            </td>
                            <td>
                                <div class="form-group">
                                    <input type="number" class="form-control val-currentqty" name="items[1][balance_stock]">
                                </div>
                            </td>
                            <td>
                                <div class="form-group">
                                    <input type="number" class="form-control val-stockvalue" name="items[1][stock_value]" readonly>
                                </div>
                            </td>
                        </tr>

HTML Button that is suppose to add a new row

<a class="btn btn-primary addNewRow" id="addtwo" ><i class="fa fa-plus"></i></a>

JS and the PHP script i have.

<script>
var count=1;
$("#addtwo").click(function(){
    var html="<tr class='distributorItemDetails'><td><div class='form-group'><select class='item-details form-control select2' name='items["+count+"][product_code]' style='width: 100%;'><option selected='selected' required>Select Product</option>"<?php foreach ($products as $product):?>" <option data-wholesaleprice="<?= h($product->whole_sale_price)?>" data-distributormargin="<?= h($product->distributor_margin)?>" data-stdbonus="<?= h($product->standard_bonus_minimum_qty."':'".$product->standard_bonus_free_issues)?>" data-standard_bonus_minimum_qty="<?= h($product->standard_bonus_minimum_qty)?>" data-standard_bonus_free_issues="<?= h($product->standard_bonus_free_issues)?>" data-minqty="<?= h($product->minimum_qty_to_apply_special_bonus)?>" data-scplbonus="<?= h($product->special_bonus_minimum_qty."':'".$product->special_bonus_free_issues)?>" data-special_bonus_minimum_qty="<?= h($product->special_bonus_minimum_qty)?>" data-special_bonus_free_issues="<?= h($product->special_bonus_free_issues)?>" data-casesize="<?= h($product->case_size)?>" value="<?= h($product->product_code)?>" required>"<?= h($product->product_code)?>"</option>"<?php endforeach; ?>"'</select></div></td><div class='form-group'><input type='number' class='form-control val-wholesaleprice' name='items["+count+"][wholesale_price]' required min='0' step='any' readonly></div></td><td><div class='form-group'><input type='number' class='form-control val-distributormargin' name='items["+count+"][distributor_margin]' required min='0' step='any' readonly></div></td><td><div class='form-grou'><input type='number' class='form-control val-distributorprice' name='items["+count+"][distributor_price]' readonly></div></td><td><div class='form-group'><input type='text' class='form-control val-sb' name='items["+count+"][standard_bonus]' readonly></div></td><td><div class='form-group'><input type='number' class='form-control val-minqty' name='items["+count+"][min_qty]' readonly></div></td><td><div class='form-group'><input type='text' class='form-control val-scplbonus' name='items["+count+"][special_bonus]' readonly></div></td><td><div class='form-group'><input type='number' class='form-control val-casesize' name='items["+count+"][case_size]' readonly></div></td><td><div class="form-group"><input type='number' class='form-control val-noofcases' name='items["+count+"][no_of_cases]'></div></td><td><div class='form-group'><input type='number' class='form-control val-totalqty' name='items["+count+"][total_qty]' readonly></div></td><td><div class='form-group'><input type='number' class='form-control val-freeissues' name='items["+count+"][total_free_issues]' readonly></div></td><td><div class='form-group'><input type='number' class='form-control val-totalprice' name='items["+count+"][total_value]' readonly></div></td><td><div class='form-group'><input type='number' class='form-control val-currentqty' name='items["+count+"][balance_stock]'></div></td><td><div class='form-group'><input type='number' class='form-control val-stockvalue' name='items["+count+"][stock_value]' readonly></div></td></tr>";

    $("#orderItems2").append(html);
    count++;
});

format your code fine. In your JS script you have just one single line which is extremely long and hard to read — quirimmo, Jan 08 '19 at 07:21
Just to be really sure here... is that javascript code snippet processed by php at all, before being delivered to the client (browser)? In other words: you _are_ aware that you can _not_ embed and execute `php` code within `javascript`? — arkascha, Jan 08 '19 at 07:23
@arkascha — You can embed and execute PHP inside JavaScript. You can embed and execute PHP inside *any* text stream. — Quentin, Jan 08 '19 at 07:25
Hi this is discussed on https://stackoverflow.com/questions/3352576/how-do-i-embed-php-code-in-javascript — Shashank Malviya, Jan 08 '19 at 07:26
@CertainPerformance the code is too long to copy paste here. It duplicates like this - https://i.imgur.com/lCTRINC.png — Kasun Wijesekara, Jan 08 '19 at 07:29
@arkascha At the moment it's not entirely clear whether OP's trying to *execute* PHP from inside JS (obviously wrong) or to *print text from PHP* to his JS (inelegant, but fine if the syntax is handled properly) — CertainPerformance, Jan 08 '19 at 07:29
@KasunWijesekara Can't really debug an *image* easily without the text. Look up which column number is throwing the error, and then look at the JS around there. — CertainPerformance, Jan 08 '19 at 07:31
@arkascha wait i'll edit my code to show what kind of a dynamic row i'm trying to get. So basically the row has a dropdown which fetches data according to the dropdown option. I'm gonna add the code to the default row i'm trying to generate. — Kasun Wijesekara, Jan 08 '19 at 07:31
Check now i edited the question. So the code snippet i added there is the static rows i have on the application. I need to get more of these rows when i click on a button. — Kasun Wijesekara, Jan 08 '19 at 07:34
@CertainPerformance Sure, that is the question, which is exactly what I tried to find out with my comment. — arkascha, Jan 08 '19 at 07:34
You did not answer to my initial question. To me this somehow looks like you are trying to execute `php` from within `javascript`. Which won't work. — arkascha, Jan 08 '19 at 07:36
@arkascha yes i'm trying to do that. I'll check the pinned thread and find another way. Thanks for your help guys! — Kasun Wijesekara, Jan 08 '19 at 07:39
@Quentin Yes you are right from a formal standpoint. I tried to find out if the OP has the obvious issue of placing the literal php code inside the javascript to be executed on the client side or if that php code is to be processed while delivering the code to the client where the javascript is to be executed. I thought that was clear from my question. I only tried to express my feeling that the way you phrased your correction does not help the OP considering that most likely he does not have years of experience. Sorry if I phrased my reaction wrong and put you off. — arkascha, Jan 08 '19 at 07:39

Proper method of including PHP inside of Javascript code

0 Answers0