Javascript and PHP in one file (form handling and XMLHTTPRequest)

I am confused about my homework requirements: we need to put JS, HTML and PHP code in the same file xxx.php.

There is a form in the HTML, and once I submit the form, I need to send a request (XMLHTTPRequest) to myPHP.php with the form inputs (using POST to transfer the form data PHP). The PHP file will retrieve the form inputs, reformat it to the syntax of the API and send it to the Google API to get JSON object.

I am a beginner of PHP and JS, and I don't know how to combine them in the same file and do the homework based on the requirements. Like, how to send the JSON object obtained in PHP to Javascript.

Here is framework of my code (myPHP.php):

<html>
<head>

    <script type="text/javascript">

        // show the result
        function show() {
            var xmlhttpreq = new XMLHttpRequest();
           
            var keyword = document.getElementById("keyword").value;
            var post_data = "keyword=" + keyword;

            xmlhttpreq.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    var jsonObj = JSON.parse(this.responseText);
                    createTable(jsonObj);
                }
            };

            xmlhttpreq.open("POST", "myPHP.php", true);
            xmlhttpreq.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xmlhttpreq.send(post_data);
        }

        function createTable(object) {
            var out = "xxx";
            document.getElementById("display").innerHTML = out;
        }
    </script>
</head>
<body>
<div id="display"></div>

<form action="myPHP.php" name="myForm" method="POST">
    <b>Keyword </b><input type="text" id="keyword" name="keyword">
    <br>
    
    <button type="submit" onclick="show()" name="search">Search</button>
</form>


<?php
if (isset($_POST["search"])) {
    // extract the form data
    $keyword = $_POST["keyword"];

    // geocode the address
    $location = urlencode($location);
    // google map geocode api url
    $url = "xxxxxxxx";
    $res_json = file_get_contents($url);
    echo $res_json;
}
?>

</body>
</html>

Solution

You can try something like this:

<?php
if (isset($_POST["search"])) {
    // extract the form data
    $keyword = $_POST["keyword"];

    // geocode the address
    $location = urlencode($location);
    // google map geocode api url
    $url = "xxxxxxxx";
    echo file_get_contents($url);
} else {
    echo '<html>
    <head>
        <script type="text/javascript">
            // show the result
            function show() {
                var xmlhttpreq = new XMLHttpRequest();

                var keyword = document.getElementById("keyword").value;
                var post_data = "keyword=" + keyword;

                xmlhttpreq.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) {
                        var jsonObj = JSON.parse(this.responseText);
                        createTable(jsonObj);
                    }
                };

                xmlhttpreq.open("POST", "myPHP.php", true);
                xmlhttpreq.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                xmlhttpreq.send(post_data);
            }

            function createTable(object) {
                var out = "xxx";
                document.getElementById("display").innerHTML = out;
            }
        </script>
    </head>

    <body>
        <div id="display">
            <?php echo $result; ?>
        </div>

        <form action="myPHP.php" name="myForm" method="POST">
            <b>Keyword </b><input type="text" id="keyword" name="keyword">
            <br>

            <button type="submit" onclick="show()" name="search">Search</button>
        </form>
    </body>
    </html>';
}
?>