Submit button not working - Page 2

Old Pedant · 01-25-2013, 03:42 AM

I don't think you have yet learned how to use the error console.

Which browser are you using?

I personally prefer Chrome. It will show you your errors even if you turn on the debugger after you have started using the page.

Do this:
-- Bring up that page in Chrome
-- Hit the F12 key to bring up the debugger.
-- Click on the CONSOLE tag in the debugger
-- Without entering *ANY* data into your form, hit the Calculate Now! button
-- Look at the console section. It should say (with "filename" replaced with your actual name):
Uncaught ReferenceError: Senior is not defined filename.html:119
-- Click on the "119" there.
-- The JavaScript code at line 119 (and a few lines around that) shows with the error clear.

Code:

var senior = Number(document.getElementById('seniorTicket').value) || 0;
var seniorprice = 9.50; // (no $ sign!!)
var seniorcost = Senior * seniorPrice;

Senior is *NOT* the same as senior.

JavaScript can't find any variable named Senior so *KABLOOEY*.

Fix that error. Hit REFRESH. Hit "Calculate Now!" again.

See your next error.

Keep at it. There are several.

Old Pedant · 01-25-2013, 03:47 AM

There are several other things I find wrong.

Just for starters, there is NO REASON to assign ID's to any or you <form> fields.

Names are all that are needed.

And if you use names, you don't need to keep using document.getElementById.

Plus, if you were to later send this <form> to server-side code, only the names would matter, anyway.

andynov123 · 01-26-2013, 04:28 PM

Thanks Old Pedant for the error console instructions. I got it working. I just have a couple questions.
-How do I change the output from looking like this for 2 adult tickets
output = 21
output I want to see = 21.00

-How do I get this output to appear inside the info border on the right instead of as a prompt?

Code:

<html>

<head>
<title>AMC Ticket Calculator</title>




<style type="text/css">
#welcome{color:red;font-size:35px;font-family:impact;}
body{border-style:solid;overflow:hidden;border-color:red;
border-width:20px;}
#please{font-size:20px;color:red;font-weight:bold;}
#please1{font-size:20px;color:red;font-weight:bold;}
#please2{font-size:20px;color:red;font-weight:bold;}
#logo
{
float:right;margin-top:-45px;margin-right:200px;
}
#info
{
	
	font-weight:bold;
	margin-top:10px;
font-size:15px;	
}
#qty{margin-left:30px;float:left;font-size:25px;margin-top:-30px;}
#tickettype{margin-top:11px;font-size:25px;margin-right:0px;}
#price{margin-right:30px;float:right;font-size:25px;margin-top:-28px;}
#additionalCharge
{
position:relative;left:20px;
}
#clear{
	margin-top:330px;
	
	}
#calculate{
border-style:solid;border-color:red;width:600px;height:450px;float:right;margin-right:20px;text-align:center;color:red;position:relative;bottom:380px;font-weight:bold;font-size:35px;}



</style>
</head>
<body>
<center><div id="welcome">Welcome to the <img src
="https://si0.twimg.com/profile_images/2391543757/ar8n1bu3oc6mo4am5ef1_normal.jpeg" alt="logo"/>Ticket Calculator</div></center>	


<form>










<div id="please1">Please enter the quantity of each ticket</div>
Please leave blank any that do not apply<br>


<input Id="beforeNoon" type="text" size="1" name="beforeNoon" >Before Noon<br>
<input Id="matinee" type="text" size="1" name="matinee" >Matinee<br>
<input Id="adultTicket" type="text" size="1" name="adult" >Adult<br>
<input Id="childTicket" type="text" size="1" name="child" >Child<br>
<input Id="seniorTicket" type="text" size="1" name="senior" >Senior<br>
<input Id="militaryTicket" type="text" size="1" name="military" >Military<br>
<input Id="seniordayTicket" type="text" size="1"
name="seniorday" >Senior Day Ticket<br>
<input Id="studentdayTicket" type="text" size="1"
name="studentday" >Student Day Ticket<br>
<br>
<div id="please2">Please enter additional information if needed</div>
<input Id="threed"
type="text" size="1" name="quantity" >How many tickets are regular<b> 3D?</b>($3.50 additional charge perticket)<br>
<input Id="imax"type="text" size="1" name="quantity" >How many tickets are <b>IMAX(NO 3D)?</b>($4.50 additional charge per
ticket)<br>
<input Id="imax3d" type="text"
size="1" name="quantity" >How many tickets are <b>IMAX 3D?</b>($5.50 additional charge per ticket)<br>



<br>
<input type="button" onclick="displayTotal()" value="Calculate Now!">


</form>

<div id="calculate">
Total Breakdown

<br>
<div id="info"><div id="ticketType">Ticket Type</div><div id="qty">Quantity</div><div id="price">Price</div></div>
<script type="text/javascript">
displayTotal();
</script>
<div id="clear"><input type="button" value="Clear Everything and Start Over" onclick="document.location.reload(true)">
</div>

</div>

</div>
<script type="text/javascript">




function displayTotal(){


var beforenoon = Number(document.getElementById('beforeNoon').value) || 0;
var beforenoonprice = 6.00; // (no $ sign!!)
var beforenooncost = beforenoon * beforenoonprice;
var matinee = Number(document.getElementById('matinee').value) || 0;
var matineeprice = 8.50; // (no $ sign!!)
var matineecost = matinee * matineeprice;
var senior = Number(document.getElementById('seniorTicket').value) || 0;
var seniorprice = 9.50; // (no $ sign!!)
var seniorcost = senior * seniorprice;
var Military = Number(document.getElementById('militaryTicket').value) || 0;
var militaryprice = 9.00; // (no $ sign!!)
var militarycost = Military * militaryprice;
var StudentDay = Number(document.getElementById('studentdayTicket').value) || 0;
var studentdayprice = 7.50; // (no $ sign!!)
var studentdaycost = StudentDay * studentdayprice;
var seniorDay = Number(document.getElementById('seniordayTicket').value) || 0;
var seniordayprice = 6.00; // (no $ sign!!)
var seniordaycost = seniorDay * seniordayprice;
var Adult = Number(document.getElementById('adultTicket').value) || 0;
var adultprice = 10.50; // (no $ sign!!)
var adultcost = Adult * adultprice
var child = Number(document.getElementById('childTicket').value) || 0;
var childprice = 7.50; // (no $ sign!!)
var childcost = child * childprice;
var threeD = Number(document.getElementById('threed').value) || 0;
var threeDprice = 3.50; // (no $ sign!!)
var threeDcost = threeD * threeDprice;
var Imax = Number(document.getElementById('imax').value) || 0;
var imaxPrice = 4.50; // (no $ sign!!)
var imaxCost = Imax * imaxPrice;
var Imax3d = Number(document.getElementById('imax3d').value) || 0;
var imax3dPrice = 5.50; // (no $ sign!!)
var imax3dCost = Imax3d * imax3dPrice;
var total = childcost+adultcost+militarycost+seniorcost+studentdaycost+seniordaycost+threeDcost+imaxCost+imax3dCost+beforenooncost+matineecost;
prompt("The total is $" + total);
}


</script>
</body>



</html>

Old Pedant · 01-28-2013, 04:04 AM

prompt("The total is $" + total.toFixed(2));

Quote:

-How do I get this output to appear inside the info border on the right instead of as a prompt?

Put it there.

Create a <div> or <span> with an ID of your choice an put the total into the element's innerHTML.

Oh, what the heck:

Code:

<div id="totalHere"></div>
...
document.getElementById("totalHere").innerHTML = The total is $" + total.toFixed(2);

Then you can use CSS to position the <div> (or <span>) where you want it.