Getting a value from my sql database in Javascript? - php

Question

I've been having a bit of trouble with this for a while, please can somebody shed some light onto this?
What's happening so far: When a button is clicked, a search statement occurs and an AJAX call is made and brings back a set of results (displayed as a table) these results coming from a table in mysql database called 'ticket. The values displayed from the ticket table are 'venue' 'date' 'time' 'tPrice'.
This 'tPrice' is a number which has been set i.e. 15/20/25 to represent the price of a ticket. This works and displays fine but I'm having a problem trying to get the value of the price of the ticket in Javascript, does anyone know how to refer to a number in a mysql table in JS?
What I'm wanting to do with this value is multiply it to the value of whatever number is selected from a drop-down menu. (this drop-down menu is also returned by AJAX as part of the results of the user's search, this search result page is written in php and echoes the drop-down menu as a column within the results table)
What I have so far is this:
function quantityChange() {
//Select the value of the drop down list
var quantity = $('.summary').html($('#showQuantity option:selected').val());
//get the value of the number from the tPrice column in 'ticket' table
var ticket = parseFloat($('#ticketprice').val());
//multiply them together
var total = quantity * ticket;
return (total);
After debugging in Firebug, it's giving me no errors but it's also not giving me any results...please, any help would be greatly appreciated! Thanks
EDIT:
The php code:
$postCodeSQL = "SELECT * FROM ticket WHERE locationID IN (SELECT locationID FROM location WHERE postCode LIKE '$pcSearch') ";
$postCoderesult = mysql_query($postCodeSQL) or die(mysql_error());
while ($pcRow = mysql_fetch_assoc($postCoderesult)) {
$venue = $pcRow['venue'];
$ticketPrice = $pcRow['tPrice'];
$date = $pcRow['date'];
$time= $pcRow['time'];
echo "<tr>\n";
echo "<td>$venue</td>\n";
echo "<td id=\"ticketprice\">&pound$ticketPrice</td>\n";
echo "<td >
<select name =\"showQuantity\" id=\"showQuantity\" class =\"showQuantity\" onchange=\"quantityChange()\" >
<option value=\"1\">1</option>
<option value=\"2\">2</option>
<option value=\"3\">3</option>
<option value=\"4\">4</option>
<option value=\"5\">5</option>
</select>
</td>\n";
echo "<td>$date</td>\n";
echo "<td>$time</td>\n";
echo "</tr>\n";
}

Answer 1

Try this (change the trigger function)
$(document).ready(function() {
function quantityChange() {
//Select the value of the drop down list
var quantity = $('#showQuantity option:selected').val();
//get the value of the number from the tPrice column in 'ticket' table
var ticket = parseFloat($('#ticketprice').val());
//multiply them together
var total = quantity * ticket;
//console.log(total);
//console.log(ticket);
//console.log(quantity);
return (total);
}
// Need a simple trigger
$('#showQuantity').change(function() {
quantityChange();
});
});

Answer 2

As said , you have more than one element with the same ID.
So when you're writing a code to get the value by elemeny's id = troubles.
Try:
1.Change the next line:
onchange=\"quantityChange()\"
to:
onChange=\"quantityChange(this)\"
2.Change your function defining line to:
function quanitityChange(selElem){
3.change the next line:
var quantity = $('.summary').html($('#showQuantity option:selected').val());
to:
var quantity = parseFloat($(this).find(":selected").val());
4.Change:
echo "<td id=\"ticketprice\">&pound$ticketPrice</td>\n";
to:
echo "<td id=\"ticketprice\">&pound$ticketPrice<input type='hidden' id='ticketPriceHidden' value='".$ticketPrice."'></td>\n";
5.In your function again:
var ticket = parseFloat($(this).parent().find("input#ticketPriceHidden").val());
Works? What the output of quantity and ticket now?