Combining php in javascript (Uncaught SyntaxError: Invalid or unexpected token)

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", "");
                });   
          }

There is a quote problem at the end of the assignment to EditForm. That + ' looks wrong. — trincot
– trincot, Commented Feb 2, 2018 at 23:14
You seem to be thinking that PHP code can execute as part of JavaScript code. That is not true. The PHP code does not go to the browser. Look into Ajax. — trincot
– trincot, Commented Feb 2, 2018 at 23:17
You are combining PHP, HTML, JavaScript, SQL, and HTML. Just stop. — Aluan Haddad
– Aluan Haddad, Commented Feb 2, 2018 at 23:17
Is there another way that i can get the data from the database and use it with the javascript? — Aiman Migo
– Aiman Migo, Commented Feb 2, 2018 at 23:27
Agree with all of the above you should rethink your code but to make it work loose the ' as mentioned on the last line of EditForm js var before the opening <?php and change your echo to: echo '\'<label for="pType"><span>Type :</span> <select name="pType" class="save-type"><option value="'.$row1["vendorid"].'">'.$row1["vendorid"].'</option>\'+'; — futureweb
– futureweb, Commented Feb 2, 2018 at 23:29

thaiscmky · Accepted Answer · 2018-02-05 05:54:27Z

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

Sadiq · Accepted Answer · 2020-05-10 08:11:03Z

2

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.

answered May 10, 2020 at 8:11

Sadiq

3352 silver badges10 bronze badges

Collectives™ on Stack Overflow

Combining php in javascript (Uncaught SyntaxError: Invalid or unexpected token)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related