JavaScript - Javascript Calculate Totals And Tax
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! Similar TutorialsCan anyone help me with the following Javascript. I am going crazy trying to figure this out because it should be easy. Basically I want to calculate the percentage of a number, but I'm getting a really weird result. In the following code f is equal to 3 and x.length is equal to 8. The part that isn't working is emphasised in bold. Basically 3/8 * 100 should result in 37.5 but the result I am getting with the following code is 7934570.3125. How do you calculate this percentage in Javascript? Code: function displaymember() { var m = 1; var f = 1; for(i=0;i<x.length;i++) { sex=(x[i].getElementsByTagName("sex")[0].childNodes[0].nodeValue); if (sex=="Male") { m++; } else { f++; } percent=f/x.length * 100 document.getElementById("fixed").innerHTML=percent; } } 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; } Hi, I need a help with a project I am working on. I am not a developer so not so familiar with javascript. Suppose I have a map with ten junctions and based on that map, I need to calculate all the possible routes between one junction to another. How do I represent the map in javascript and how do I code the function to calculate all the possible routes?? :-( many thanks if someone can help me Hi everyone, I am pretty new to JS and I am looking for help writing a function that will dynamically calculate filed values. I have a PHP-generated form which may have a varying number of fields. I need to: 1. calculate the line total for each row -- unitprice * units = linetotal 2. calculate total of all linetotals. I have named my fields as follows: unitprice[1], unitprice[2]... , units[1], units[2], ... I have the following calculate function: Code: function calculateOld() { // get both values unitprice = document.forms["invoice"].unitprice.value; units = document.forms["invoice"].units.value; // do some calculation lineTotal = formatNumber((unitprice * units), 2); // set the value in the right field document.forms["invoice"].linetotal.value = lineTotal; unitprice2 = document.forms["invoice"].unitprice2.value; units2 = document.forms["invoice"].units2.value; if(unitprice2 != '') { // do some calculation lineTotal2 = formatNumber((unitprice2 * units2), 2); // set the value in the right field document.forms["invoice"].linetotal2.value = lineTotal2; document.forms["invoice"].totalprice.value = formatNumber((parseFloat(lineTotal) + parseFloat(lineTotal2)),2); } else { document.forms["invoice"].linetotal2.value = ''; document.forms["invoice"].totalprice.value = formatNumber(lineTotal,2); } } This does calculate what I need but only if I have up to two rows. I need to make the function dynamically count how many rows there are, and calculate the linetotal for each row. And here's where my limited JS knowledge brings me to a halt. I have been thinking about what this new and dynamic function should look like, but that's the best I could produce... Code: function calculate() { var unitprice[i] = document.forms["invoice"].unitprice[i].value; var units[i] = document.forms["invoice"].units[i].value; var linetotal[i] = formatNumber((unitprice[i] * units[i]), 2); return linetotal; } Your help will be appreciated. Please explain how things are done, don't just give me the code. Thanks in advance! Hi everyone. New to javascript here.... I have a problem here. I know how to store a cookie and check a cookie... but i don't know how to calculate the time between current visit and previous visit... Example. I logged in @ 1pm and logged in again @ 3pm... It should a msg like "your last visit was 2 hours ago" Can any one enlighten me ? Thank you! Need help please asap. It might be simple but i couldn't work out the script. help! ---------------- Formfield.anzahl1 = number entered by customer Formfield.Price1 = Ergebnisfeld1 e.g. Anzahl1= 1 Price = 270 *if Anzahl1 = 2 then Price = 270*2 I need to do this for two form option. 2nd field would be as follows Formfield.Anzahl2= number entered by customer Formfield.Price2 = Ergebnisfeld2 Then Formfield.Total = Ergebnisfeld1 + Ergebnisfeld2 ------------------- How can I convert these above to javascript? Hello. I have been struggling with figuring this out on my own for over a week and have had no luck, so it is time to ask for some guidance. The idea of this seemed very simple, but I may just be too much of a Javascript noob to figure it out. I have a form where users will enter in orders that have been returned to us. They will enter in the part numbers returned, the quantity of each part number, and the quantity of the part that was returned damaged. I need to be able to add up the total quantity in one input box and the total damaged quantity in another input box. The input boxes are named Quantity1, Quantity2, DamagedQTY1, DamagedQTY2, and so on. There could be up to 100 different part numbers on each order, so I would need to loop through 100 input boxes. Here is the sample code that I found and started trying to customize. I was unable to figure out how to get the loop or the second set of numbers to be added to work. Code: <script type="text/javascript"> function startCalc(){ interval = setInterval("calc()",1); } function calc(){ one = document.autoSumForm.firstBox.value; two = document.autoSumForm.secondBox.value; document.autoSumForm.thirdBox.value = (one * 1) + (two * 1); } function stopCalc(){ clearInterval(interval); } </script> </HEAD> <BODY> <form name="autoSumForm"> <input type=text name="firstBox" value="" onFocus="startCalc();" onBlur="stopCalc();"> + <input type=text name="secondBox" value="" onFocus="startCalc();" onBlur="stopCalc();"> = <input type=text name="thirdBox"> </form> Thank you in advance for any help! Can someone please assist. I am trying to create a order form that auto calculates my totals as I enter the quantities. It comes up with Not a Number(NaN). Below are snippets from my code this is obviously in a <form>: HTML: Code: <!-- Row 3, Col 3 purchase boxes --> <td colspan="1" height="120" align="left"> <input style="margin-left: 60px" type="text" name="bed_359" size="3" maxlength="3" onchange="calculateValue(this.form)" /> R359</td></tr> <!-- Row 10, Col 2 Order Value Box--> <td colspan="1" align="left"><input style="margin-left: 60px" type="text" name="total" size="10" onfocus="this.form.elements[0].focus()" /> </td></tr> javaScript: Code: // Function to calculate order value function calculateValue(orders) { var orderValue = 0; var value = 0; var itemPrice = 0; var itemQuantity = 0; // Run through all the product fields for(var i = 0; i < orders.elements.length; ++i) { // Get the current field formField = orders.elements[i]; // Get the fields name formName = formField.name; // Items price extracted from name itemPrice = parseFloat(formName.substring(formName.lastIndexOf("0") + 1)); // Get the Quantity itemQuantity = parseInt(formField.value); // Update the OrderValue if(itemQuantity >= 0) { value = itemQuantity * itemPrice; orderValue += value; } } // Display the total orders.total.value = orderValue; } Please help its probably something simple. Hi All, my first post on CodingForums I'm a javascript novice so looking for some help I'm using a handy little script from he http://www.mredkj.com/javascript/orderform.html On an order form he http://www.bluecoast.co.uk/test/order/form.php I've searched the net for hours and had a pop myself but I can't figure it out and it's driving me crazy Couple of things I'm after: 1. Need the "total price" to duplicate at the bottom of the form 2. Need exactly half the "total price" to show in both the deposit fields next to the total prices Hopefully that makes sense, can anybody give me a hand? Thanks in advance! Craig Hi there, this is our first post, just stubmled across this awesome site. Need some help if anyone is able (and willing ). We are trying to make the best possible shopping experience for our customers. Objective: to give the customer a running total of what they're about to order, before they add to basket (kind of a quick quote). if you go to our test page: http://www.gatewrights.co.uk/page87.html we have got a form (boxed in red) which does indeed put the totals (of that form) in the totals box (on our form). As you should see if you test it. Now, I need to try and work out (but am really struggling) how to get it to work with the items on our form. Objective: to give the customer a running total of what they're about to order, before they add to basket (kind of a quick quote). I'll post the head js code and the body js code below. I have tried renaning the formID to 'frmOrder' (the same as the one boxed in red, and then moved that boxed one off page but it doesn't work. I suspect there is a little work to do (possibly in the value fields of our form). Hope it is clear, and I thank you for your time so far. -------------------------- js head code: Code: </script><script type="text/javascript" src="orderform04.js"></script> (plus) Code: <script type="text/javascript"> //<![CDATA[ window.onload = setupScripts; function setupScripts() { var anOrder1 = new OrderForm(); } //]]> </script> -------------------- js file uploaded to root directory (orderform04.js): Code: // mredkj.com // OrderForm.js - v0.4 // v0.4 - 2007-02-01 // v0.3 - 2006-04-09 // v0.2 - 2006-04-08 // v0.1 - 2006-04-06 function OrderForm(prefix, precision, firstChoice) { this.prefix = prefix ? prefix : ''; // **************************** // Configure here // **************************** // names - Set these according to how the html ids are set this.FORM_NAME = this.prefix + 'frmOrder'; this.BTN_TOTAL = this.prefix + 'btnTotal'; this.TXT_OUT = this.prefix + 'txtTotal'; // partial names - Set these according to how the html ids are set this.CHK = this.prefix + 'chk'; this.SEL = this.prefix + 'sel'; this.PRICE = this.prefix + 'txtPrice'; // precision for the decimal places // If not set, then no decimal adjustment is made this.precision = precision ? precision : -1; // if the drop down has the first choice after index 1 // this is used when checking or unchecking a checkbox this.firstChoice = firstChoice ? firstChoice : 1; // **************************** // form this.frm = document.getElementById(this.FORM_NAME); // checkboxes this.chkReg = new RegExp(this.CHK + '([0-9]+)'); this.getCheck = function(chkId) { return document.getElementById(this.CHK + chkId); }; // selects this.selReg = new RegExp(this.SEL + '([0-9]+)'); this.getSelect = function(selId) { return document.getElementById(this.SEL + selId); }; // price spans this.priceReg = new RegExp(this.PRICE + '([0-9]+)'); // text output this.txtOut = document.getElementById(this.TXT_OUT); // button this.btnTotal = document.getElementById(this.BTN_TOTAL); // price array this.prices = new Array(); var o = this; this.getCheckEvent = function() { return function() { o.checkRetotal(o, this); }; }; this.getSelectEvent = function() { return function() { o.totalCost(o); }; }; this.getBtnEvent = function() { return function() { o.totalCost(o); }; }; /* * Calculate the cost * * Required: * Span tags around the prices with IDs formatted * so each item's numbers correspond its select elements and input checkboxes. */ this.totalCost = function(orderObj) { var spanObj = orderObj.frm.getElementsByTagName('span'); var total = 0.0; for (var i=0; i<spanObj.length; i++) { var regResult = orderObj.priceReg.exec(spanObj.id); if (regResult) { var itemNum = regResult[1]; var chkObj = orderObj.getCheck(itemNum); var selObj = orderObj.getSelect(itemNum); var price = orderObj.prices[itemNum]; var quantity = 0; if (selObj) { quantity = parseFloat(selObj.options[selObj.selectedIndex].text); quantity = isNaN(quantity) ? 0 : quantity; if (chkObj) chkObj.checked = quantity; } else if (chkObj) { quantity = chkObj.checked ? 1 : 0; } total += quantity * price; } } if (this.precision == -1) { orderObj.txtOut.value = total } else { orderObj.txtOut.value = total.toFixed(this.precision); } }; /* * Handle clicks on the checkboxes * * Required: * The corresponding select elements and input checkboxes need to be numbered the same * */ this.checkRetotal = function(orderObj, obj) { var regResult = orderObj.chkReg.exec(obj.id); if (regResult) { var optObj = orderObj.getSelect(regResult[1]); if (optObj) { if (obj.checked) { optObj.selectedIndex = orderObj.firstChoice; } else { optObj.selectedIndex = 0; } } orderObj.totalCost(orderObj); } }; /* * Set up events */ this.setEvents = function(orderObj) { var spanObj = orderObj.frm.getElementsByTagName('span'); for (var i=0; i<spanObj.length; i++) { var regResult = orderObj.priceReg.exec(spanObj.id); if (regResult) { var itemNum = regResult[1]; var chkObj = orderObj.getCheck(itemNum); var selObj = orderObj.getSelect(itemNum); if (chkObj) { chkObj.onclick = orderObj.getCheckEvent(); } if (selObj) { selObj.onchange = orderObj.getSelectEvent(); } if (orderObj.btnTotal) { orderObj.btnTotal.onclick = orderObj.getBtnEvent(); } } } }; this.setEvents(this); /* * * Grab the prices from the html * Required: * Prices should be wrapped in span tags, numbers only. */ this.grabPrices = function(orderObj) { var spanObj = orderObj.frm.getElementsByTagName('span'); for (var i=0; i<spanObj.length; i++) { if (orderObj.priceReg.test(spanObj.id)) { var regResult = orderObj.priceReg.exec(spanObj.id); if (regResult) { orderObj.prices[regResult[1]] = parseFloat(spanObj.innerHTML); } } } }; this.grabPrices(this); } --- Now I hope this makes sense, and really appreciate any help you can offer. If anything is unclear, please let me know. ps is it something to do with "* Prices should be wrapped in span tags, numbers only."?? 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 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 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.. 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>"; 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> |