在javascript中结合php（未捕获的语法错误：无效或意外的令牌）

Question

Currently, I want to retrieve data from the database by putting the php code in the javascript. The javascript will have the form detail to ask user and one of the detail will require the data from the database.But the console prompt the error

Uncaught SyntaxError: Invalid or unexpected token

google.maps.event.addListener(marker,'click', function(event) {
                    //Edit form to be displayed with new marker
            infowindow.close();
            marker.setVisible(false);

            <?php

            ?>

                    var EditForm = '<p><div id="infowindow-content" class="marker-edit">'+
                    '<form action="ajax-save.php" method="POST" name="SaveMarker" id="SaveMarker">'+
                    '<label for="pName"><span>Place Name :</span><input type="text" name="pName" class="save-name" placeholder="Enter Title" maxlength="40" /></label>'+
                    '<label for="pDesc"><span>Description :</span><textarea name="pDesc" class="save-desc" value="place-address" maxlength="150"></textarea></label>'+'
                    <?php
            $db_username = 'root';
            $db_password = '';
            $db_name = 'mss';
            $db_host = 'localhost';
            $sql = "SELECT* FROM vendor";
            $result = mysqli_query($conn, $sql);
            while($row1=mysqli_fetch_assoc($result))
            {
             echo '<label for="pType"><span>Type :</span> <select name="pType" class="save-type"><option value ="'.$row1["vendorid"].'">"'.$row1["vendorid"].'"</option>';
            }   
    ?>'+
                    '</form>'+
                    '</div></p><button name="save-marker" class="save-marker">Save Marker Details</button>';

                    //Drop a new Marker with our Edit Form
                    create_marker(event.latLng, 'New Marker', EditForm, true, true, true, "pin_green.png", "");
                });   
          }

Answer 1

This error could be because of the PHP variable usage within the script tag without using the php tag. If you want to use PHP variable inside the script, you must use "<?php ?>"; .

For example, say you want to use php variable, $str = "My Name"; Then it will be:

<script>
   var name = "<?php echo $str; ?>";
</script>

Hope it solves the issue.

Answer 2

Without seeing where your PHP tags start and the complete script, it's difficult to pin-point everything that may be going wrong, but there are a few things you can do to isolate and locate the error provided in the console. Here are some suggestions:

Remove your PHP blocks and check if you still have an uncaught syntax error .

 google.maps.event.addListener(marker,'click', function(event) { //Edit form to be displayed with new marker infowindow.close(); marker.setVisible(false); var EditForm = '<p><div id="infowindow-content" class="marker-edit">'+ '<form action="ajax-save.php" method="POST" name="SaveMarker" id="SaveMarker">'+ '<label for="pName"><span>Place Name :</span><input type="text" name="pName" class="save-name" placeholder="Enter Title" maxlength="40" /></label>'+ '<label for="pDesc"><span>Description :</span><textarea name="pDesc" class="save-desc" value="place-address" maxlength="150"></textarea></label>'+''+'</form>'+ '</div></p><button name="save-marker" class="save-marker">Save Marker Details</button>'; //Drop a new Marker with our Edit Form create_marker(event.latLng, 'New Marker', EditForm, true, true, true, "pin_green.png", ""); }); }

Assuming you shared the complete JavaScript block in your response, you have an extra curly bracket at the end, after your addListener method and anonymous function. How would you spot that error on your own? If you open the code inspector or DevTools on Chrome (there's also an equivalent on Firefox), you'll notice that there are line numbers next to the error messages .

If you select the line numbers, it will take you to the line that is causing the syntax error on your script, so you can better identify it. For more information on how to use Chrome DevTools, refer to the following link: https://developers.google.com/web/tools/chrome-devtools/javascript/

If you use Firefox, here is their console debugging documentation: https://developer.mozilla.org/en-US/docs/Tools/Browser_Console

I hope that helps!

SIDE NOTE : Also, as pointed out by Aluan Haddad, your solution is very inelegant and does not apply a design principle called "separation of concerns." You really should look into separating your HTML from your JavaScript and making calls to a separate PHP script by the use of AJAX. This article should be a good starting point for you to look into how to implement that interaction in your code: https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript