Javascript Function on PHP returned results, duplicate ID issue

Question

I was wondering if anyone could kindly help me or steer me in the right direction with this one...Basically I have a Javascript function which calculates the total number between a ticket price (from mysql database) and the quantity (from a drop-down menu). The Javascript and PHP work fine...but only for the first result, the functionality is not dynamic and really need help fixing this.

In my PHP, a table is returned from an SQL statement:

$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)) {
                                $ID = $pcRow['ticketID']; //row in ticket table on database
                                $venue = $pcRow['venue'];
                                $ticketPrice = $pcRow['tPrice'];
                                $date = $pcRow['date'];
                                $time= $pcRow['time'];

                        echo "<tr>\n";
                                echo "<td id=\"venuePlace\">$venue <input type='hidden' id='venuePlaceHidden' class='venuePlaceHidden' value='".$venue."'></td>\n";
                                echo "<td id=\"ticketprice\">&pound;$ticketPrice <input type='hidden' id='ticketPriceHidden' class='ticketPriceHidden' value='".$ticketPrice."'></td>\n";
                                echo "<td >
                                        <select name =\"showQuantity\" id=\"showQuantity\" class =\"showQuantity\" onChange=\"calculateCost()\" >
                                                <option value=\"Select\">Select...</option>
                                                <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 id=\"date\">$date <input type='hidden' id='dateHidden' class='dateHidden' value='".$date."'></td>\n";
                                echo "<td id=\"time\">$time <input type='hidden' id='timeHidden' class='timeHidden' value='".$time."'></td>\n";

                                echo "<td> <input type= \"button\" class= \"buyMe\" value= \"Buy\" name=\"buyMe\" onclick=\"grandTotal()\" > 
                                      </td>\n";


                        echo "</tr>\n";

                        }

The hidden fields are inserted so the Javascript functions can parse these values. The JS function parses these values and multiplies the cost of the ticket ($ticketPrice) and multiplies it a delivery value:

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 = parseInt(document.getElementById('ticketPriceHidden').value);
//get the venue value
var venue = document.getElementById('venuePlaceHidden').value;
var date = document.getElementById('dateHidden').value;
var time = document.getElementById('timeHidden').value;
//multiply them together
var total = quantity * ticket;

return {
    venue: venue,
    quantity: quantity,
    ticket: ticket,
    date: date,
    time: time,
    total: total
};
}

function calculateCost () {
var data = quantityChange();

$('#summary').html('You have chosen '+ ' '  + data.quantity  + ' ' + 'tickets @' + ' ' + data.venue + ' = '  + ' ' +  '&pound;' + data.total);
}

As stated before, this function works for the top result returned by the table, however in my table there are more than one result returned and the JS doesn't work on these values. my problem is related with duplicate IDs because each result returned has the same ID.

I've given each result a class but I cannot do a 'getElementByClass' method. Please please please does anyone know how to edit this code so the JS functions will work for the other results returned? I have a feeling that I may possibly need a foreach() loop to state 'for each value that is returned, apply the JS function...' or something along those lines?

Any help is really appreciated and I am working on improving my accept rate!

First it strikes before proceeding..shouldn't your query be changed to ` "SELECT tkt.* FROM ticket tkt, location loc WHERE tkt.locationID =loc.locationID and loc.postCode LIKE '$pcSearch' "` ? — Ahamed Mustafa M
– Ahamed Mustafa M, Commented May 23, 2012 at 17:41
Thank you for your reply, but the SQL works perfectly fine and is not the problem. The problem lies in the returning the duplicate ID in the PHP and not being able to achieve dynamic behaviour. — Tim Johnstone
– Tim Johnstone, Commented May 23, 2012 at 17:44
You are setting duplicate IDs for the <td> and <input> elements.Instead concat $ID to the id of the elements your create. — Ahamed Mustafa M
– Ahamed Mustafa M, Commented May 23, 2012 at 17:49
That's a good idea, i'll give that a try...where would I try concat $ID in the code? i.e. echo "<td id=\"venuePlace\">$venue.... This would be echo "<td id=\".$ID.\">$venue...*rest of code* ?? — Tim Johnstone
– Tim Johnstone, Commented May 23, 2012 at 17:59

Query Master · Accepted Answer · 2012-05-23 19:12:32Z

1

Try this code with dynamic Id......

<script>
function quantityChange(id) {
//Select the value of the drop down list       
var quantity = $('.showQuantity_'+id+'option:selected').val();
//get the value of the number from the tPrice column in 'ticket' table
var ticket = parseInt(document.getElementById('ticketPriceHidden_'+id).value);
//get the venue value
var venue = document.getElementById('venuePlaceHidden_'+id).value;
var date = document.getElementById('dateHidden_'+id).value;
var time = document.getElementById('timeHidden_'+id).value;
//multiply them together
var total = quantity * ticket;

    $('#summary_'+id).html('You have chosen '+ ' '  + quantity  + ' ' + 'tickets @' + ' ' + venue + ' = '  + ' ' +  '&pound;' + total);
}


</script>

<?php 

$postCodeSQL = "SELECT * FROM ticket WHERE locationID IN (SELECT locationID FROM location WHERE postCode LIKE '$pcSearch') ";
$postCoderesult = mysql_query($postCodeSQL) or die(mysql_error());

$i=0;
while ($pcRow = mysql_fetch_assoc($postCoderesult)) {
    $ID = $pcRow['ticketID']; //row in ticket table on database
    $venue = $pcRow['venue'];
    $ticketPrice = $pcRow['tPrice'];
    $date = $pcRow['date'];
    $time= $pcRow['time'];

echo "<tr>\n";
echo "<td id=\"venuePlace\">$venue <input type='hidden' id='venuePlaceHidden_$i' class='venuePlaceHidden' value='".$venue."'></td>\n";
echo "<td id=\"ticketprice\">&pound;$ticketPrice <input type='hidden' id='ticketPriceHidden_$i' class='ticketPriceHidden' value='".$ticketPrice."'></td>\n";
echo "<td >
<select name =\"showQuantity\" id=\"showQuantity_$i\" class =\"showQuantity\" onChange=\"quantityChange($i)\" >
<option value=\"Select\">Select...</option>
<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 id=\"date\">$date <input type='hidden' id='dateHidden_$i' class='dateHidden' value='".$date."'></td>\n";
echo "<td id=\"time\">$time <input type='hidden' id='timeHidden_$i' class='timeHidden' value='".$time."'></td>\n";

echo "<td> <input type= \"button\" class= \"buyMe\" value= \"Buy\" name=\"buyMe\" onclick=\"grandTotal()\" > 
</td>\n";


echo "</tr>\n";
$i++;
echo "<div id = 'summary_$i'></div>";
}
?>

Explanation

<script>
function abc(id){
  alert('#ticketPriceHidden_'+id);
  var tph =  document.getElementById('ticketPriceHidden_'+id).value;

 if(tph == ''){
     alert('this field is required......');
 }

}
</script>


<a href="javascript:;" onclick="abc(1);">1</a>
<a href="javascript:;" onclick="abc(2);">2</a>

edited May 23, 2012 at 19:12

answered May 23, 2012 at 18:20

Query Master

7,1226 gold badges37 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Tim Johnstone Over a year ago

Hey! Thanks very much for your help, I think i'm on the right lines however I keep getting an error: document.getElementById("ticketPriceHidden_" + id) is null Do you have any ideas by any chance? Thanks

Tim Johnstone Over a year ago

document.getElementById("ticketPriceHidden_" + id) is null. Coming from: var ticket = parseInt(document.getElementById('ticketPriceHidden_'+id).value); Sorry if I was unclear about that the first time.

Tim Johnstone Over a year ago

Ah I think I understand what you're trying to show me. I have a problem in my PHP because with each result that is returned, an input button is also added to the table. So if I try to declare: onChange = quantityChange(1)...this would only apply to the first result and the other results would follow suit. I'm really sorry, i'm terrible at trying to explain this type of thing! Basically the input button I have in the first row works but the second button that is returned doesn't show the right values. :/ I'm starting to confuse myself now haha.

Tim Johnstone Over a year ago

Also I didn't mention and don't know if it will help but the venues and ticket prices are stored on mysql database.

DaneSoul · Accepted Answer · 2012-05-23 18:01:28Z

0

If you have more then one set of same IDs (for different result), then good idea is to use them with numbers: venuePlaceHidden_01, venuePlaceHidden_02

So you need to add circle and incrementing $num variable both in your code for creating table, and the code of analize the values in JS.

answered May 23, 2012 at 18:01

DaneSoul

4,5413 gold badges24 silver badges37 bronze badges

2 Comments

Tim Johnstone Over a year ago

Thanks for you reply. The PHP above is applicable for all results returned in that table so result 2 in the table will also have an ID of 'ticketPriceHidden', 'venuePlaceHidden' etc. so when the JS function is called, it only works for the 1st result returned. I need a way of passing the $ID to each result returned so each returned result have their own values, if that makes any sense?

DaneSoul Over a year ago

So there is the problem, which you need to solve, and what I have pointed in my unswer: you need to change code so, that result 2 will have IDs with index 2 and so on, same for JS processing code. This is general solution for multiple results pages, which is simple to realise, clear to understand and working good!

Collectives™ on Stack Overflow

Javascript Function on PHP returned results, duplicate ID issue

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related