CodingForums.com - Submit button not working

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)

- - Submit button not working (http://www.codingforums.com/showthread.php?t=286306)

Submit button not working

When I click calculate now, a prompt is supposed to come up but nothing happens and I can't figure out where the error in my code is. Any suggestions is appreciated.

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;        

}

#clear{

        margin-top:240px;

        

        }

#calculate{

border-style:solid;border-color:red;width:300px;height:300px;float:right;margin-top:-480px;text-align:center;color:red;font-weight:bold;font-size:20px;}







</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>

<center>

<div id="please">Please enter what time frame the movie is in:</div>

<input Id="beforenoon" type="radio" name="showtype"

value="beforenoon">Before 12 P.M.<br>

<input Id="twelvetofour" type="radio" name="showtype"

value="twelvetofour">Between 12 P.M. and 4 P.M.<br>

<input Id="afterfour" type="radio" name="showtype"

value="afterfour">After 4 P.M.<br><br>

















<div id="please1">Please enter the quantity of each ticket</div>

Please leave blank any that do not apply<br>





Adult:<input Id="adult" type="text" size="1" name="adult" ><br>

Child:<input Id="child" type="text" size="1" name="child" ><br>

Senior:<input Id="senior" type="text" size="1" name="senior" ><br>

Military:<input Id="military" type="text" size="1" name="military" ><br>

Senior Day Ticket:<input Id="seniorday" type="text" size="1"

name="seniorday" ><br>

Student Day Ticket:<input Id="studentday" type="text" size="1"

name="studentday" ><br>

<br>

<div id="please2">Please enter additional information if needed</div>

How many tickets are regular<b>3D?</b><input Id="threed"

type="text" size="1" name="quantity" >($3.50 additio

nal charge per

ticket)<br>

How many tickets are <b>IMAX(NO 3D)?</b><input Id="imax"

type="text" size="1" name="quantity" >($4.50 additional charge per

ticket)<br>

How many tickets are <b>IMAX 3D?</b><input Id="imax3d" type="text"

size="1" name="quantity" >($5.50 additional charge per ticket)<br>



<script type="text/javascript">







function displayTotal(){

var adult = document.getElementbyId('adult');

var child = document.getElementbyId('child');

var senior = document.getElementbyId('senior');

var military = document.getElementbyId('military');

var seniorday = document.getElementbyId('seniorday');

var studentday = document.getElementbyId('studentday');

var total = adult + child + senior + military + seniorday + studentday;

prompt("The total is " + total);

}





</script>



<br>

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



</center>

</form>



<div id="calculate">

Total Breakdown



<br>

<div id="info">Ticket Type&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Quantity&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Price</div>

<div id="clear"><input type="button" value="Clear Everything and Start Over" onClick="document.location.reload(true)">

</div>

</div>



</div>



</body>







</html>

You're trying to add objects, not the value of the objects.

var adult = document.getElementById('adult').value;

Also, + in JS means "concatenate" unless you indicate that it needs to be math.

parseFloat(adult + child + senior... );

I added the .value and the parseFloat, but I still don't know why the prompt from displayTotal() wont appear.

UPDATED CODE

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;        

}

#clear{

        margin-top:240px;

        

        }

#calculate{

border-style:solid;border-color:red;width:300px;height:300px;float:right;margin-top:-480px;text-align:center;color:red;font-weight:bold;font-size:20px;}







</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>

<center>

<div id="please">Please enter what time frame the movie is in:</div>

<input Id="beforenoon" type="radio" name="showtype"

value="beforenoon">Before 12 P.M.<br>

<input Id="twelvetofour" type="radio" name="showtype"

value="twelvetofour">Between 12 P.M. and 4 P.M.<br>

<input Id="afterfour" type="radio" name="showtype"

value="afterfour">After 4 P.M.<br><br>

















<div id="please1">Please enter the quantity of each ticket</div>

Please leave blank any that do not apply<br>





Adult:<input Id="adult" type="text" size="1" name="adult" ><br>

Child:<input Id="child" type="text" size="1" name="child" ><br>

Senior:<input Id="senior" type="text" size="1" name="senior" ><br>

Military:<input Id="military" type="text" size="1" name="military" ><br>

Senior Day Ticket:<input Id="seniorday" type="text" size="1"

name="seniorday" ><br>

Student Day Ticket:<input Id="studentday" type="text" size="1"

name="studentday" ><br>

<br>

<div id="please2">Please enter additional information if needed</div>

How many tickets are regular<b>3D?</b><input Id="threed"

type="text" size="1" name="quantity" >($3.50 additio

nal charge per

ticket)<br>

How many tickets are <b>IMAX(NO 3D)?</b><input Id="imax"

type="text" size="1" name="quantity" >($4.50 additional charge per

ticket)<br>

How many tickets are <b>IMAX 3D?</b><input Id="imax3d" type="text"

size="1" name="quantity" >($5.50 additional charge per ticket)<br>



<script type="text/javascript">







function displayTotal(){

var adult = document.getElementbyId('adult').value;

var child = document.getElementbyId('child').value;

var senior = document.getElementbyId('senior').value;

var military = document.getElementbyId('military').value;

var seniorday = document.getElementbyId('seniorday').value;

var studentday = document.getElementbyId('studentday').value;

var total = parseFloat(adult + child + senior + military + seniorday + studentday);

prompt("The total is " + total);

}





</script>



<br>

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



</center>

</form>



<div id="calculate">

Total Breakdown



<br>

<div id="info">Ticket Type&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Quantity&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Price</div>

<div id="clear"><input type="button" value="Clear Everything and Start Over" onClick="document.location.reload(true)">

</div>

</div>



</div>



</body>







</html>

Try alert instead of prompt.

Place the <script> tag and contents just before the closing </body> tag. Also, check your error console to see if there are any messages.

I moved the <script> and its contents and I went into error console in chrome but it's blank. I wasn't sure if I looked in the right place for the console so I took a screenshot in the image below of where I was.

Quote:

Originally Posted by andynov123 (Post 1308208)

A screenshot is no use whatsoever. Use your browser error console (F12).

You persistently use Id instead of id - Javascript is case sensitive. Id is meaningless to Javascript.

You also persistently use document.getElementbyId - again, Javascript is case sensitive.

onClick should be onclick.

You also use the same id for HTML elements and Javascript variables. Very unwise.

Use Number() to convert the string values entered by the user:-
var Adult = Number(document.getElementbyId('adult').value); // Javascript is case sensitive so Adult is not the same as adult
// etc.
var total = parseFloat(adult + child + senior + military + seniorday + studentday); // concatenates the 6 string values and converts to a real number. Use Number() to make the individual values numbers, and remove parseFloat(). In any case the number of tickets must be an integer, so parseFloat() makes no sense.

You have not specified the width and height of your image.

You have assigned the same name quantity to multiple variables.

May be other errors as well.

My advice would be to strip your code down to just one element to start with, test that and get it working before moving on.

Code:

function displayTotal(){ 

var adult = document.getElementById('adult').value == "" ? 0 : parseFloat(document.getElementById('adult').value) ; 

if(isNaN(adult)) { adult = 0; }

  ... // use the above as a template for the rest

var total = parseFloat(adult + child + senior + military + seniorday + studentday); 

alert("The total is " + total); 

}

I did not pay attention to the IDs and whatnot that Philip M did. But JS _is_ case sensitive, so getElementbyId won't work, it has to be getElementById.

Quote:

Originally Posted by WolfShade (Post 1308221)

Code:

function displayTotal(){ 

var adult = document.getElementById('adult').value == "" ? 0 : parseFloat(document.getElementById('adult').value) ; 

if(isNaN(adult)) { adult = 0; }

  ... // use the above as a template for the rest

var total = parseFloat(adult + child + senior + military + seniorday + studentday); 

alert("The total is " + total); 

}

I did not pay attention to the IDs and whatnot that Philip M did. But JS _is_ case sensitive, so getElementbyId won't work, it has to be getElementById.

That is not the way to do it. Use Number(). To trap NaN entries use

var Adult = Number(document.getElementById('adult').value) || 0;
// and so on

parseFloat() is not required.

Code:

function displayTotal(){

var Adult = Number(document.getElementById('adult').value) || 0;

var Child = Number(document.getElementById('child').value) || 0;

var Senior =  Number(document.getElementById('senior').value) || 0;

var Military =  Number(document.getElementById('military').value) || 0;

var Seniorday =  Number(document.getElementById('seniorday').value) || 0;

var Studentday =  Number(document.getElementById('studentday').value) || 0;

var total = (Adult + Child + Senior + Military + Seniorday + Studentday);

alert ("The total is " + total);

}

Ok I changed a bunch of stuff and I got the prompt working as well but when I add a 2 in a textbox and a 3 in another. It outputs 23 not 5??? Also how would I hardcode each ticket with a certain price like for example adult price is $10.50. So when I enter a 4 for quantity it multiplies 10.50 with 4 and outputs its?

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;

}

#breakdown{color:black;font-family:impact;}

#info

{

        

        font-weight:bold;

        margin-top:10px;

font-size:15px;        

}

#ticketType{margin-left:30px;float:left;font-size:25px;}

#qty{margin-top:11px;font-size:25px;margin-right:110px;}

#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-top:-470px;margin-right:20px;text-align:center;color:red;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="please">Please enter what time frame the movie is in:</div>

<input Id="beforenoon" type="radio" name="showtype"

value="beforenoon">Before 12 P.M.<br>

<input Id="twelvetofour" type="radio" name="showtype"

value="twelvetofour">Between 12 P.M. and 4 P.M.<br>

<input Id="afterfour" type="radio" name="showtype"

value="afterfour">After 4 P.M.<br><br>

















<div id="please1">Please enter the quantity of each ticket</div>

Please leave blank any that do not apply<br>





<input Id="adult" type="text" size="1" name="adult" >Adult<br>

<input Id="child" type="text" size="1" name="child" >Child<br>

<input Id="senior" type="text" size="1" name="senior" >Senior<br>

<input Id="military" type="text" size="1" name="military" >Military<br>

<input Id="seniorday" type="text" size="1"

name="seniorday" >Senior Day Ticket<br>

<input Id="studentday" 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">

<div id="breakdown">

Total Breakdown

</div>

<br>

<div id="info"><div id="ticketType">Ticket Type</div><div id="qty">Quantity</div><div id="price">Price</div></div>

<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 Adult = Number(document.getElementById('adultTicket').value) || 0;

var Child = Number(document.getElementById('childTicket').value) || 0;

var Senior =  Number(document.getElementById('seniorTicket').value) || 0;

var Military =  Number(document.getElementById('militaryTicket').value) || 0;

var Seniorday =  Number(document.getElementById('seniordayTicket').value) || 0;

var Studentday =  Number(document.getElementById('studentdayTicket').value) || 0;

var total = (Adult + Child + Senior + Military + Seniorday + Studentday);

alert ("The total is " + total);

}





</script>

</body>







</html>

You changed all of the getElements to name'Ticket' without changing the corresponding input names/ids.

If the error console isn't giving you enough information about what is wrong and you can't figure out how to use the debugger (or are using Firefox and haven't installed one) then use alert() confirm() or prompt() to display values at various points so you can follow the code execution - that's what those dialogs are for.

You code is still rotten with errors.

One more time: You changed all of the getElements to name'Ticket' without changing the corresponding input names/ids.
input Id="adult"

If you used Number() as I advised then 2+3 comes to 5, not 23 which is two string values concatenated. I don't think that the code you posted here is the same code as you are using to test. :(

To multiply the number of tickets by price simply do

var Adult = Number(document.getElementById('adultTicket').value) || 0;
var aduitprice = 10.50; // (no $ sign!!)
var adultcost = Adult * adultprice;

If desired add a $ sign to the total at the end before displaying the result.

Quote:

Originally Posted by Philip M (Post 1308421)

I think I fixed everything you are talking about but something is now keeping my calculate now button from working. Nothing appears.

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;        

}

#ticketType{margin-left:30px;float:left;font-size:25px;}

#qty{margin-top:11px;font-size:25px;margin-right:110px;}

#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-top:-470px;margin-right:20px;text-align:center;color:red;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="please">Please enter what time frame the movie is in:</div>

<input Id="beforenoon" type="radio" name="showtype"

value="beforenoon">Before 12 P.M.<br>

<input Id="twelvetofour" type="radio" name="showtype"

value="twelvetofour">Between 12 P.M. and 4 P.M.<br>

<input Id="afterfour" type="radio" name="showtype"

value="afterfour">After 4 P.M.<br><br>

















<div id="please1">Please enter the quantity of each ticket</div>

Please leave blank any that do not apply<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>

<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 senior = document.getElementById('seniorTicket').value;

var military = document.getElementById('militaryTicket').value;

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 Adult = Number(document.getElementById('adultTicket').value) || 0;

var aduitprice = 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 total = childcost+adultcost;

prompt("The total is " + total);

}





</script>

</body>







</html>