Dependent dropdown getting ids not name - php

Question

I am trying to get user selection from php form but instead of name I am getting id of elements. instead of ids I want to get names. Please help
here is the url
http://efinancec.com/d/drop4/index.php
and here is the code
<form action="../form/form1.php" method="post" enctype="multipart/form-data">
<div class="frmDronpDown">
<div class="row">
<label>Training:</label><br/>
<select name="training" id="training-list" class="demoInputBox" onChange="getCourse(this.value);">
<option value="">Select Training</option>
<?php
foreach($results as $training) {
?>
<option value="<?php echo $training["id"]; ?>"><?php echo $training["training"]; ?></option>
<?php
}
?>
</select>
</div>
<div class="row">
<label>Course:</label><br/>
<select name="course" id="course-list" class="demoInputBox" onChange="getCountry(this.value);">
<option value="">Select Course</option>
</select>
</div>
<div class="row">
<label>Country:</label><br/>
<select name="country" id="country-list" class="demoInputBox" onChange="getCity(this.value);">
<option value="">Select Country</option>
</select>
</div>
<div class="row">
<label>City:</label><br/>
<select name="city" id="city-list" class="demoInputBox" onChange="getDates(this.value);">
<option value="">Select City</option>
</select>
</div>
<div class="row">
<label>Dates:</label><br/>
<select name="dates" id="dates-list" class="demoInputBox" onChange="getPrice(this.value);">
<option value="">Select Dates</option>
</select>
</div>
<div class="row">
<label>Online Onsite Price:</label><br/>
<select name="price" id="price-list" class="demoInputBox">
<option value="">Select Online or Onsite</option>
</select>
</div>
<input id="submit" name="submit" type="submit" value="Submit">
</form>
and this is how I am getting the values from sql database
<?php
require_once("dbcontroller.php");
$db_handle = new DBController();
if(!empty($_POST["training_id"])) {
$query ="SELECT * FROM course WHERE training_id = '" . $_POST["training_id"] . "'";
$results = $db_handle->runQuery($query);
?>
<option value="">Select Course</option>
<?php
foreach($results as $course) {
?>
<option value="<?php echo $course["id"]; ?>"><?php echo $course["course"]; ?></option>
<?php
}
}
?>

Answer 1

Change this line:
onChange="getCourse(this.value);">
To this :
onChange="getCourse(this.text);">
You are passing id of the course as the value of dropdown and calling that value which is fine but you need to call the text of select option to get the course name.

Answer 2

I changed this.value to this.text as suggested and created the new page and it stoped working at all now it is not pulling the records from database except the first one. Here is the link
http://efinancec.com/d/drop4/index1.php
where as my earlier page is still working fine.
http://efinancec.com/d/drop4/index.php
I think I could not convey my problem earlier. My depended dropdown is working fine but when a user submits the form in the email I receive the ids instead of name. Thats the problem.
For example I myself made some selections on index.php and submitted form Here is the email I got
training: 1
course : 101
country: 1001
city: 5005
Basically I am getting the the respective ids instead of name.