Create an HTML5 page that contains a form to collect the following data. The text in...
- Create an HTML5 page that contains a form to collect the following data. The text in bold indicates the id value that should be assigned to each html control:
Product (drop down list) product – iPad, iPhone 6S, Galaxy 5S, Moto X, and so on
Quantity (number) quantity
Unit price (number) unit_price
Discount (%)(number) discount_rate
Date (date) order_date
First Name (text box) first_name
Last Name (text box) last_name
Payment type (drop down list) payment_type – Visa, Master, Discover, Amex, and so on
Card number (text box) card_number
Security code (text box) security_code
Button - <input type="button" id="order_button" value="Place Order">
- Assign the id order_form to the form tag:
<form id ="order_form ">
// labels, text boxes, drop down list, and button should be inside the form tag
</form>
- Below the form, add a blank div tag with the id value 'output':
<div id="output"></div>
This will be used in part 2 to display user output
- Modify the header section of the HTML file to include the <script> tag. The script tag will reference the external JavaScript file that you will create in part II:
<head>
<script src="product_order.js"></script>
</head>
Save this page as product_order.html
Part II - CSS (style.css)
- Create a Cascading Stylesheet file (style.css) to give your
website some styling. Insert a
<link href=”style.css” rel=”stylesheet” /> into the <head> section of your page to apply style rules from the CSS file. - You have the artistic freedom to transform your site via CSS. Keep in mind I’ll be grading mostly against “functionality” through JavaScript (and later PHP) in terms of grading. I will want to see more than what I’m supplying in the Help section below though.
- Keep in mind this is a large fingerprint that defines this as YOUR website.
Part III – JavaScript (product_order.js)
- Create a JavaScript calcTotal() function that retrieves the form data and saves the input to JavaScript variables.
function calcTotal ()
{
}
The calcTotal () function retrieves the values inserted by the user using browser’s DOM and assigns the value to JavaScript variables. For example, retrieval of the first name input can be done as follows:
var first_name = document.getElementById("first_name").value;
After all of the inputs are assigned to JavaScript variables, use the following formula to calculate the user’s order total after considering discount using various Math operators:
var order_total = quantity * unit_price - discounted_amount; // calculate discounted amount properly using discount_rate.
Be sure to use correct variable names that you have assigned to your variables in the formula above.
The last step is to display a message including the order total in the browser below the form.
Use the browser’s DOM to display the following information in the blank div tag created in part I. To assign a text message to a div tag, use the tag’s innerHTML property:
document.getElementById("output").innerHTML = "Thank you for ordering, " + first_name + " " + last_name + ". Your order total is $" + order_total +".";
- Finally, following the calcTotal() function, create an init() function that is called when the page loads to add an event listener to the form:
function init()
{
var order_button = document.getElementById("order_button");
order_button.onclick= calcTotal;
}
window.onload = init;
Be sure to comment your code. Save this page as product_order.js
Homework Answers
Hello, Please find the code, which you requested for. Please add the css and required files as you need.
File: product_order.html
<!DOCTYPE html>
<html>
<head>
<script src="product_order.js"></script>
<link href=”style.css” rel=”stylesheet” />
</head>
<body>
<form id ="order_form">
<div>
Product :
<select name="product" id="product">
<option value="iPad">iPad</option>
<option value="iPhone6S">iPhone 6S</option>
<option value="Galaxy5S">Galaxy 5S</option>
<option value="MotoX">Moto X</option>
</select>
</div>
<div>
Quantity :<input type="number" name="quantity"
id="quantity">
</div>
<div>
Unit price :<input type="number" name="unit_price"
id="unit_price">
</div>
<div>
Discount :<input type="number" name="discount_rate"
id="discount_rate">
</div>
<div>
Date :<input type="date" name="order_date"
id="order_date">
</div>
<div>
First Name :<input type="text" name="fname"
id="first_name">
</div>
<div>
Last Name :<input type="text" name="lname"
id="last_name">
</div>
<div>
Payment Type :
<select name="payment_type" id="payment_type">
<option value="Visa">Visa</option>
<option value="Master">Master</option>
<option value="Discover">Discover</option>
<option value="Amex">Amex</option>
</select>
</div>
<div>
Card Number :<input type="text" name="card_number"
id="card_number">
</div>
<div>
Security Code :<input type="text" name="security_code"
id="security_code">
</div>
<div>
<input type="button" id="order_button" value="Place
Order">
</div>
<div id="output"></div>
</form></body>
</html>
File: product_order.js
<script type="text/javascript">
function calcTotal ()
{
var e = document.getElementById("product");
var product = e.options[e.selectedIndex].value;
var quantity =
parseInt(document.getElementById("quantity").value);
var unit_price =
parseInt(document.getElementById("unit_price").value);
var discount_rate =
parseInt(document.getElementById("discount_rate").value);
var order_date = document.getElementById("order_date").value;
var first_name = document.getElementById("first_name").value;
var last_name = document.getElementById("last_name").value;
var card_number =
document.getElementById("card_number").value;
var security_code =
document.getElementById("security_code").value;
var e = document.getElementById("payment_type");
var payment_type = e.options[e.selectedIndex].value;
var order_total = parseInt(quantity * unit_price -
discount_rate);
document.getElementById("output").innerHTML = "Thank you for
ordering, " + first_name + " " + last_name + ". Your order total is
$" + order_total.toString() +".";
}
function init()
{
var order_button = document.getElementById("order_button");
order_button.onclick= calcTotal;
}
window.onload = init;
</script>
Screenshot: 
Add Answer to:
Create an HTML5 page that contains a form to collect the
following data. The text in...
I created an Html with tabs, then how do I import the constant character content of...
I created an Html with tabs, then how do I import the constant character content of a JS into one of these tabs without editing that JS file? here is my page： <!DOCTYPE html> <html> <body> <div id="main"> <span class="tab"> <button class="current">News</button> <button>Create</button> <button onclick="about()">About</button> <button>Login</button> </span> <div class="con" style="display: block"> For news content</div> <div class="con">For create content</div> <div class="con" id="about">For about content</div> </div> </body> <script type="text/javascript" src='strings.js'></script> <script> var box = document.getElementById('main'); var btns = document.getElementsByTagName('button'); var divs =...
NEED HELP with HTML with Javascript embedding for form validation project below. I have my code...
NEED HELP with HTML with Javascript embedding
for form validation project below. I have my code
below but I'm stuck with validation. If anyone can fix it, I'd
really appreciate.
******************************************************************************
CODE:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project
Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Nice</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<script>
var textFromTextArea;
function getWords(){
var text =...
<html> <head> <title>Sign Up page</title> <form name="validationForm" method="post" onsubmit="return checkvalidation()"> &n
<html> <head> <title>Sign Up page</title> <form name="validationForm" method="post" onsubmit="return checkvalidation()"> <!--div class--> <div class="formvalidation"> <label>Your first Name</label> <span id="showname"></span> <!--label for firstname--> <input type="text" name="firstname" class="formsignup" id ="firstn" placeholder="Enter your Name"> <br><br> <!--lastname--> <label>Your last Name</label> <span id="showlname"></span> <input type="text" name="lastname" class="formsignup" id="lastn" placeholder="Enter your last Name"> <br><br> <!--email--> <label>Your Email</label> <span id="showemail"></span> <input type="email" name="emailid" class="formsignup" size="45" id="emailn" placeholder="Enter your Email"> <br><br> <input type="submit" value="send"> </div> </form> <script> function checkvalidation(){ var name = document.forms["validationForm"]["firstname"].value; var lname...
<!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 4 Hands-on Project 4-3 Author: Da...
<!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 4 Hands-on Project 4-3 Author: Date: Filename: index.htm --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Hands-on Project 4-3</title> <link rel="stylesheet" href="styles.css" /> <script src="modernizr.custom.05819.js"></script> </head> <body> <header> <h1> Hands-on Project 4-3 </h1> </header> <article> <div id="results"> <p id="resultsExpl"></p> <ul> <li id="item1"></li> <li id="item2"></li> <li id="item3"></li> <li id="item4"></li> <li id="item5"></li> </ul> </div> <form> <fieldset> <label for="placeBox" id="placeLabel"> Type the name of a place, then click Submit: </label> <input type="text" id="placeBox"...
Modify this code to store the form elements as variables and display them on the page...
Modify this code to store the form elements as variables and display them on the page in an HTML table. <!DOCTYPE html> <html> <head> <script> function getValues() { var result = ""; result += "First Name: " + document.forms["myForm"]["fname"].value + "<br>"; result += "Last Name: " + document.forms["myForm"]["lname"].value + "<br>"; result += "Address: " + document.forms["myForm"]["address"].value + "<br>"; result += "City: " + document.forms["myForm"]["city"].value + "<br>"; result += "State: " + document.forms["myForm"]["state"].value + "<br>"; document.getElementById("output").innerHTML = result; } </script>...
Using form events functions to answer this question. Use the attached form html file which contains...
Using form events functions to answer this question. Use the attached form html file which contains 2 html radio buttons. When the first choice is chosen, display the text ”First” under the first choice. When the second choice is chosen, display the text ”Second” under the second choice. Instead of using JavaScript complete this question using JQuery <!DOCTYPE html> <html> <head> <title>midterm exam</title> <link rel="stylesheet" href="css/q1.css" /> </head> <body> <div id = "page"> <form> ...
i need the code that goes within the <script> opening and closing following the insturctions of...
i need the code that goes within the <script> opening
and closing following the insturctions of the insturctions of the
pasted assignment screen shots please.
<!DOCTYPE html>
<html>
<head>
<!--
JavaScript 6th Edition
Chapter 3
Hands-on Project 3-1
Filename: index.htm
-->
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width,initial-scale=1.0">
<title>Hands-on Project 3-1</title>
<link rel="stylesheet" href="styles.css" />
<script
src="modernizr.custom.05819.js"></script>
</head>
<body>
<header>
<h1>
Hands-on Project 3-1
</h1>
</header>
<article>
<h2>Lunch selections</h2>
<form>
<input type="checkbox" id="item1" value="8" />
<label for="item1">Fried chicken
($8.00)</label>
<input type="checkbox"...
JavaScript (Please debug this code) When a user enters a string in the input box, the...
JavaScript (Please debug this code) When a user enters a string in the input box, the program is designed to add the string to an array. When the array reaches a certain length, the program displays all the users' entries in a list on the page. When you finish debugging, the user's entry in the input box should be cleared each time the submit button is clicked. Additionally, after five strings are submitted, the entire list of submitted strings should...
I have some code for HTML/Javascript but I need to change it up a bit. Heres...
I have some code for HTML/Javascript but I need to change it up a bit. Heres the assignment and what I have. The part in the bold is what I need help with. I need a button called new timer for when it reaches zero... Thank you. Assignment For this assignment, you will write a timer application in HTML and JavaScript. Your HTML document should contain the following elements/features: HTML tags: An <input> tag labeled "Timer Duration" with the initial...
This is my code so far: <!DOCTYPE html> <html> <head> <title>JavaScript is fun</title> <meta charset="utf-8" />...
This is my code so far: <!DOCTYPE html> <html> <head> <title>JavaScript is fun</title> <meta charset="utf-8" /> </head> <body> <script type ="text/javascript"> //declare a variable and store text in it var x = "JavaScript is fun"; //write the variable 5 times document.write(x + x + x + x + x); //store 5 as string in variable x x = "5"; //store 3 as string in variable y var y = "3"; //write the value x + y to the document document.write("<br>");...
NEED HELP with HTML with Javascript embedding
for form validation project below. I have my code
below but I'm stuck with validation. If anyone can fix it, I'd
really appreciate.
******************************************************************************
CODE:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project
Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Nice</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<script>
var textFromTextArea;
function getWords(){
var text =...
i need the code that goes within the <script> opening
and closing following the insturctions of the insturctions of the
pasted assignment screen shots please.
<!DOCTYPE html>
<html>
<head>
<!--
JavaScript 6th Edition
Chapter 3
Hands-on Project 3-1
Filename: index.htm
-->
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width,initial-scale=1.0">
<title>Hands-on Project 3-1</title>
<link rel="stylesheet" href="styles.css" />
<script
src="modernizr.custom.05819.js"></script>
</head>
<body>
<header>
<h1>
Hands-on Project 3-1
</h1>
</header>
<article>
<h2>Lunch selections</h2>
<form>
<input type="checkbox" id="item1" value="8" />
<label for="item1">Fried chicken
($8.00)</label>
<input type="checkbox"...
Most questions answered within 3 hours.
-
The University of
Texas recently reported that 43% of college students aged 18-24
would spend their...
asked 56 minutes ago -
The length of stay at a specific emergency department in
Phoenix, Arizona, in 2009 had a...
asked 12 minutes ago -
. Please give the mechanism for this type of problem. Step by
Step
The toxin that...
asked 16 minutes ago -
If you have a 1M stock solution and you want to dilute 1 :10
with water,...
asked 18 minutes ago -
In a load instruction, the effective address is obtained by
A) Retriving the address from a...
asked 17 minutes ago -
Use the following information to answer this question.
Windswept, Inc. 2017 Income Statement ($ in millions)...
asked 18 minutes ago -
A mutual fund salesperson has arranged to call on four people
tomorrow. Based on past experience...
asked 52 minutes ago -
Let the RV Y has the pdf
f ( y ) = 6 y ( 1...
asked 1 hour ago -
Question 12
Where should a copy of a private key should be placed so it is...
asked 21 minutes ago -
What is the entropy change to the surroundings when 1 mol of ice
melts in someone's...
asked 40 minutes ago -
Pt1
An electrochemical cell is set up at 25°C based on the overall
reaction represented by...
asked 46 minutes ago -
Explain traveling wave theory. Explain how the peaking of the
wave leads to action potentials and...
asked 37 minutes ago