Toggle image & calculate total working, rollover doesnt function?

This doesn't seem complete.

Where are your functions "over" and "out" defined?  You use them in the onmouse... events but I don't see their definitions.

I see seatOn and seatOff but not over and out.

Im sorry, Ive become so confused with varous tutorials of the past few days using different descriptions.  I think I see what you are pointing at though, - is it that Ive set up the function names but not told the function what to do when the user rolls over the image?

Many thanks,

...& Ive muddled up the names in my mouseover bit...

...sorry - I sent you a previous attempt of the mouseover - this is what I have now,

<a href="#"><img src="seat_0.png" onclick='calculate(this,5)'; onmouseover='seatOn("seat")' onmouseout='seatOff("seat")'></a>

Select allOpen in new window

On line 31 you are missing the matching </td> tag.

...thank you for noticing that - but adding it doesnt change my failure to solve my problem? (apart from that Im very new to this & not understanding where Im going wrong.

Do you know if there is a reason why these several functions are not working?  Are you able to point me to a better tutorial, or offer some advice on my code since Im unlikely to understand your questions, a correct example of my rollover code would be of great benefit.

Many thanks.

It does seem to work for me, I think.  You didn't give me enough to really test it, so to make a web page out of it I put some > tags in and added alert statements since I don't have your images.

It does  trigger the mouseover events for the first seat.  The other seats you haven't enabled yet - I assume you are just testing this code out on the first seat.

<script>
//js 
//calculate running total of seat prices  // working
var total = 0;
function calculate(seat,price){
if (seat.src.indexOf('seat_0.png')>=1){
	seat.src ='seat_1.png';
		total += price;
		}
		else {
		seat.src ='seat_0.png';
		total-= price;
		}
		total=Math.round(total*100)/100;
	document.getElementById('totalprice').innerHTML = total;	
}

//mouseover and out // not working
function seatOn(){
alert('seatOn');
document.getElementById("seat")
seat = 'seat_1.png';
}
function seatOff(){
alert('seatOff');
document.getElementById("seat")
seat = 'seat_0.png';
}
</script>

<table id="tableOne" border="0" width="55%" align="center">
<tr>
<td colspan="10"><p span class="row"><span class="row">Row A</span><span class="priceOne"> £10.00</span></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,5)'; onmouseover='seatOn("seat")' onmouseout='seatOff("seat")'></a></td>
		<td><a href='#'><img src="seat_0.png" onclick='calculate(this,10)'></a></td>
		<td><a href='#'><img src="seat_0.png" onclick='calculate(this,10)'></a></td></tr>

<tr><td><h5>Total price: £<span id="totalprice" align="right"></span></td></tr></table>

Select allOpen in new window

I think that lines 22 and 27 should be "seat.src = " not just "seat = "

That should help a little.

Thank you very much for your patience - I really appreciate this.  I really Im not explaining myself very well. Ive uploaded the pages, corrected my td error, & the mouseover names but the mouseover effect still isnt working.  Im testing it on wamp since the uni told us we had to do it this way.  This wont ever be a functional ticket buying thing, Im just trying to pass my module - I dont think being dyslexic helps!

seat reservations

Many thanks,

You were actually really close.  Try these changes.

I had to change your "seat" arguments to "this", which you were already doing correctly in the calculation function.  This was the biggest problem.

Also had to fix lines 22 and 27 as described in previous note, which was also keeping it from working.

//calculate running total of seat prices  // working
var total = 0;
function calculate(seat,price){
if (seat.src.indexOf('seat_0.png')>=1){
	seat.src ='seat_1.png';
		total += price;
		}
		else {
		seat.src ='seat_0.png';
		total-= price;
		}
		total=Math.round(total*100)/100;
	document.getElementById('totalprice').innerHTML = total;	
}

//mouseover and out // not working
function seatOn(seat){
seat.src = 'seat_1.png';
}
function seatOff(seat){
seat.src = 'seat_0.png';
}

//reset seats
function cancelSeats(seat,price){
var seat = document.getElementsByTagName('img');
document.getElementById('totalprice').innerHTML = 0;
   for (var i=0;i<seat.length;i++){
    if(seat[i].getAttribute('src')=='seat_1.png'){
     seat[i].setAttribute('src','seat_0.png');  
     seat[i].setAttribute('onclick',''); 
    }
   }
  }

  //reset all button
function resetPage(){
   window.location="home.html";
  }

Select allOpen in new window

<!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>
<title>Welcome to Hub Tickets Reservations </title>
<script src="selectRow.js"></script>
<link rel="stylesheet" type="text/css" href="hub.css"> 
</head>
<!-- header area -->
 <div id="myTickets" style="center">
  <h1>Ladies & Gentlemen...</h1>
  <div id="myTicket"><center><h4>Your Tickets Await You!</h4>
		<h5>Please on your preferred seats below to reserve ~ thank you! </h5>
		<!-- end of header area -->

<body topmargin="100" leftmargin="0">
 
<!-- seating plan -->
  <table id="tableOne" border="0" width="55%" align="center">
  <tr><img src="screen.png" style="border:none"><div class="screen">Screen</div></tr>
	<tr>
		<td colspan="10"><p span class="row"><span class="row">Row A</span><span class="priceOne"> £10.00</span></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,10)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,10)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,10)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
				<td colspan="1"></td>	
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,10)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,10)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,10)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td></tr>
			<td></td>	
	<tr>
		<td colspan="10"><p span class="row">Row B</span><span class="priceOne"> £10.00</span></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,10)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,10)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,10)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
				<td colspan="1"></td>	
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,10)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,10)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,10)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td></tr>
				<td></td>	
	<tr>
		<td colspan="10"><p span class="row">Row C</span><span class="priceOne"> £10.00</span></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,10)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,10)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,10)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
				<td colspan="1"></td>	
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,10)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,10)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,10)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td></tr>
				<td></td>	
	<tr>
	<td colspan="7"><p span class="row">Row D</span><span class="priceTwo"> £5.00</span></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,5)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,5)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,5)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,5)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,5)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,5)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,5)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,5)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,5)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,5)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
			<td colspan="2"></td>	
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,5)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,5)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,5)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,5)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td></tr>
	
	<tr>
	<td colspan="7"><p span class="row">Row E</span><span class="priceTwo"> £5.00</span></td>
	<td><a href="#"><img src="seat_0.png" onclick='calculate(this,5)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,5)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,5)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,5)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,5)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,5)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,5)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,5)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,5)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,5)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
			<td colspan="2"></td>	
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,5)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,5)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,5)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td>
		<td><a href="#"><img src="seat_0.png" onclick='calculate(this,5)'; onmouseover='seatOn(this)' onmouseout='seatOff(this)'></a></td></tr>
</table>

<P><table width="55%" align="center">
	
	<tr>
	<td width="30%" align="left" valign="top">
		<div class="legend"><img src="images/available.png" alt="Available" />Available Seat</div> 
		<div class="legend"><img src="images/mine.png" alt="Mine" />My Reservations</div> 
		<div class="legend"><img src="images/taken.png" alt="Taken" />Unavailable Seat</div></td>
		</td>
		
	<td width="45%" align="left" valign="top">
	<div id="theButtons">
	 <input type="button" value="Confirm" id="confirm" onclick="confirmSeats()"/>&nbsp;
	 <input type="button" value='Cancel' id='cancel' onClick="cancelSeats()";>&nbsp;
	 <input type="button" value="Reset" id="reset" onclick="resetPage()" />&nbsp;
	 <input type="button" value="Purchase" id="checkout" onclick="purchaseSeats()" disabled="disabled" /></div></td>
	 <td align="left" valign="top"><div id="myTicket"><h5>Total price: £<span id="totalprice" align="right"></span></div>
  
</td></tr></table>

</body>
</html>

Select allOpen in new window

...I had tried that but it causes an error in the calculations when the user clickt the seat?  *sigh* - the price displays as a minus & then doesnt add up correctly.  I figured there must be something wrong with using two "this" statements & discounted how to fix it...Its certianly a lot closer to my end requirements though,

Many thanks :)

...also, it stops the toggle onclick (change the seat image) working....

The trouble is with your logic of looking to see if a seat's image is "seat_0.png" to decide if it is free.

You are making it appear reserved during the mouseover (temporarily turning it red).  But only we know it is temporary.  The image "src" has been set to seat_1.png in the mouseover.

So when we see the user's click, the seat is already red and appears to be reserved, so you "unreserve" it, hence the minus sign.

Besides this problem, there is another complication we still need to address - once a seat is reserved (red) what is the mouseover supposed to do to it?  Turn it back green temporarily, or what?

I have to think about the best way to fix this, just wanted to give you an update.

Basically, using the image name to detemine the state of the seat, while it seems a good idea, isn't.

...yes, I can see what you are saying.  Ive had a go at adding a third image which appears when the users clicks to "confirm" - but as you said it doesnt resolve the previous issues.  Also, the totalling goes a bit haywire. When the user clicks a seat to reserve it, the mouseover functions are meant to stop for that particular seat, - hence the idea of a third seat colour (grey - Im so original!) ...

Many thanks for your time & patience tonight - I appreciate how late it is here in UK & will just keep going trial & error for a few more hours (& hopefully if you have time to think it through even tomorrow you can help even more),

Many thanks,

Try this.

There is a great feature in Javascript that we can add our own variables to any object.  So by just refering to "seat.isReserved", we can add a new flag to every seat called "isReserved".  We can then use that flag to keep track of whether the seat is reserved or not.

Also I added some logic so the mouseover will not turn a seat green (on mouse-out) if the seat is reserved.  So it stays red.

//calculate running total of seat prices  // working

var total = 0;

function calculate(seat,price){
	if ( ! seat.isReserved ){
		seat.src ='seat_1.png';
		total += price;
		seat.isReserved = 1;
	} else {
		seat.src ='seat_0.png';
		total -= price;
		seat.isReserved = 0;
	}
	total=Math.round(total*100)/100;
	document.getElementById('totalprice').innerHTML = total;
}

//mouseover and out // not working
function seatOn(seat){
	seat.src = 'seat_1.png';
}
function seatOff(seat){
	if (!seat.isReserved) seat.src = 'seat_0.png';
}

//reset seats
function cancelSeats(seat,price){
	var seat = document.getElementsByTagName('img');
	document.getElementById('totalprice').innerHTML = 0;
	for (var i=0;i<seat.length;i++){
		if(seat[i].getAttribute('src')=='seat_1.png'){
			seat[i].setAttribute('src','seat_0.png');  
			seat[i].setAttribute('onclick',''); 
		}
	}
}

//reset all button
function resetPage(){
	window.location="home.html";
}

Select allOpen in new window

Thank you for trying but this doesnt seem to work this end, sorry - although I can see the reasoning behind it.  I think Ill try again from a few steps back - Ive obviously confused myself again - actually, I just want to cry!  :(

O don't feel that way.  You're just tired.

Put the latest up on your site where I looked before and I'll look again.

It really does work!  Are you sure you are using the latest version I posted?

Are you using Firefox or Internet Explorer?

Thank you, yes I am - Ive had around 12hrs sleep in the last week & am frustrated & corss at myself for not understanding this - Ive only got until Monday now to solve, or I fail.

Im using IE but have both, I can check in FF - Ill go through your example of code again just now, & upload in a few minutes, thank you very much :)

See it work here:

http://www.sjklein.com/temp/uni.html

...thank you for all of this. I went back through it & saw where I have made some stupid typos' (' instead of ") etc - & its almost, almost wonderfully perfect, you are very clever!  The only issue I have now is the total.  Once the user cancels the seats, although the innerHTML shows 0, when another seat is clicked it has remembered the previous total.  But, Im so much closer & cant thank you enough - I'll keep playing with it & see if I can find a way to reset the total properly.

Many many thanks, new seat test
:) - first smile Ive had in a few days!

Just add this line as the first line in the cancelSeats function to clear your running total in memory:

total = 0;

Select allOpen in new window

I am glad you are smiling.

...I had just spotted that I should do that, I would never have thought to look if I hadnt had your help tonight, really made me think more about the logic, rather than my trial, error & cry method :)  

Ive still got some little bits to iron out, when I cancel (for example) if I roll over the same seats the rollover stays in red, but to be honet - Im so chuffed at how much you've helped my progress I think I'll just hope my tutor chooses different seats ...or buys the DVD :D

I hope it would be ok to perhaps ask you for more help tomorrow if I get stuck, & if so do I leave this thread open or does that mean you dont get your points thing added?  Id hate to cause you hassle. (well, anymore than already!)

And we also need to reset the isReserved flag for each of the seats within the "seat" loop in the cancelSeats routine:

seat[i].isReserved = 0;

Select allOpen in new window

Here's my version of the cancelSeats routine.  I also changed it to just reset all the seats without worrying about which ones are reserved or not.

I akso got rid of the line inside the loop that was setting the onClick property.  I don't know what that was supposed to do and it seems to work fine without it.

//reset seats
function cancelSeats(seat,price){
	total = 0;
	var seat = document.getElementsByTagName('img');
	document.getElementById('totalprice').innerHTML = 0;
	for (var i=0;i<seat.length;i++){
		seat[i].isReserved = 0;
		seat[i].setAttribute('src','seat_0.png');  
	}
}

Select allOpen in new window

You are welcome to leave the thread open.  Get some rest.

Thank you so much - you've no idea how much you have helped me, Ive waited a long time to go to uni & have been so upset & stressed that I would fail this assessment.  Youre a star.

Many thanks (again)
scotia :)

It makes me very happy to be able to help you.  I am glad you didn't give up.

...Im glad you didnt either! :D

Hello & good morning!  Thank you again for you previous help, Ive been trying to update things & wondered if I could ask for your help again?

When the user clicks a seat, the seat turns red as required & my subtotal updates.  When the user clicks to confirm, the seat turns grey, the mouseover stops, the subtotal & total update.  

If the user then clicks to cancel a seat (thats not currently confirmed) - Id like the seat image & totals to revert to the previous confirmed values & for the mouseovers to become active again - if that makes sense?
updated seating here

Thank you again, :)

...I also need the disabled "checkout" button to become clickable (but not go anywhere or do anything)...Thank you!!!

It is looking good.  Congratulations.  I will look at your questions this morning (New Hampshire time).

I think maybe part of the answer is to add another flag - seat.isConfirmed - and fix our logic to understand that flag, too.  So a seat can be open (no flags set), isReserved or isConfirmed.

Here's what I see so far.  All easily fixed.  I'll post my changes in a little while for you to see.

The cancelSeats function has mucked up curly-brackets and "else" branch.

You declare your variables several times.  You should only use "var" with a variable once.  The "var" line is where the variable gets declared (created).  After that, just use it.

You are using the seat image name to keep track of whether it is confirmed - this is where a new isConfirmed flag should be used instead - just like we did with the isReserved flag.

In the cancelSeats and confirmSeats functions, the lines that set the total and subtotal to zero are outside the function instead of inside, so these lines won't be executed when the functions are called.

Wow, that is actually beginning to make sense to me!!! Thank you! Im going to try & do as you have suggested this afternoon & see how I get on - I look forward to seeing your corrections too - many many thanks!!  :)

I made *many* changes.  Try it out.  Please look this over very carefully and try to match up to your version.

//calculate running totals of seat prices
var subtotal = 0;   // reserved seats
var total = 0;      // confirmed seats

//user clicked on a seat - reserve or unreserve it
function calculate(seat,price){
    if ( ! seat.isConfirmed )   // only if seat is not confirmed...
    {
        if ( ! seat.isReserved ){
            seat.src ='seat_1.png';
            subtotal += price;
            seat.isReserved = 1;
        } else {
            seat.src ='seat_0.png';
            subtotal -= price;
            seat.isReserved = 0;
        }

        subtotal = Math.round(subtotal*100)/100;    //**** why is this necessary?
        document.getElementById('subtotal').innerHTML = subtotal;
    }
}

//mouseover and out
function seatOn(seat){
    // On mouseover, seat goes to red unless already confirmed
    if ( ! seat.isConfirmed ) seat.src = 'seat_1.png';
}
function seatOff(seat){
    // On mouseout, seat goes back to green unless reserved or confirmed
    if ( ( !seat.isReserved ) && (! seat.isConfirmed ) ) seat.src = 'seat_0.png';
}

//confirm (already reserved) seats
function confirmSeats(seat){
    // add (reserved) subtotal to (confirmed) total in memory and on screen
    total += subtotal;
    document.getElementById('totalprice').innerHTML = total;

    // clear subtotal in memory and on screen
    subtotal = 0;
    document.getElementById('subtotal').innerHTML = 0;

    // for each reserved seat..
    var seat = document.getElementsByTagName('img');
    for (var i=0;i<seat.length;i++){
        if (seat[i].isReserved){
            seat[i].isReserved = 0;     // no longer reserved, but...
            seat[i].isConfirmed = 1;    // seat is confirmed
            seat[i].src = 'taken.png';  // and turn gray
        }
    }
}

//cancel (reserved) seats 
function cancelSeats(seat){
    // clear subtotal in memory and on screen
    subtotal = 0;
    document.getElementById('subtotal').innerHTML = 0;

    // for each reserved seat..
    var seat = document.getElementsByTagName('img');
    for (var i=0;i<seat.length;i++){
        if ( seat[i].isReserved ){
            seat[i].src = 'seat_0.png'; // turn green
            seat[i].isReserved = 0;     // no longer reserved
        }
    }
}

//reset all button
function resetPage(){
    window.location="home.html";
}

Select allOpen in new window

Wow, it does look quite different in bits doesnt it!  Im going to spend some time going through it just now as you suggested - I recognised the toggle ! from actionscript, so I can get my head around that part, & declaring the var at the top makes sense - it's just referred back to when its needed right?

I had included the math rounded to keep my decimal point in place if I had tickets at 5.25 for example, I had googled for a tutorial & it seemed to work so I kept  it :)  

The logic behind the reserve & unreserved certainly makes more sense, & I can see where I was getting muddled up with my curly's & semi's - as well as confusing ID & TagName quotes.  

It will take me a little while to go through it properly, so I'll leave you in peace for oooh, at least an hour ;)

Just mindblowing the knowledge you have - I cant thank you enough, honestly!  Im going to try getting the checkout button to enable tonight too, & after that?...sleep! :D
Ill post how I get on with your code & learning,
Many thanks :)

It is a pleasure to work with you.

Here's how to format your numbers to have two decimal places:

http://www.mredkj.com/javascript/numberFormat.html

        document.getElementById('subtotal').innerHTML = subtotal.toFixed(2);

and

    document.getElementById('totalprice').innerHTML = total.toFixed(2);

Select allOpen in new window

Take out the line that does the "Round" and change the two lines above to format the numbers at the moment they are placed on the screen.

I wanted to again say a huge thank you, not only for easing my stress levels - but for making my first attempt at Javascript become more understandable.  I took time to go through everything you said, suggested & modified - & I dont hate javascript so much now *smiles* - It must be very difficult to help people like me who come from a photoshop background  & who have such limited knowledge of various languages but are thrown in at the deep end.  

I thought Id send you the link to my latest update - which although doesnt show the list of seats confirmed (I think Id have to assign every seat a unique ID in order to do this correctly) & although I even didnt begin to make the checkout button enable - I feel Ive at least begun a far better understanding of how to structure code, correctly assign functions & feel such relief - all thanks to your support.

I dont know how to send you "points" since I dont have any (unless I can purchase them) - but my only regret is that 500 is the maximum.  Your time, effort & patience are incredible.  I  really hope everyone else you help appreciates it as much.  

latest update

Again, huge thanks & I know I will seek you out in future.  I would like to cancel my free trail & just start to pay for membership here, is there a way I can do that?...(that doesnt include seats!!!) ...

scotia :D - who now has a broad grin, let alone a smile!