I need this code to calculate the sales tax when you hit the submit button and I can't get it to work. I need to figure out how to connect it to the function. Can someone please point out where I am going wrong? I am very new at this and am wondering what I am doing wrong with my code. This is homework, I am not looking for the answer I just need someone to direct me in the right way.Thanx
My assignment is:
Many companies normally charge a shipping and handling fee for
purchases. Create a Web page that allows a user to enter a purchase
price into a text box; include a JavaScript function that calculates
shipping and handling. Add functionality to the script that adds a
minimum shipping and handling fee of $1.50 for any purchase that is
less than or equal to $25.00. For any orders over $25.00, add 10% to
the total purchase price for shipping and handling, but do not include
the $1.50 minimum shipping and handling fee. Th e formula for calculating
a percentage is price * percent / 100. For example, the formula
for calculating 10% of a $50.00 purchase price is 50 * 10 / 100, which
results in a shipping and handling fee of $5.00. After you determine
the total cost of the order (purchase plus shipping and handling),
display it in an alert dialog box.
Here is my Code: I need this code to calculate the sales tax when you hit the submit button and I can't get it to work. Can someone please point out where I am going wrong?
Code:
<script type="text/javascript">
/*<![CDATA [*/
//Shipping & handling fee
var price=[];
var shipping=calculateShipping(price);
var total=price+shipping;
function calculateShipping()
{
var num = new Number(price);
//This will add $1.50 to any purchases that are less than or equal to $25.00.
if (num <= 25){
return 1.5;
//Here 10% will be added to any purchase that is greater than $25.00 but do not inlcude the
$1.50 fee.
} else{
return num * 10 / 100;
}
}
window.alert("Your total is $" + total + ".")
/* ]]> */
</script>
</head>
<body>
<h1>Enter Purchase Price Here</h1>
<script type="text/javascript">
/* <![CDATA[ */
document.write(parseFloat");
if(price <=25.00){var shipping=1.50}
else{var shipping=price*(10/100)};
var total=(price+shipping).toFixed(2);
/* ]]> */
</script>
<form id="btncalcprice" action="submit-form.php">
<input type='text' name='query'>
</form>
<form>
<input type="button" value="Submit" onClick="alert('YOUR total is $'); return true">
</form>
</body>
EDIT: Reviewed Code
You have some syntax issues in your code, additionally the methodology you were following was not quite correct. You need to call the function from the button onclick event, then run your JavaScript. You will find what you need in the updated code example below. Make note that I used parseFloat instead of parseInt in order to incorporate decimals...
<script type="text/javascript">
/*<![CDATA [*/
function calculateShipping() {
var price = document.getElementById('price').value;
//This will add $1.50 to any purchases that are less than or equal to $25.00.
if (price <= 25){
price=parseFloat(price) + 1.5;
} else {
//add 10%
var percentToAdd=parseFloat(price) * .1;
price=parseFloat(price)+parseFloat(percentToAdd);
}
document.getElementById('result').innerHTML='Total shipping cost: '+price;
}
/* ]]> */
</script>
</head>
<body>
<h1>Enter Purchase Price Here</h1>
<div id="result"></div>
<input type="text" name="price" id="price">
<input type="button" value="Submit" onClick="calculateShipping(); return false;">
</body>
First of all you dont need the form action if you are just calling a function, secondly if you want to prevent the default submit of the form, then return false in your onclick... it should look like this:
onclick="calculateShipping(); return false;"
Related
A parking garage charges a $2.00 minimum fee to park for up to three hours. It charges an additional $0.50 per hour for each hour or part thereof in excess of three hours. The maximum charge for any given 24-hour period is $10.00. Assume that no car parks for longer than 24 hours at a time.
The web page should calculate the entry hour and minute as well as the exit hour and minute with text boxes. Hours will be entered in a 24 hour format. Once the submit button is selected, the webpage should display the charge, total number of charges and running total of charges. Note that the latter two values will be maintained as the page is used repetedly.
Create and use functions calculateTime and calculateCharge, the former to figure the amount of time in the garage and the latter to figure the charge.
I got the HTML running, however I cannot get the values to display on to the textbox. I also cannot figure out how to calculate the charge. Any help would be appreciated! Thank you.
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<title>Parking Charge</title>
</head>
<body><div align="center">
<form id="1"><h1><p style="background-color:black ; color:gold;">Parking Garage Charge Calculator</p></h1><hr>
<p>ENTRY TIME: <input type = "number" name = "EntryTime" id = "entTime"></p>
<p>EXIT TIME : <input type="number" id="extTime" name="ExitTime">
<p>Number of Hours Parked: <input type ="number" name="noOfHours" id="nh"><br><br>
<input type="button" id="calculate" name="calc" value="Calculate" onclick="calculateTime()"/>
<input type="reset" id="resetBtn" value="Clear"><br><br>
<input type="number" id="total" name="totalCost" placeholder="Your Total Payment" readonly/><hr>
</form>
</div>
</body>
<script src="P2JS.js"></script>
</html>
JAVASCRIPT CODE:
function calculateTime(){
var EntryTime = document.getElementById('entTime').value;
var ExitTime = document.getElementById('extTime').value;
var noOfHours = (EntryTime - ExitTime);
document.getElementById("nh").innerHTML = noOfHours;
}
/*Function to calculate the payment on the number of hours parked*/
function calculateCharge(){
var charge = 3.50;
var payment = (noOfHours * charge);
if (noOfHours <= 3){
totalPayment = charge * noOfHours;
return payment;
}
else {
payment = ((noOfHours - 3) * (charge + 0.50)) + (charge * 3);
return payment;
}
}
The reason the hours aren't showing is because your are using an input to display it and asking it to show it in the innerHTML which input doesn't have.
So what you want is give it a value instead.
Just add ' value="" ' to your input html
<input type="number" name="noOfHours" value="" id="nh">
and change '.innerHTML' for '.value' in your js.
document.getElementById("nh").value = noOfHours;
You might also want to change your equation for ExitTime - EntryTime because right now it gives you a negative number of hours ;)
Here is a sample idea.
Amount - discount = amount paid by the customer.
But the customer pay less and the box due need to be increment dynamically.
Can anyone help me please?
Here is a simple version of what I believe you're asking for:
HTML
Price: <input type="text" id="tb-price" />
Discount (%) <input type="text" id="tb-discount" />
Total: <span id="lbl-total" />
Javascript (jQuery required)
$(function(){
// vars
var $tbPrice = $('#tb-price');
var $tbDisc = $('#tb-discount');
var $lblTotal = $('#lbl-total');
// events
$tbPrice.on('input', calc);
$tbDisc.on('input', calc);
// calculation
function calc(){
var x = $tbPrice.val() * ($tbDisc.val() / 100);
var y = $tbPrice.val() - x;
$lblTotal.html(y);
}
});
Example: http://jsfiddle.net/zkhx1z1d/
Do note that there is no validation here and assumes that the user input is clean. Also this should only be used to show the user what they expect to pay, all calculations should be done/verified by the server as suggested by AlienWebguy
The Discount field does not register
(discount is supposed to subtract from Grand Total)(check discount sample)
check the the jsfiddle click here
I want it to act like this picture. (with the discount being manually inputed) http://i.dailymail.co.uk/i/pix/2013/02/07/article-2275089-17694138000005DC-460_634x497.jpg
Javascript
function recordToFilename() {
var input = document.getElementById('discountvalue'),
discount12 = input.value;
Change your button to
<input type="button" onclick="recordToFilename();" value="Submit Discount" />
And function
function recordToFilename() {
var input = document.getElementById('discount'),
discount12 = input.value;
alert (discount12);
}
you have 2 id="discount". Change one of the id and the there is no problem to register the input value to discount12.
Put this line document.getElementById('discounts').innerHTML = "<strong>Discount </strong>: $" + (salesTotal * 0.14 + salesTotal - discount12).toFixed(2);
in your recordToFilename() method and make sure your variable is chage to discount12 not discount
I have an assignment that i need to do however I am not able to get in touch with my teacher for the next 3 days cuz of a holiday. It needs to be finished before I go back. I am NOT an expert nor anywhere near one in javascript. I am taking classes and we arent all the way finished talking about this assignment but my teacher always gives extra credit to those who can figure out a problem before we finish talking about it.
-INSTRUCTIONS-
You will need to create some variables
and functions to calculate the total cost for individual
pizza orders and calculate the Grand Total for all orders.
Use the following values for the calculations:
A large pizza costs $10
The Tax Rate is 8.25%
The delivery tip is outlined below by the customer
Use the random() method to generate the range of tip % paid by the customer, where indicated.
Format all amounts to 2 decimal places
Customer 1 orders 5 large pizza's and pays a 10% delivery tip
Customer 2 orders a random number of pizza's (between 1–25) and pays a random
delivery tip (between (0%-25%)
Simple Pizza Order!
var grandTotal = 0;
var pizzaCost = 10;
var taxRate = .0825;
var tipRate = .10;
quantity = 5;
var subTotal = pizzaCost * quantity
var tipAmount = subTotal * taxRate
var taxAmount = subTotal * taxRate
var total = subTotal + tipAmount + taxAmount
grandTotal + = total;
This is what i have so far. How do i make costumer 1's order show up on the page with the calculations and all that? I got this far but the rest is stumped me.
any help will be appreciated thanks in advance.
function Calculate() {
var pizzaCost = Number(document.getElementById('PizzaCost').value);
var tax = Number(document.getElementById('TaxRate').value);
var tip = document.getElementById('Tip').value;
tip = Number((tip.substring(0, tip.length - 1)));
var result = pizzaCost + (pizzaCost * tax) + (pizzaCost * (tip / 100));
console.log({
pizzaCost: pizzaCost,
tax: tax,
tip: tip,
total: result
});
}
function GenerateTip() {
document.getElementById('Tip').value = (Math.floor((Math.random() * 50) + 1) + "%");
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div>
<h1>Simple Pizza Order</h1>
</div>
<div>
<p>Pizza Cost:
<input type="text" id="PizzaCost">
</p>
<p>Tax Rate:
<input type="text" id="TaxRate">
</p>
<p>Delivery Tip:
<input type="text" id="Tip">
<input type="button" value="Generate Tip" onClick="GenerateTip();">
</p>
<p>
<input type="button" value="Calculate" onClick="Calculate();">
</p>
<p id="result"></p>
</div>
<script>
</script>
</body>
</html>
So I am working on this code and I cannot seem to be able to combine the radio button amounts with the inputted amount in the textbox. The submit button is supposed to calculate. Here is the question, I am suppose be creating this code for.
Many companies normally charge a shipping and handling fee for purchases. Create a Web page that allows a user to enter a purchase price into a text box;
Include a JavaScript function that calculates shipping and handling.
Add functionality to the script that adds a minimum shipping and handling fee of $1.50 for any purchase that is less than or equal to $25.00.
For any orders over $25.00, add 10% to the total purchase price for shipping and handling, but do not include the $1.50 minimum shipping and handling fee.
The formula for calculating a percentage is price * percent / 100. For example, the formula for calculating 10% of a $50.00 purchase price is 50 * 10 / 100, which results in a shipping and handling fee of $5.00.
After you determine the total cost of the order (purchase plus shipping and handling), display it in an alert dialog box
This is the code I have so far. Any tips would be helpful. I can not figure out what I am doing wrong or how to fix it.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Calculate Shipping</title>
<script type="text/javascript">
/* <[CDATA[ */
var price=[];
var shipping=[];
var total=price+shipping;
function calculateshipping(){
var price = parseFloat(document.getElementByid('ent').value);
var total = (price <=25) ? price +1.50 : 1.1 * price;
window.alert("the purchase price with shipping is $" + total.tofixed(2));
}
function calculateShipping(){
if (price <=25){
shipping = (price =1.25);
}
else{
shipping = (price *10/100);
}
window.alert("The purchase price with shipping is "
+document.calculate.ent.value);
}
/*]]*/
</script>
</head>
<body>
<form name ="calculate" action="">
<p>
Enter Purchase Price
</p>
<input type="text" name="ent" />
<input type="button" name="button" value="submit" Onclick="calculateShipping()"/>
</form>
</body>
</html>
First, change your input tag like the comment on your post mentioned:
<input type="text" name="ent" id="ent" />
Then replace your entire script tag with this:
<script type="text/javascript">
function calculateShipping(){
price = parseFloat(document.getElementById("ent").value);
if (price <=25){
shipping = 1.5;
}else{
shipping = (price *10/100);
}
total = price + shipping;
window.alert("The purchase price with shipping is "+total);
}
</script>
Adding the 'id' attribute gave something for javascript to grab onto when executing the function. Each time you click, it gets the value of that input element and parses it as a float.
Well first off you have two javascript methods named CalculateShipping() - how do you determine what is getting executed? Shouldn't it be just one single method CalculateShipping() like this
function calculateshipping(){
var price = parseFloat(document.getElementByid('ent').value);
var total = (price <=25) ? price +1.50 : 1.1 * price;
window.alert("the purchase price with shipping is $" + total.tofixed(2));
if (price <=25){
shipping = (price =1.25);
}
else{
shipping = (price *10/100);
}
window.alert("The purchase price with shipping is " + document.calculate.ent.value);
}
Seems like quite a basic problem, change shipping = (price =1.25); to just shipping = 1.5;. Then just calculate the price and alert it:
if(price <= 25)
shipping = 1.5;
else
shipping = (price*10)/100;
price += shipping;
alert(price);
Here is a fiddle: http://jsfiddle.net/HMRNB/