Send text instead of value - php

Question

I have a HTML attribute in my script:
<select name="cars" onChange="getPrice(this.value)">
<option value="1">Volvo XC90</option>
<option value="2">Saab 95</option>
<option value="3">Mercedes SLK</option>
<option value="4">Audi TT</option>
</select>
When I select the first item and post this to the database my script sends the wrong data to the database. In my database I get the value instead of the text.
By selecting the first <option> I want to post Volvo XC90 instead of s. How can I solve this?
The Ajax script I am using is:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function getPrice() {
// getting the selected id in combo
var selectedItem = jQuery('#cars option:selected').val();
// Do an Ajax request to retrieve the product price
jQuery.ajax({
url: 'get.php',
method: 'POST',
data: {'cars': selectedItem },
success: function(response){
// and put the price in text field
jQuery('#cars').val(response);
},
error: function (request, status, error) {
alert(request.responseText);
},
});
}
</script>
send.php
<?php
$correct = true;
$product1 = $_POST['product1'] ;
if($correct){
$db = new PDO('mysql:host=localhost;dbname=database', 'root', '');
$query = "INSERT INTO forms(product1) VALUES (?)";
$stmt = $db->prepare($query);
$stmt->execute(array($product1));
header("Location: ./print.php");
}
else
{
echo "<br /><br />Error.<br />\n";
}
?>
Update 1:
Something like this is ideal for my situation:
html:
<select name="cars" onChange="getPrice(this.value)">
<option id="1" value="Volvo XC90">Volvo XC90</option>
<option id="2" value="Saab 95">Saab 95</option>
<option id="3" value="Mercedes SLK">Mercedes SLK</option>
<option id="4" value="Audi TT">Audi TT</option>
</select>
function:
$('[id=cars]').change(function()
{
alert($('[id=cars] option:selected').text());
});

Answer 1

Use html as
<select name="cars" onChange="getPrice(this.value)">
<option value="">Select</option>
<option value="Volvo XC90">Volvo XC90</option>
<option value="Saab 95">Saab 95</option>
<option value="Mercedes SLK">Mercedes SLK</option>
<option value="Audi TT">Audi TT</option>
</select>
and little change in your js function as
function getPrice(selectedItem) {
Instead of
function getPrice() {
You are already sending onChange="getPrice(this.value)" selected value here, just needed to catch it.
so there is no need to code to get again, remove this line
var selectedItem = jQuery('#cars option:selected').val();
Also added new option with blank value as you are sending value in onchange, there will be no effect on first load and it will be selected first column.
I suggest first check not empty for selectedItem then go for ajax.
function getPrice(selectedItem) {
alert(selectedItem);
}
<select name="cars" onChange="getPrice(this.value)">
<option value="">Select</option>
<option value="Volvo XC90">Volvo XC90</option>
<option value="Saab 95">Saab 95</option>
<option value="Mercedes SLK">Mercedes SLK</option>
<option value="Audi TT">Audi TT</option>
</select>

Answer 2

Bunch of things :
1.Replace .val() with .text().
2.Use name selector ( since there is no such element with id = cars )
var selectedItem = jQuery('[name=cars] option:selected').text();

Answer 3

EDIT:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function getPrice()
{
var selectedItem = $( "#cars" ).val();
alert(selectedItem);
}
</script>
<select name="cars" onChange="getPrice(this.value)" id="cars">
<option id="1" value="Volvo XC90">Volvo XC90</option>
<option id="2" value="Saab 95">Saab 95</option>
<option id="3" value="Mercedes SLK">Mercedes SLK</option>
<option id="4" value="Audi TT">Audi TT</option>
</select>