How do I output PHP/SQL results from HTML/AJAX

Question

If I call the .php file directly it works great, so I believe the error is in how I am displaying the AJAX result. I am new to AJAX. I have a form that the user can select dates to search on, etc and I would like to results to be displayed when returned.

$("#searchForm").on("submit", function (event) {
    event.preventDefault();

    $.ajax({
        type: "POST",
        url: "searchnow.php",
        data: $('#searchForm').serialize(),
        success : function (output) {
            console.log(output);
        }
    });
});


searchnow.php
 <div id="output">
   <div class="container-fluid">
    <div class='features'>
        <?php
        include ("config.php");
        $con = mysql_connect($server, $user, $password) or die('Sorry, could not connect to database server');
        mysql_select_db($database, $con) or die('Sorry, could not connect to database');

        $query = "SELECT * FROM hsevents WHERE 
            CURDATE()<=enddate AND 
            verified='Y' 
            ORDER BY location";

        $result = mysql_query($query) or die('Sorry, could not access the database at this time ');
        $SPACES = "</br><b>Description:</b>&nbsp;";

        if (mysql_num_rows($result) == 0)
        {
            echo "<h3>Sorry, there are no classes or events that meet your criteria.</h3>";
        } 
        else
        {
            $i = 1;
            while($row=mysql_fetch_array($result, MYSQL_ASSOC))
            {
                $unique = 'unique' . $i;
                $tempname=htmlentities($row[name]);
                $tempcontact=htmlentities($row[contact]);                   
                $tempbegdate = date("m-d-Y", strtotime($row[startdate]));
                $tempenddate = date("m-d-Y", strtotime($row[enddate]));


                ob_start();
                if ( ($i%4) === 0) {
                    echo "<div class='row row-padded row-bordered row-centered'>";
                }

                echo "
                <div class='col-md-3'> 
                    <div class='panel'>
                        <div class='panel-heading'>
                            <img src='images/$row[category]' class='img-responsive img-thumbnail img-hsb'>
                        </div>
                        <div class='panel-body text-center'>
                            $tempname</br>
                            Start Date: $tempbegdate</br>
                            End Date: $tempenddate</br>
                            Location: $row[location]</br>
                            Age Range: $row[lowerage] - $row[upperage]</br>
                            Contact: <a href=$tempcontact>$tempcontact</a></br>
                            <div id='$unique' class='collapse collapse-hsb'>
                                $tempdescription
                            </div>
                        </div>
                    </div>                          
                </div>
                ";

                if ( ($i%4) === 0) {
                    echo "</div>";
                }

                $classdata = ob_get_contents();
                ob_end_clean();
                ?>
                <?php echo $classdata ?>
                <?php
                    $i++;
            }   

            $classdata = ob_get_contents();
            ob_end_clean();
            echo $classdata;
        }
        ?>

    </div>
</div>
</div>

Answer 1

You just need to provide the DIV or any Selector inside the success function, to replace the DIV or selector html with the AJAX success output. Here i used #MyDivId which should be your html element in which you need to print the AJAX output.

 $("#searchForm").on("submit", function (event) {
    event.preventDefault();

$.ajax({
    type: "POST",
    url: "searchnow.php",
    data: $('#searchForm').serialize(),
    success : function (output) {
        output = output.trim(); // Trim's unwanted white space around the output
        if (output != "") {
            $("#MyDivId").html(output); // This Adds the AJAX output inside #MyDivId
        }
    }
});

});