HTML with JavaScript code needed Uses an html form (not a prompt box) that will
ID: 3837581 • Letter: H
Question
HTML with JavaScript code needed
Uses an html form (not a prompt box) that will connect to JavaScript through the use of the HTML onclick event attribute used in the Submit button element in the form.
Create a Web page that will display the name of a movie theatre, the price of an adult ticket, and the price of a child's ticket.
Your Web Page will use a html "form" (not a prompt box) to obtain from the user their name and the number of adult and children tickets needed to purchase.
Your Submit button, in the form, will use the onclick event handler to call a JavaScript function ( the JavaScript function called in this example is named "displayOrder()").
This function will use the input entered in the FORM to determine the total cost of adult tickets, the total cost of children tickets, and the total of the entire purchase (adult cost + children cost).
Your program will display, in a read-only text box (located in the FORM): the user's name, the number of adult and children tickets entered by the user, the total cost for the adult tickets, the total cost for the children tickets, and the total final cost (adult cost + children cost)
(the displayOrder function is defined within the head tags of the web page- it is called into use when the Submit button is clicked and the onclick event handler activated).
These last 3 numbers should be displayed with a $ and 2 decimal places (use the toFixed(2) function)
Save the file as TicketSales.html. Submit only the actual HTML and JavaScript code in the html file
Explanation / Answer
<!DOCTYPE html>
<html>
<head>
<title>Ticekt Sales</title>
<script>
function displayOrder() {
//show all results
var x = document.getElementsByClassName("result");
for (var i = 0; i < x.length; i++) {
x[i].style.visibility = "visible";
}
var adultPrice = 40.0;
var childPrice = 15.0;
var booking_name = document.getElementById("booking_name").value;
var no_of_adult_tickets = document.getElementById("no_of_adult_tickets").value;
var no_of_child_tickets = document.getElementById("no_of_child_tickets").value;
var val_booking_name = document.getElementById("val_booking_name");
var val_adult_tickets = document.getElementById("val_adult_tickets");
var val_child_tickets = document.getElementById("val_child_tickets");
var val_adult_price = document.getElementById("val_adult_price");
var val_child_price = document.getElementById("val_child_price");
var val_final_price = document.getElementById("val_final_price");
val_booking_name.innerHTML = booking_name;
val_adult_tickets.innerHTML = no_of_adult_tickets ? no_of_adult_tickets : 0;
val_child_tickets.innerHTML = no_of_child_tickets ? no_of_child_tickets : 0;
var totalAdultPrice = parseFloat(no_of_adult_tickets * adultPrice).toFixed(2);
var totalChildPrice = parseFloat(no_of_child_tickets * childPrice).toFixed(2);
var totalPrice = parseFloat(parseFloat(totalAdultPrice) + parseFloat(totalChildPrice)).toFixed(2);
val_adult_price.innerHTML = "$ " + totalAdultPrice;
val_child_price.innerHTML = "$ " + totalChildPrice;
val_final_price.innerHTML = "$ " + totalPrice;
}
</script>
</head>
<body>
<b>Movie Theatre:</b> INOX
<br>
<b>Price of Adult Ticket: </b> $ 40.00
<br>
<b>Price of Child Ticket: </b> $ 15.00
<br>
<br>
<form>
Booking name:
<input type="text" id="booking_name" />
<br> No of Adult Tickets:
<input type="number" id="no_of_adult_tickets" />
<br>No of Child Tickets:
<input type="number" id="no_of_child_tickets" />
<br>
<input type="button" name="submit" value="Submit" />
</form>
<p class="result">
Booking is under name: <span id="val_booking_name"></span>
</p>
<p class="result">
No of adult tickets: <span id="val_adult_tickets"></span>
</p>
<p class="result">
No of child tickets: <span id="val_child_tickets"></span>
</p>
<p class="result">
Price of adult tickets: <span id="val_adult_price"></span>
</p>
<p class="result">
Price of child tickets: <span id="val_child_price"></span>
</p>
<p class="result">
Final price of tickets: <span id="val_final_price"></span>
</p>
</body>
</html>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.