Display results of mysql query in a predefined div using a function

Question

I am fairly new to PHP and I am practicing stuff. I have a table in mySQL and I wish to take the query output (which is going to be in four columns) and print it to a div i have defined in my webpage. I have included the findInstructor.php page in the webpage and this is what I have to do. I know the approach but I have been unable to code it.

<?php

if(isset($_POST['discipline']) && isset($_POST['location']) && isset($_POST['startDate']) 
&& isset($_POST['endDate']) && isset($_POST['level']) 
&& isset($_POST['name']) && isset($_POST['email']) && isset($_POST['age']) )
{
    $discipline = $_POST["discipline"];
    $location = $_POST["location"];
    $startDate = $_POST["startDate"];
    $endDate = $_POST["endDate"];
    $level= $_POST["level"];
    $name = $_POST["name"];
    $email = $_POST["email"];
    $age= $_POST["age"];
    $comments = $_POST["comments"];
    $comments = $_POST["details"];
    $specialty = $_POST["specialty"];
    $rating = $_POST["rating"];


}

if(!empty($discipline) && !empty($location) && !empty($startDate) && !empty($endDate)  
    && !empty($name)&& !empty($email) && !empty($age)){

    function getUserField($firstname, $rating, $location, $specialty){

    $query = "SELECT `instructor_first_name`,`instructor_rating`, `instructor_location`,`instructor_specialty`\n"
. "FROM `instructor` \n"
. "WHERE `instructor_location` LIKE \'$location\'\n"
. "AND `instructor_course_id` LIKE \'$discipline\'\n"
. "AND `instructor_specialty` LIKE \'$specialty\'\n"
. "AND `instructor_ability_level` LIKE \'$level\'\n"
. "AND `instructor_rating` >= $rating";

$result = mysql_query($query);


$num_rows = mysql_num_rows($result);

return mysql_result($result, 0,$firstname, $rating, $location, $specialty);


    }
}
?>

and the div in which I want to add the results vaguely looks like this:

<fieldset style="padding:2.5em 6em;">
                <div class="col col-10">
                    <div class="instructor_box">
                        <div class="dp"><img src="../Pictures/1.jpg"/></div>
                        <div class="name">Instructor</div>
                        <div class="info">
                            <div class="info1">
                                Level : <br/> Discipline : <br/> Location : 
                            </div>

                            <div class="info3">
                                Skiing <br/> California, CA <br/> ABC Cerfitified
                            </div>
                            <div class="info4">
                                <button type="button" class="button" onclick="">Contact</button>
                            </div>
                            <div style="clear:both;"></div>
                        </div>


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

I know this looks very VERY bad. But I really want someone to help me out. Also, I would like the result displayed in the div using ajax. Could you please spend some time and tell me where am I going wrong ?

Thanks for your time. :)

Answer 1

ok, step by step:
first: don't use mysql any longer - it's deprecated and won't be supported by new php versions in near future. use mysqli instead. it's almost as easy as mysql. see php.net for all info about mysqli.

second: how to display results on html page?
let's start from here (classic 'non-ajax'-manner):

$num_rows = mysql_num_rows($result);  
//now you take out the rows:  
while($row = mysql_fetch_assoc($result) {  
  $instructor_first_name = $row['instructor_first_name'];  
  $instructor_rating = $row['instructor_rating'];  
  // ... and so on for each column of your dataset  
  // print html - I chose a simple example just to show the principle:  
  print '<p>'.htmlspecialchars($instructor_first_name).'</p>';  
  print '<p>'.htmlspecialchars($instructor_rating).'</p>';  
}     

next: ajax.
do you exactly know how ajax works? are xmlhttprequest and json well known words to you? if not, you have to learn about it: the principle: you 'trigger' a http request via javascript by having js 'ask' the server for some data. the server sends the data, for example as json-coded string. your client receives the json, eval's it and puts 'the things' (element nodes and text nodes) in the DOM. that's too long to explain in detail in just one post.