|
JavaScript - Calculate Cost Not Working
I am having troubles with calculating costs on a form. When I press the cost button, it doesn't generate the calculations.
Code: var fday = document.getElementById("reg_start_date").value;
var lday = document.getElementById("reg_end_date").value;
if (fday == "2011-09-05" && lday == "2011-09-06")
{
cost = cost * 2;
}
else if (fday == "2011-09-06" && lday == "2011-09-07")
{
cost = cost * 2;
}
else if (fday == "2011-09-05" && lday == "2011-09-07")
{
cost = cost * 3;
}
Similar TutorialsHi there I have tried to work on this code for the last 2 weeks, can not figure out what is wrong with my code, please have a look for me, it will greatly appreciated from me; here my details; I work on <script type="text/javascript" language="javascript"> from dreamweaver to set my code to calculate, different Fiji tour (4 options, choose 1 in options) Payment (4 options, choose 1 in options) The cost of tour - discount base on tour cost. (discount has 4 different calculate) Need to be alert if they not choose 1 in each type. Second cost if they choose to fly out , will cost plus $400 on top the above cost. This is an optional, so they don;t need to buy if they want. I have attached my code, please have a look, Thank you very much It's been a long time since I've messed around with Javascript. I had some resources and books that sort of showed what I was wanting to do. Essentially what I am trying to create is a calculator which allows the user to check the components of their computer and when they hit "calculate" it will output the price of the system for them. I found some simplified examples of what I am trying to do online, but I cannot for the life of me figure out why when I hit "calculate" nothing happens The code is below (I pasted the wholes of both codes because I'm not sure where exactly the problems are). Any help is definitely appreciated! html code: Code: <html>
<head>
<script language="JavaScript1.1" src="calculate.js" type="text/javascript"></script>
</head>
<body onLoad="load ()">
<center>
<form name="calc" method="POST">
<table width="100%" border="0" cellpadding="3">
<tr>
<td colspan="11"><center><h1>Computer Pricing Calculator</h1></center></td>
</tr>
<tr>
<th bgcolor="#000000" colspan="2" align="center"><font color="white" size="+2">TYPE</font></th>
<td width="5"></td>
<th bgcolor="#000000" colspan="5" align="center"><font color="white" size="+2">PROCESSOR</font></th>
<td width="5"></td>
<th bgcolor="#000000" colspan="2" align="center"><font color="white" size="+2">HARD DRIVE</font></th>
</tr>
<!--Row 1 -->
<tr>
<td colspan="2"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">Single Core Processor</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="single" size="10"></td>
<td width="5"></td>
<td colspan="2"></td>
<td width="5"></td>
<td colspan="2"></td>
<td width="5"></td>
</tr>
<!--Row 2 -->
<tr>
<td colspan="2"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">Dual Core Processor</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="double" size="10"></td>
<td width="5"></td>
<td colspan="2"></td>
<td width="5"></td>
<td colspan="2"></td>
<td width="5"></td>
</tr>
<!--Row 3 -->
<tr>
<td bgcolor="#eeeeee" width="20%">Desktop/Tower</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="pc" size="10"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">Core i-3 Processor</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="triple" size="10"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">Hyper-threaded Processor</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="ht" size="10"></td>
<td width="5"></td>
<td colspan="2"></td>
<td width="5"></td>
</tr>
<!--Row 4 -->
<tr>
<td colspan="2"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">Quad Core Processor</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="quad" size="10"></td>
<td width="5"></td>
<td colspan="2"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">Enter the size (gb)</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="text" name="size" size="1"></td>
<td width="5"></td>
</tr>
<!--Row 5 -->
<tr>
<td bgcolor="#eeeeee" width="20%">Laptop</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="laptop" size="10"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">Core i-5 Processor</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="five" size="10"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">Enter the speed (ghz)</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="text" name="speed" size="1"></td>
<td width="5"></td>
<td colspan="2"></td>
<td width="5"></td>
</tr>
<!--Row 6 -->
<tr>
<td colspan="2"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">Six Core Processor</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="six" size="10"></td>
<td width="5"></td>
<td colspan="2"></td>
<td width="5"></td>
<td colspan="2"></td>
<td width="5"></td>
</tr>
<!--Row 7 -->
<tr>
<td colspan="2"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">Core i-7 Processor</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="seven" size="10"></td>
<td width="5"></td>
<td colspan="2"></td>
<td width="5"></td>
<td colspan="2"></td>
<td width="5"></td>
</tr>
<tr>
<td height="25">
</td>
</tr>
<!--Row 1 -->
<tr>
<th bgcolor="#000000" colspan="2" align="center"><font color="white" size="+2">RAM</font></th>
<td width="5"></td>
<th bgcolor="#000000" colspan="2" align="center"><font color="white" size="+2">VIDEO CARD</font></th>
<td width="5"></td>
<th bgcolor="#000000" colspan="2" align="center"><font color="white" size="+2">OPTICAL DRIVE</font></th>
<td width="5"></td>
<th bgcolor="#000000" colspan="2" align="center"><font color="white" size="+2">OFFICE</font></th>
</tr>
<!--Row 2 -->
<tr>
<td bgcolor="#eeeeee" width="20%">512 MB RAM</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="ram512mb" size="10"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">No Video Card</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="novid" size="10"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">CD/ROM Only</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="cdrom" size="10"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">Open Office</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="nooffice" size="10"></td>
</tr>
<!--Row 3 -->
<tr>
<td bgcolor="#eeeeee" width="20%">768 MB RAM</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="ram768mb" size="10"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">64 MB Video Card</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="vid64mb" size="10"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">CD/RW Only</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="cdrw" size="10"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">Office 97</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="office97" size="10"></td>
</tr>
<!--Row 4 -->
<tr>
<td bgcolor="#eeeeee" width="20%">1.0 GB RAM</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="ram1000mb" size="10"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">128 MB Video Card</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="vid128mb" size="10"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">CD/RW - DVD/ROM</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="cdrwdvdrom" size="10"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">Office 2003</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="office03" size="10"></td>
</tr>
<!--Row 5 -->
<tr>
<td bgcolor="#eeeeee" width="20%">1.5 GB RAM</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="ram1500mb" size="10"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">256 MB Video Card</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="vid256mb" size="10"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">CD/RW - DVD/RW</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="cdrwdvdrw" size="10"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">Office 2007</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="office07" size="10"></td>
</tr>
<!--Row 6 -->
<tr>
<td bgcolor="#eeeeee" width="20%">2.0 GB RAM</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="ram2000mb" size="10"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">512 MB DDR Video Card</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="vid512mb" size="10"></td>
<td width="5"></td>
<td width="20%"></td>
<td align="center" width="4%"></td>
<td width="5"></td>
<td width="20%"></td>
<td align="center" width="4%"></td>
</tr>
<!--Row 7 -->
<tr>
<td bgcolor="#eeeeee" width="20%">2.5 GB RAM</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="ram2500mb" size="10"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">768 MB Video Card</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="vid768mb" size="10"></td>
<td width="5"></td>
<th bgcolor="#000000" colspan="2" align="center"><font color="white" size="+2">CONNECTIVITY</font></th>
<td width="5"></td>
<th bgcolor="#000000" colspan="2" align="center"><font color="white" size="+2">OS</font></th>
</tr>
<!--Row 8 -->
<tr>
<td bgcolor="#eeeeee" width="20%">3.0 GB RAM</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="ram3000mb" size="10"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">1.0 GB Video Card</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="vid1000mb" size="10"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">NIC</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="nic" size="10"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">Windows XP</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="xp" size="10"></td>
</tr>
<!--Row 9 -->
<tr>
<td bgcolor="#eeeeee" width="20%">3.5 GB RAM</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="ram3500mb" size="10"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">DDR2/DDR3 Video Card</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="ddr23vid" size="10"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">Modem</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="modem" size="10"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">Windows Vista</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="vista" size="10"></td>
</tr>
<!--Row 10 -->
<tr>
<td bgcolor="#eeeeee" width="20%">4.0 GB RAM</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="ram4000mb" size="10"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">DDR5 Video Card</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="ddr5vid" size="10"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">Wireless</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="wireless" size="10"></td>
<td width="5"></td>
<td bgcolor="#eeeeee" width="20%">Windows 7</td>
<td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="windows7os" size="10"></td>
</tr>
<tr>
<td height="40">
</td>
</tr>
<tr>
<td colspan="3"></td>
<td colspan="2" align="center"><input name="Submit" type="submit" style="background-color:#ffff00; color:#000000; border:5px solid #000000; font-family:arial; font-size:15pt; font-weight:900; letter-spacing=2px" onClick="count ()" value="CALCULATE PRICE!"></td>
<td width="5"></td>
<td colspan="2" align="center"><input type="reset" value="RESET VALUES!" style="background-color:#ffff00; color:#000000; border:5px solid #000000; font-family:arial; font-size:16pt; font-weight:900; letter-spacing=2px"></td>
<td colspan="3"></td>
</tr>
<tr>
<td height="40">
</td>
</tr>
<tr>
<td bgcolor="#ffffff" colspan="11" align="center"><font size="18">PRICE = $</font><input name="pay" type="text" style="background-color:#ffffff; color:#000000; border:1px solid #000000; font-family:tahoma; font-size:25pt; letter-spacing=1px" size="10"></td>
</tr>
</table>
</form>
</center>
</body>
</html>
javascript code (calculate.js) Code: function load()
{
window.status = "Pricing Guide"
}
function count()
{
//Type variables
var pcprice = 0;
var laptopprice = 20;
var typeprice = 0;
//Processor variables
var singleprice = 1.67;
var doubleprice = 2.05;
var tripleprice = 1.31;
var quadprice = 2.30;
var fiveprice = 1.97;
var sixprice = 2.0;
var sevenprice = 3.09;
var htprice = 0;
var processorprice = 0;
//RAM variables
var ram512mbprice = 15;
var ram756mbprice = 22;
var ram1000mbprice = 30;
var ram1500mbprice = 45;
var ram2000mbprice = 60;
var ram2500mbprice = 75;
var ram3000mbprice = 80;
var ram3500mbprice = 95;
var ram4000mbprice = 110;
var ramprice = 0;
//Video Card variables
var novidprice = 0;
var vid64mbprice = 10;
var vid128mbprice = 15;
var vid256mbprice = 20;
var vid512mbprice = 28;
var vid768mbprice = 33;
var vid1000mbprice = 40;
var ddr23vidprice = 1.5;
var ddr5vidprice = 2;
var vidprice = 0;
var videoprice = 0;
//Optical Drives variables
var cdromprice = 2;
var cdrwprice = 5;
var cdrwdvdromprice = 20;
var cdrwdvdrwprice = 35;
var driveprice = 0;
//Connectivity variables
var nicprice = 0;
var modemprice = 5;
var wireless price = 20;
var connectprice = 0;
//Office variables
var noofficeprice = 0;
var office97price = 0;
var office03price = 30;
var office07price = 50;
var officeprice = 0;
//Operating System variables
var xpprice = 0;
var vistaprice = 0;
var windows7osprice = 110;
var osprice = 0;
//Hard drive - Input Box
var hdsize = document.getElementById('size');
var hdprice = 0;
//Processor Speed - Input Box
var pcspeed = document.getElementById('speed');
var processorprice = 0;
//COMPUTER TYPE - Check Boxes
if (calc.pc.checked){
var typeprice = document.calc.pc.value = pcprice;
}
if (calc.laptop.checked){
var typeprice = document.calc.laptop.value = laptopprice;
}
//Hard Drive
var hdprice = hdsize * 0.30;
//Processor - Check Boxes
if (calc.single.checked){
var processorprice = document.calc.single.value = singleprice * pcspeed;
}
if (calc.double.checked){
var processorprice = document.calc.double.value = doubleprice * pcspeed;
}
if (calc.triple.checked){
var processorprice = document.calc.triple.value = tripleprice * pcspeed;
}
if (calc.quad.checked){
var processorprice = document.calc.quad.value = quadprice * pcspeed;
}
if (calc.five.checked){
var processorprice = document.calc.five.value = fiveprice * pcspeed;
}
if (calc.six.checked){
var processorprice = document.calc.six.value = sixprice * pcspeed;
}
if (calc.seven.checked){
var processorprice = document.calc.seven.value = sevenprice * pcspeed;
}
if (calc.ht.checked){
var htprice = document.calc.ht.value = 10;
}
//RAM - Check Boxes
if (calc.ram512mb.checked){
var ramprice = document.calc.ram512mb.value = ram512mbprice;
}
if (calc.ram756mb.checked){
var ramprice = document.calc.ram756mb.value = ram756mbprice;
}
if (calc.ram1000mb.checked){
var ramprice = document.calc.ram1000mb.value = ram1000mbprice;
}
if (calc.ram1500mb.checked){
var ramprice = document.calc.ram1500mb.value = ram1500mbprice;
}
if (calc.ram2000mb.checked){
var ramprice = document.calc.ram2000mb.value = ram2000mbprice;
}
if (calc.ram2500mb.checked){
var ramprice = document.calc.ram2500mb.value = ram2500mbprice;
}
if (calc.ram3000mb.checked){
var ramprice = document.calc.ram3000mb.value = ram3000mbprice;
}
if (calc.ram3500mb.checked){
var ramprice = document.calc.ram3500mb.value = ram3500mbprice;
}
if (calc.ram4000mb.checked){
var ramprice = document.calc.ram4000mb.value = ram4000mbprice;
}
//VIDEO CARD - Check Boxes
if (calc.novidprice.checked){
var vidprice = document.calc.novidprice.value = novidprice;
}
if (calc.vid64mb.checked){
var vidprice = document.calc.vid64mb.value = vid64mbprice;
}
if (calc.vid128mb.checked){
var vidprice = document.calc.vid128mb.value = vid128mbprice;
}
if (calc.vid256mb.checked){
var vidprice = document.calc.vid256mb.value = vid256mbprice;
}
if (calc.vid512mb.checked){
var vidprice = document.calc.vid512mb.value = vid512mbprice;
}
if (calc.vid768mb.checked){
var vidprice = document.calc.vid768mb.value = vid768mbprice;
}
if (calc.vid1000mb.checked){
var vidprice = document.calc.vid1000mb.value = vid1000mbprice;
}
var videoprice = vidprice;
if (calc.ddr23vid.checked){
var videoprice = document.calc.ddr23vid.value = vidprice * 1.5;
}
if (calc.ddr5mb.checked){
var videoprice = document.calc.ddr5mb.value = vidprice * 2;
}
//OPTICAL DRIVES - Checkbox
if (calc.cdrom.checked){
var driveprice = document.calc.cdrom.value = cdromprice;
}
if (calc.cdrw.checked){
var driveprice = document.calc.cdrw.value = cdrwprice;
}
if (calc.cdrwdvdrom.checked){
var driveprice = document.calc.cdrwdvdrom.value = cdrwdvdromprice;
}
if (calc.cdrwdvdrw.checked){
var driveprice = document.calc.cdrwdvdrw.value = cdrwdvdrwprice;
}
//CONNECTIVITY - Checkbox
if (calc.nic.checked){
var connectprice = document.calc.nic.value = nicprice;
}
if (calc.modem.checked){
var connectprice = document.calc.modem.value = modemprice;
}
if (calc.wireless.checked){
var connectprice = document.calc.wireless.value = wirelessprice;
}
// OFFICE - Checkbox
if (calc.noffice.checked){
var officeprice = document.calc.nooffice.value = officeprice;
}
if (calc.office97.checked){
var officeprice = document.calc.office97.value = office97price;
}
if (calc.office03.checked){
var officeprice = document.calc.office03.value = office03price;
}
if (calc.office07.checked){
var officeprice = document.calc.office07.value = office07price;
}
//OPERATING SYSTEM - Checkbox
if (calc.xp.checked){
var osprice = document.calc.xp.value = xpprice;
}
if (calc.vista.checked){
var osprice = document.calc.vista.value = vistaprice;
}
if (calc.windows7os.checked){
var osprice = document.calc.windows7os.value = windows7osprice;
}
document.calc.pay.value = typeprice + processorprice + htprice + ramprice + videoprice + driveprice + connectprice + officeprice + osprice + hdprice;
}
I want the calculator to take what was clicked display the item number and also the cost. (if possible i'd like to be able to display cost with no button) sorry if the code is messy i'm new to javascript. Code: <SCRIPT TYPE="TEXT/JAVASCRIPT">
// Definitions
var in2 = ""
var in3 = ""
//costs
var $mat = ""
var cmat = Number($mat)
var $sqft = ""
var csf = Number($sqft)
var chngcost = cmat*csf
var $coga = 30
var $cos = 40
var $coshp = 15
var $total = chngcost + $coga + $cos + $coshp
// Add a letter to string
function itemnumber2(numb) {
in2 = numb
document.myform.i2.value = in2
document.itemnumber.i2.value = in2
if (in2 == "10") {
$mat = 3
document.myform.cmat1.value = $mat
}
if (in2 == "11") {
$mat = 6
document.myform.cmat1.value = $mat
}
if (in2 == "12") {
$mat = 12
document.myform.cmat1.value = $mat
}
}
function itemnumber3(numb) {
in3 = numb
document.myform.i3.value = in3
document.itemnumber.i3.value = in3
if (in3 == "1") {
$sqft = 7.5
document.myform.sqrf1.value = $sqft
}
if (in3 == "2") {
$sqft = 5.5
document.myform.sqrf1.value = $sqft
}
if (in3 == "3") {
$sqft = 5
document.myform.sqrf1.value = $sqft
}
}
//total cost function
function totalcost() {
ttc1 = $total
document.myform.ttc.value = ttc1
}
</SCRIPT>
Code: <input type="radio" id="10" name="Size" value="18x22" onclick="itemnumber2(10)"> 18" X 22"<br> <input type="radio" id="11" name="Size" value="24x36" onclick="itemnumber2(11)"> 24" X 36"<br> <input type="radio" id="12" name="Size" value="36x48" onclick="itemnumber2(12)"> 36" X 48"<br> Code: <input type="radio" id="1" name="Material" value="Photo Gloss" onclick="itemnumber3(1)"> Photo Gloss<br> <input type="radio" id="2" name="Material" value="Bond Laminate" onclick="itemnumber3(2)"> Bond Laminate<br> <input type="radio" id="3" name="Material" value="Photo Gloss" onclick="itemnumber3(3)"> Vinyl<br> Code: <form name="itemnumber" action="#"> <span class="style6">Item # <input type="text" size="3" name="i1" value="101" disabled>- <input type="text" size="2" name="i2" disabled>-<input type="text" size="1" name="i3" disabled></span></p> </form> Code: <input name="cost" type="button" onclick="totalcost()" value="Cost"> $<input type="text" size="5" name="ttc" disabled> I need to implement a function in JavaScript to calculate the total of the purchase which is equal to price of each tool * quantity ordered* sales tax=.08. I also need to use confirm() to display the total cost of the purchase so the user can see it. If my user confirms the order by clicking ok then but clicking cancel will terminate the order. <!DOCTYPE html> <html> <head> <title>Form</title> <meta charset="UTF-8" /> <body> <h1 style="text-align:center"> Hardware Store</h1> <form action="http://www.yahoo.com/formtest.php"> <p> <label> Buyer's Name: <input type="text" name="name" size="30"/> </label> <label> Street Address: <input type="text" name="street" size="30"/> </label> <label> City, State, Zip: <input type="text" name="city" Size="30"/> </label> </p> <table> <tr> <th> Tool Name </th> <th> Price </th> <th> Quantiy </th> </tr> <tr> <td> Hammer </td> <td> $12.00</td> <td> <input type= "text" name="Hammer" size="2" /> </td> </tr> <tr> <td> Shovel </td> <td> $18.00 </td> <td> <input type="text" name="Shovel" size="2" /> </td> </tr> <tr> <td> Trimmer </td> <td> $22.00 </td> <td> <input type="text" name="Trimmer" size="2" /> </td> </tr> </table> <h2> Payment Method </h2> <label> Visa <input type="radio" name="payment" id="payment_visa" value="visa" checked="checked"/> </label> <br /> <label> Mastercard <input type="radio" name="payment" id="payment_mastercard" value="mastercard"/> </label> <br /> <label> American Express <input type="radio" name="payment" id="payment_american_express" value="american express"/> </label> <br /> <input type="submit" value="Submit" /> </form> </body> </html> hi, I've got a problem and i really need help. this is my code <script> var y= new Date(); y.getFullYear() + '<br />'; alert(y); var year = new Date(); year.setFullYear(prompt('Enter the year','1990'),prompt('Enter the month','1'), prompt('Enter the day','1')); alert(year); var yy = y-year; alert(yy); </script> i want when a user write his/her birthday JS calculate the age. that's all anyone would you help me I have some problem to calculate PHP Code: <table width="415" cellspacing="1" cellpadding="1"> <tr> <th width="151" scope="col">Price</th> <th width="189" scope="col">qty</th> <th width="63" scope="col">total</th> </tr> <tr> <td><label> <input name="price" type="text" id="price" value="2000"> </label></td> <td><label> <input name="qty" type="text" id="qty" value="2"> </label></td> <td><label> <input name="total" type="text" id="total" value="4000"> </label></td> </tr> <tr> <td><input name="price" type="text" id="price" value="2000"></td> <td><input name="qty" type="text" id="qty" value="4"></td> <td><input name="total" type="text" id="total" value="8000"></td> </tr> <tr> <td> </td> <td>Total</td> <td><label> <input name="gtotal" type="text" id="gtotal" value="12000"> </label></td> </tr> </table> How to calucate it from price * qty = Total and gtotal=sum of total, in the first rows. Ican do it if there is one row, but i dont know how to calculate samae name of text field like in 2nd or more rows I want to do a calculation between selectbox values. The problem with my code is that the first part of the calculation only gives me 0, which Motherboard value*quantity. the second part works fine which Chassis*quantity. My formulas is motherbord*Quanity+chassis*quantity. Code:
function calculate() {
var parsedMotherboard = parseFloat(document.calcform.Motherboard.value || 0);
var parsedQuantity = parseFloat(document.calcform.Quantity.value || 0); var parsedChassis = parseFloat(document.calcform.Chassis.value || 0);
var parsedQuantity1 = parseFloat(document.calcform.Quantity1.value ||0);
document.calcform.total.value = (parsedMotherboard * parsedQuantity + parsedChassis * parsedQuantity1); }
PHP Code: echo "<tr><td align='left' width='90%'>"; $result = mysql_query("SELECT Motherboard_Part_Number, Motherboard_Name, Motherboard_Price FROM Motherboard ") or die(mysql_error()); echo '<select id="Motherboard" class="SelectClass" name="Motherboard" ONCHANGE="calculate()">'; // keeps getting the next row until there are no more to get while($row = mysql_fetch_array( $result )) { // Print out the contents of each row into a table echo '<option Name="Motherboard" value= ',$row['Motherboard_Price'],'>',$row['Motherboard_Part_Number'],' ',$row['Motherboard_Name'],' $',$row['Motherboard_Price'],' ','</option>'; } echo '</select>'; echo "</td>"; echo "<td align='right' width='10%'>"; $result= mysql_query("SELECT Number FROM Quantity") or die(mysql_error()); echo '<select id="Quantity" class="SelectClass" name="Quantity" Value="Quantity" ONCHANGE="calculate()" >'; // keeps getting the next row until there are no more to get while($row = mysql_fetch_array( $result)) { // Print out the contents of each row into a table echo '<option value=',$row['Number'],'>',$row['Number'],'</option>'; } echo '</select>'; echo "</td></tr>"; echo "<tr><td align='left' width='90%'>"; $result = mysql_query("SELECT Chassis_Part_Number, Chassis_Name, Chassis_Price FROM Chassis where Chassis_Form_Factor='ATX'") or die(mysql_error()); echo '<select id="Chassis" class="SelectClass" name="Chassis" ONCHANGE="calculate()">'; // keeps getting the next row until there are no more to get while($row = mysql_fetch_array( $result )) { // Print out the contents of each row into a table echo '<option Name="Chassis" value= ',$row['Chassis_Price'],'>',$row['Chassis_Part_Number'],' ',$row['Chassis_Name'],' $',$row['Chassis_Price'],' ','</option>'; } echo '</select>'; echo "</td>"; echo "<td align='right' width='10%'>"; $result= mysql_query("SELECT Number FROM Quantity") or die(mysql_error()); echo '<select id="Quantity" class="SelectClass" name="Quantity1" Value="Quantity" ONCHANGE="calculate()" >'; // keeps getting the next row until there are no more to get while($row = mysql_fetch_array( $result)) { // Print out the contents of each row into a table echo '<option value=',$row['Number'],'>',$row['Number'],'</option>'; } echo '</select>'; echo "</td></tr>"; hi, i need a help for experts out there. i've a set of questionnaire with 10 questions.answer for each question to choose from is 0-6 using radio button.for all the questions answered i need to calculate overall percentage based on the scores. i've done the html coding but having problem with javascript..is there any websites i can refer to write a coding or anyone can give example how to do it. pls help.. Hello. I wonder is there any javascript to calculate IP length For example I have Start ADDR: VLAN_ADDR which is: 10.52.28.0 Stop ADDR: VLAN_LAST which is 10.52.29.254 As I know:result is 512 or another example: Start ADDR: VLAN_ADDR which is: 10.52.64.11 Stop ADDR: VLAN_LAST which is 10.52.64.15 As I know:result is 5 How to count it in javascript code ? Results are "numbers" Best regards Leos. Hi there, I'm new here in this forum and I've registered to ask a question about JavaScript or Jquery. I don't know which to use. I have my code php like that: <?php //Get the data from system and return in EU format function ShowDate() { $Date = date("d"."/"."m"."/"."Y"); return $Date; } //Get the time from system function ShowTime() { $Time = date("H".":"."i"); return $Time; } ?> Now I have two input box <html> <head> </head> <body> Type the date:<input name="txtdate" type="text" class="input" id="txtdate" title="e.g dd/mm/yyyy" value="<?php echo ShowDate(); ?>" size="9" maxlength="10"> <br> Type the time:<input name="txttime" type="text" id="txttime" value="<?php echo ShowTime(); ?>" size="5" maxlength="5"> <br> London: Friday May 21 2010 05:12:00 <br> New York: Friday May 21 2010 00:12:00<br> Hong Kong: Friday May 21 2010 12:12:00<br> Tokyo: Friday May 21 2010 13:12:00<br> </body> </html> So.... the important is the user can interactive with the date. If I change the date or time all this values will be change as well. Someone knows how can I do this? The field txtdate I will get from a calendar plugin (javascript) that I already put in my code. Thank you for your help. Andrei Andrade I have tried many time to make the calculation to appear at the total text box. however, I fail to find where the problem is. Please help me.. here is my coding.. <html> <head> <title> PRESENTATION EVALUATION FORM </title></head> <style type="text/css"> .style1 { text-align: center; } </style> <script type="text/javascript"> function add($g1,$g2,$g3,$g4,$g5,$g6,$g7,$g8,$g9,$g10,$g11,$g12,$g13) { $g1=$_POST['document.myForm.gred1.value']; $g2=$_POST['gred3.value']; $g3=$_POST['gred3.value']; $g4=$_POST['gred4.value']; $g5=$_POST['gred5.value']; $g6=$_POST['gred6.value']; $g7=$_POST['gred7.value']; $g8=$_POST['gred8.value']; $g9=$_POST['gred9.value']; $g10=$_POST['gred10.value']; $g11=$_POST['gred11.value']; $g12=$_POST['gred12.value']; $g13=$_POST['gred13.value']; $total=$g1+$g2+$g3+$g4+$g5+$g6+$g7+$g8+$g9+$g10+$g11+$g12+$g13; } </script> <body> <center><img src="logo.gif" height="200" weight="240"></center> <p><center><b>FAKULTI SISTEM KOMPUTER & KEJURUTERAAN PERISIAN<br>UNIVERSITI MALAYSIA PAHANG</b></center></p> <table width="100% "border="1"> <form name="myForm" method="post"> <tr> <th style="width: 447px">ITEM</th> <th style="width: 340px">SCORE</th> </tr> <tr> <td style="width: 447px"> A) SLIDES</td> <td style="width: 340px"> </td> </tr> <tr> <td style="width: 447px"> i. Use of Diagram and Animations </td> <td style="width: 340px" class="style1"> <select name="gred1" onchange="add()" style="width: 45px"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </tr> <tr> <td style="width: 447px"> ii. Layout, Font and Color (Readable, Consistent, Attractive) </td> <td style="width: 340px" class="style1"> <select name="gred2" onchange="add()" style="width: 45px"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </tr> <tr> <td style="width: 447px"> iii. Content Structure</td> <td style="width: 340px" class="style1"> <select name="gred4" onchange="add()" style="width: 45px"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select></td> </tr> <tr> <td style="width: 447px; height: 28px;"> iv. Slide Content</td> <td style="width: 340px; height: 28px;" class="style1"> <select name="gred3" onchange="add()" style="width: 45px"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select></tr> <tr> <td style="width: 447px"> B) PRESENTATION</td> <td style="width: 340px"></td> </tr> <tr> <td style="width: 447px"> i. Explaining and Not Reading The Slides </td> <td style="width: 340px" class="style1"> <select name="gred5" onchange="add()" style="width: 45px; height: 22px;"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> </tr> <tr> <td style="width: 447px"> ii. Voice, Eye Contact and Gestures</td> <td style="width: 340px" class="style1"> <select name="gred6" onchange="add()" style="width: 45px; height: 22px;"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> </tr> <tr> <td style="width: 447px"> iii. Capture Audience Interest</td> <td style="width: 340px" class="style1"> <select name="gred7" onchange="add()" style="width: 45px"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> </tr> <tr> <td style="width: 447px"> iv. Proper Introduction and Closing</td> <td style="width: 340px" class="style1"> <select name="gred8" onchange="add()" style="width: 45px"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select></td> </tr> <tr> <td style="width: 447px"> C) LANGUAGE</td> <td style="width: 340px" class="style1"> </tr> <tr> <td style="width: 447px"> i. Fluency </td> <td style="width: 340px" class="style1"> <select name="gred9" onchange="add()" style="width: 45px"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select></td> </tr> <tr> <td style="width: 447px"> ii. Correctness</td> <td style="width: 340px" class="style1"> <select name="gred10" onchange="add()" style="width: 45px"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </tr> <tr> <td style="width: 447px"> iii. English Vocabulary</td> <td style="width: 340px" class="style1"> <select name="gred11" onchange="add()" style="width: 45px"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </tr> <tr> <td style="width: 447px"> D) QUESTION AND ANSWER HANDLING</td> <td style="width: 340px" class="style1"> </tr> <tr> <td style="width: 447px"> i. Confidence</td> <td style="width: 340px" class="style1"> <select name="gred12" onchange="add()" style="width: 45px"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> </tr> <tr> <td style="width: 447px"> ii. Logic Responds</td> <td style="width: 340px" class="style1"> <select name="gred13" onchange="add()" style="width: 45px"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> </tr> <tr> <td style="width: 447px; height: 27px;"><center><b>Total</b></center></td> <td style="width: 340px; height: 27px;"><center> <input name="totalmark" type="text" style="width: 52px" value="0" > <?php echo $_POST["$total"];></center></td> </table> <table> <tr> <td class="style1" style="width: 802px"><br><input type="button" name="total" value="CALCULATE" onclick= "add()"> <input type="RESET" value="RESET"></td> </tr> </form> </table> </body> </html> I'm working on creating a custom calculator to determine the amount of money / credits users may earn from referrals. I've tested onChange, and it will work only when I have changed to a new field or clicked off that field. How do I make this calculate live? So if the current value is 5 and I change it to 6, it will automatically recalculate the new value. You can see what I'm working on he http://sheetmusichaven.com/admin/mys...calculator.php Note: The one I'm testing is the 1st Level field. For now i'm just having it display the date. I have a form where I have to calculate a future date (end date) from two fields. First the start date and then the number of months. So if the start date is 1/1/2011 and the months given is 12 then the end date should return as 12/31/2011. I can't figure out why it's not returnign a value. Here's what I have: Code: function AddDays() {
DaysToAdd=document.getElementById("DaysToAdd").value;
startdate=document.getelementbyid("startdate").value;
var newdate=new Date();
var newtimems=startdate+(DaysToAdd*730*60*60*1000);
newdate.setTime(newtimems);
document.getElementById("display").value=newdate.toLocaleString();
}
Any insight is appreciated. hi, can someone help me create an auto pro rata calculator where there are four [4] boxes. first box should be where we could enter the customer's plan [29,39,40 etc.] and it should be divided with what ever i will enter on the second box w/c will be for the number of days in a month [28,29,30,31]. the 3rd box should be where i can enter the number of days the cust. was able to use the service and it needs to be multiplied from box 2. 4th box should be a read only box where the pro rata will be displayed. so: [box 1] divided "/" by [box 2] multiplied "*" by [box 3] equals "=" to box four thanks!!! Hi, Here are sample divisions: Code: <style type="text/css">
#grandparent {width:100px;}
#parent {overflow:auto; height:100px; }
.child {overflow:hidden; margin-left:10px;}
</style>
<div id="grandparent">
<div id="parent">
<div class="child">1000000000000000000000000</div>
<div class="child">1000000000000000000000000</div>
<div class="child">1000000000000000000000000</div>
<div class="child">1000000000000000000000000</div>
<div class="child">1000000000000000000000000</div>
<div class="child">1000000000000000000000000</div>
<div class="child">1000000000000000000000000</div>
</div>
</div>
The <div class="child"> width value is always 10 pixels less than <div id="parent"> width value. How can it be calculated so any width value is given to <div id="parent">, its child gets 10 pixels less than that? Any help is very much appreciated! Mike hye.. i'm trying to calculate value of balance by substract cash to total. But nothing happen. here is my code: Code: <script type="text/javascript">
function substract(){
{
document.calculate.Cash.value = ZA;
document.calculate.Total.value = Z1;
balance();
}
function balance(){
AAA = document.calculate.Balance;
AAA.value = (ZA-Z1).toFixed(2);
}
</script>
</head>
<body style="background-color: #99FF99">
<?php
// if there are any errors, display them
if ($error != 'Unable to update')
{
echo '<div style="padding:12px; border:1px solid purple; color:red; font-weight: bold; text-align: center; font-size: medium; ">'.$error.'</div>';
}
?>
<form action="" method="post" name="calculate" style="width: 1320px; ">
<div class="style1">
<input type="hidden" name="CustID" value="<?php echo $CustID; ?>">
<input type="hidden" name="Total" value="<?php echo $Total; ?>">
<input type="hidden" name="TableID" value="<?php echo $TableID; ?>">
<div class="style5" style="width: 820px; height: 148px; margin-left: auto; margin-right: auto;">
<p class="style9"> </p>
<p class="style17"><span class="style19">CUSTOMER </span> <strong>
<span class="style19">ID:</span></strong> <strong> <?php echo $CustID; ?>
</strong></p>
<table style="width: 35%; height: 185px; margin-left: auto; margin-right: auto;" class="style15">
<tr>
<td class="style11" style="width: 111px; height: 30px;"><strong>Table ID :
</strong></td>
<td style="height: 30px; width: 169px;" class="style18"><strong><?php echo $TableID; ?></strong></td>
</tr>
<tr>
<td class="style1" style="width: 111px; height: 20px;"></td>
<td style="height: 20px; width: 169px;" class="style1"></td>
</tr>
<tr>
<td class="style16" style="width: 111px; height: 30px;"><strong>Total :
</strong></td>
<td style="height: 30px; width: 169px;" class="style18"><strong>
RM<?php echo $Total; ?> </strong></td>
</tr>
<tr>
<td class="style1" style="width: 111px; height: 20px;"></td>
<td style="height: 20px; width: 169px;" class="style1"></td>
</tr>
<tr>
<td class="style16" style="width: 111px; height: 30px;"><strong>Cash :
</strong></td>
<td style="height: 30px; width: 169px;" class="style1"> <strong>
<span class="style20">RM</span>
<input type="text" name="Cash" id="Cash" class="style17" style="width: 120px"></strong></td>
</tr>
<tr>
<td class="style1" style="width: 111px; height: 20px;"></td>
<td style="height: 20px; width: 169px;" class="style1"></td>
</tr>
<tr>
<td class="style16" style="width: 111px; "><strong>Balance :
</strong></td>
<td style="width: 169px;" class="style1"><strong>
<span class="style20">RM</span>
<input type="text" name="Balance" id="Balance" value="0.00" class="style17" style="width: 120px"></strong></td>
</tr>
</table>
<p class="style5"><strong>
<input class="style3" name="calculate" type="button" onclick="substract()" value="Calculate"> <input class="style3" name="submit" type="submit" value="Done"></strong> </div>
</div>
</form>
I am working on a form that has 15 rows for order entry. These rows are called: qty | part | desc | cost | amount I have the following ASP code that generates the rows: Code: <% For i = 1 To 15 %> <TR align=center><td><input type="text" NAME="qty<%Response.Write i%>" onChange='DoMath()'></td> <TD><INPUT TYPE="text" NAME="part<% Response.Write i %>"></TD> <TD><INPUT TYPE="text" NAME="desc<%Response.Write i %>"></TD> <TD><INPUT TYPE="text" NAME="cost<%Response.Write i%>" onChange="DoMath()"></TD> <TD><INPUT TYPE="text" NAME="amount<%Response.Write i%>" readonly></TD></TR> <% Next %> This gives me the following fields in the form: qty1 | part1 | desc1 | cost1 | amount1 qty2 | part2 | desc2 | cost2 | amount2 etc. My Javascript (DoMath) to calculate the row totals looks like this for now: Code: <script type='text/javascript'>
function DoMath(){
var Units = document.PlaceOrder.qty1.value;
var Rate = document.PlaceOrder.cost1.value;
var Total = Units * Rate;
document.PlaceOrder.amount1.value = Total.toFixed(2);
document.PlaceOrder.grandtotal.value = Total.toFixed(2);
}
</script>
This works fine for the first row, but I need it to scale for the rest of the rows, and also allow for future addition/expansion. Unfortunately, I am Javascript-tarded and can't figure it out, despite numerous examples online... I also need to find a way to recalculate the "grandtotal" box on the form based on whether or not the checkbox called "taxChecked" is checked. If the user checks it, I need it to recalculate the "grandtotal" field with a tax rate, and if they un-check it, it should recalcuate "grandtotal" WITHOUT the tax rate. Any suggestions or pointers are greatly appreciated! |
|||||||