I am trying to get the sum of radio button and checkbox on the click of the calculate button. The usps button is supposed to be $4 and the ups button is supposed to be 2.50. I cannot figure out how to just add that amount to the calculated value. I can only get the sum of the quantity*price and the gift wrap option. Thank you for all you help! Here is my code. I am guessing most of the work has to be done within the function calculatetotal()
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Test JavaScript Form</title>
<meta charset="utf-8">
<style>
body {background: navy;}
form {display: block; background: #ccc; width: 80%; color: navy; font-size: 14px; margin: auto;}
#wrapper {width: 80%; margin: auto; background: navy; height: 800px;}
h1 {color: white; padding: 0px 100px;}
.buttons {width: 150px; height: 40px; background: white; color: red; border: 2px solid black; font-size: 18px;}
.inputs {margin-left: 10px;}
ul {text-decoration-style: none; padding: 20px;}
li {display: inline; padding: 20px;}
p {margin-left: 5px; padding: 2px 2px;}
</style>
</head>
<body>
<script>
function sayHello() {
var userName;
userName = document.getElementById("fname").value
alert ("Hello" + userName);
}
function validateInput() {
if (document.getElementById("fname").value == "", document.getElementById("lname").value == "", document.getElementById("email").value == "", document.getElementById("qty").value == "" )
{
document.getElementById("fname").style.background = "red";
document.getElementById("fname").value = "Enter your First Name";
document.getElementById("lname").style.background = "red";
document.getElementById("lname").value = "Enter your Last Name";
document.getElementById("email").style.background = "red";
document.getElementById("email").value = "Enter your Email";
document.getElementById("qty").style.background = "red";
document.getElementById("qty").value = "Enter the Quantity";
document.getElementById("price").style.background = "red";
document.getElementById("price").value = "Enter the Price";
document.getElementById("due").style.background = "red";
document.getElementById("due").value = "Enter the Amount Due";
return false
}
else{
return true
}
}
function changeText(){
document.getElementById("changetext").innerHTML = "Complete the Order Form"
}
function mouseOut(){
document.getElementById("changetext").innerHTML = "Order Form"
}
function calculatetotal(){
var a = 7.50
var b = 5.00
var c = 2.50
var x = document.getElementById("qty").value;
var y = document.getElementById("price").value;
var z = (x*y) ;
if ( document.getElementById("wrap").checked)
{
document.getElementById("due").value = z + a ;
}
else {
document.getElementById("due").value = z
}
}
</script>
<div id=wrapper>
<h1 id="changetext" onmouseover="changeText()" onmouseout="mouseOut()">Order Form</h1>
<form method="get" onsubmit="return validateInput()" >
<p>*First Name:</p> <input class="inputs" type="text" name="fname" id="fname">
<p>*Last Name:</p> <input class="inputs" type="text" name="lname" id="lname">
<p>*E-mail: </p><input class="inputs" type="text" name="email" id="email">
<p>Gift Wrap: <input class="inputs" type="checkbox" name="wrap" id="wrap" value = "wrap" ></p>
<p>Select Shipping Method:
<input class="inputs" type="radio" name="ship" id="usps" value = "usps" >USPS
<input type="radio" name="ship" id="ups" value = "ups">UPS
<p>*Quantity to Order:</p> <input class="inputs" type="text" name="qty" id="qty" style="text-align:right;">
<p>*Price per Unit:</p> <input class="inputs" type="text" name="price" id="price" style="text-align:right;" >
<p>Amount Due:</p> <input class="inputs" type="text" name="due" id="due" style="text-align:right;" readonly>
<ul>
<li><input class="buttons" type="button" value="Calculate Total" id="total" onclick="calculatetotal()" ></li>
<li><input class="buttons" type="submit" value="Submit"></li>
<li><input class="buttons" type="button" value="Print Form" id="print"></li></br>
</ul>
</form>
</div>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire