I have this code below where it will populate a table based on the drop down list. code is working fine.

only 1 problem

i would like when user open the page index.php All data from meeting_places table will be displayed and
only when the user select an option from the drop down menu the selected data will be displayed

right now it will only display data when there is option selected in the drop down menu

any help will be appreciated. Thank you

Click image for larger version.  Name: data.jpg  Views: 437  Size: 11.4 KB  ID: 5476

index.php
PHP Code:
<?php
  # Connect
  mysql_connect('localhost', 'root', '') or die('Could not connect: ' . mysql_error());
   
  # Choose a database
  mysql_select_db('meeting') or die('Could not select database');
   
  # Perform database query
  $query = "SELECT * from meeting_places";
  $result = mysql_query($query) or die('Query failed: ' . mysql_error());
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8">
    <title>Select - onchange AJAX example</title>
  </head>

  <body>
    <label for="meetingPlace">Meeting place: </label>
    <select id="meetingPlace">
      <option value="0">Please select</option>
      
      <?php
     
        while ($row = mysql_fetch_assoc($result)) {
            echo '<option value="' . $row['id'] . '">' . $row['MeetingPlace'] . '</option>';
        }
        ?>
        <a href="index.php">
        <input type="submit" value="SHOW ALL">
        </a>
      
    </select>

    <br /><br />
    <table border='1'>
<tr>
<th>ID</th>
<th>Meeting Place</th>
<th>Street Address</th>
<th>City</th>
<th>State</th>
<th>ZipCode</th>
</tr>
<tr>
<td> <input id="element_5_1" name="element_5_1" class="element text large" type="text"></td>
<td> <input id="element_5_2" name="element_5_2" class="element text large" type="text"></td>
<td>    <input id="element_5_3" name="element_5_3" class="element text large" type="text"> </td>
<td>  <input id="element_5_4" name="element_5_4" class="element text medium" style="width:14em" type="text"></td>
<td> <input id="element_5_5" name="element_5_5" class="element text medium" style="width:4em" type="text"> </td>
<td> <input id="element_5_6" name="element_5_6" class="element text medium" style="width:6em" type="text"></td>

</tr>
</table>

    <br /><br />

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
      function insertResults(json){
       $("#element_5_1").val(json["id"]);
          $("#element_5_2").val(json["MeetingPlace"]);
        $("#element_5_3").val(json["StreetAddress"]);
        $("#element_5_4").val(json["City"]);
        $("#element_5_5").val(json["State"]);
        $("#element_5_6").val(json["ZipCode"]);
    
      }

      function clearForm(){
        $("#element_5_1, #element_5_3, #element_5_4, #element_5_5,#element_5_6,#element_5_7").val("");
      }

      function makeAjaxRequest(placeId){
        $.ajax({
          type: "POST",
          data: { placeId: placeId },
          dataType: "json", 
          url: "process_ajax.php",
          success: function(json) {
            insertResults(json);
          }
        });
      }

      $("#meetingPlace").on("change", function(){
        var id = $(this).val();
        if (id === "0"){
          clearForm();
        } else {
          makeAjaxRequest(id);
        }
      });
    </script>
  </body>
</html>

process_ajax.php
PHP Code:
<?php
  mysql_connect('localhost', 'root', '') or die('Could not connect: ' . mysql_error());
  mysql_select_db('meeting') or die('Could not select database');
   
  $placeId = $_POST['placeId'];

  $query = "SELECT * from meeting_places";
  $result = mysql_query($query) or die('Query failed: ' . mysql_error());
  while ($row = mysql_fetch_assoc($result)) {
    if ($placeId == $row['id']){
      echo json_encode($row);
    
    }
  }
  
  
?>