JavaScript - Price Calculator And Rounding
I am currently using a price calculator - although it's really not a calculator; I have to enter every price manually. Currently, it works in half inch increments.
I need it to do two things that it doesn't do currently: 1) Allow the customer to enter a dimension in 1/4 inch increments (1/8 would be even better, but I'm not requesting a miracle) 2) Make the result automatically round up to the nearest 1/2 inch Page containing calculator External file: sizecalc.js Similar TutorialsTo Forum Thank you for being here. I have taken 2 calculators and edited them to get almost what i want. I need the final answer to round up to a whole number. The page is http://www.La-Dore.com/Goldleaf-Calculator.html The code i think you want to see is .... Code: <!-- end of script 1 begining of 2--> <SCRIPT LANGUAGE="JavaScript"> function perRound(num, precision) { var precision = 3; precision = parseInt(precision); var result1 = num * Math.pow(10, precision); var result2 = Math.round(result1); var result3 = result2 / Math.pow(10, precision); return zerosPad(result3, precision); } function zerosPad(rndVal, decPlaces) { var valStrg = rndVal.toString(); var decLoc = valStrg.indexOf("."); if (decLoc == -1) { decPartLen = 0; valStrg += decPlaces > 0 ? "." : ""; } else { decPartLen = valStrg.length - decLoc - 1; } var totalPad = decPlaces - decPartLen; if (totalPad > 0) { for (var cntrVal = 1; cntrVal <= totalPad; cntrVal++) valStrg += "0"; } return valStrg; } function clear_field(field) { if (field.value==field.defaultValue) { field.value='' } } //Division function doMath(form) { var firstnumber = 0; var secondnumber = 0; var tempvalue = 0; firstnumber = eval(form.firstnumber.value); //first number secondnumber = eval(form.secondnumber.value); //second number tempvalue = (firstnumber) / (secondnumber); form.calcresult.value = (tempvalue); //out } // --> </script> Hallo. I am a total newbie to JavaScript coding, but I would like to have a price calculator on our internal website. It should calculate the square meter of the product and then multiply it with the square meter price, multiply it with quantity and then plus it with the startup cost. But... if the square meter extend 20 m2 the square meter price should be lower, and also lower when it hit 50 m2. And at 100 m2 it should write that you have to contact sales department. Can this be done with JavaScript? Here is an example: 6 pieces of 2 x 4 meter. 2x4 = 8 m2 6x8 = 48 total m2 48 m2 x price2 x startup = total price I really hope that someone can help me... //Daniel Hi All, I need a code for my online blind shop so that customers can get a quote without having to go through the order process. They would need to enter their fabric range, style and width and drop. My first obsticle is where to start learning how to do it! Could anyone please point me in the direction of a good but easy to understand tutorial or advise me on how I can achieve my goal? I've looked all over the internet but cant find what I am looking for. I'm willing to learn and do this myself, otherwise I'll have to pay for someone else to do it for me. Any help would be great! Thanks, Deb. So I use Math.round to round my solution off to the nearest thousandth, but if I put in 6 for the number I am solving for it returns 1.333 When I multiply that by 3 it gives me 3.999 when I really want 4.0 Is there any way I can use fractions or something to get around this? My project: http://wdroom.com/factor.html Hello, I need to be able to get a number to 2dp without rounding e.g. 14.756 needs to be 14.75 I tried .toFixed(2) but this rounds. I thought of converting to a string and performing string functions but it seems like over kill if there is an easier way. thanks Code: function convertee(){ value = document.inputFormee.argument.value; if (isNaN(value)){ alert(value+' is not a valid entry'); return; } arg = (value/1.75975326); arg = (parseInt(arg*100)/100).toFixed(3); document.inputFormee.result.value = arg; } Any help much appreciated. Saz. I recently started trying to learn javascript and I decided to try an exercise I found somewhere. Basically it involves counting eggs into total, dozen, and gross. The problem is when I put in a number lower than a full dozen or gross it rounds up and says I have the full dozen intead of the fraction. Ex. I say I have 143 eggs, it says I have 12 dozen. Obviously I am 1 short. Apparently the method(I think that is what it is called?) rounds to the nearest number. Which methods? round either up or down? Here is the code... Code: <html> <head> <title></title> <script type="text/javascript"> function eggs(number) { var total=prompt("eggs",""); alert("You have "+total+" eggs."); var dozen=(total/12); alert("You have "+dozen+" dozen eggs."); var gross=(total/144); alert("You have "+gross+" gross eggs."); var fulldozen=(Math.round(dozen)); alert("You have "+fulldozen+" dozen eggs."); var fullgross=(Math.round(gross)); alert("You have "+fullgross+" gross eggs."); } </script> </head> <body> <form> <a href="javascript:eggs('number')"><input type="button" value="Eggs" name="Eggs" size="30"></a> </form> </body> </html> Thanks for reading. Edit: Also, it goes through the whole thing twice. It will prompt the first time, go through, then prompt again. It terminates after the second though. Hello guys I am doing a simple calculation. Here is the code Code: dose=1 A = document.rhogam.bleed.value B = document.rhogam.volume.value dose= (A*B)/3 dose=Math.round(dose*10)/10; this works fine and gives me an answer rounded to the tenths spot. the next step i need to do is round up by one if the tenths spot is less than 4 or round up by 2 if the tenths is 5 plus example 3.3=4 3.6=5 The code issue I am having is how do I read the tenths place in my result so that I can act on it? Thanks Jeremy Code: num = 1.025; alert(num.toFixed(2)); // - comes out as 1.02 num = 0.025; alert(num.toFixed(2)); // comes out as 0.03; Why is this? Wizards - I have a challenge! I am writing a timecard app. The stipulatioin is all Hours fields can only be whole hours or half hour increments. For example, 1.0 is good, 1.5 is good, 1.2 is bad, 1.9 is bad. I would like to have the field automatically change a value of 1.9 to a value of 2.0 (perhaps onKeyUp). I would like to have the field automatically change a value of 3.2 to a value of 3.0. In a nutshell - only allow whole and half hour values. Otherwise round up OR round down. Thanks for any help you can provide. I am successfully using the Pengoworks plugin for calculations - absolutely priceless. If you think modifications can be made to it, plz let me know. Hi there, To summarize my problem: For example: Sales : $ 5 (id=sales) Discount: 11% (id=disc) Total Discount: $ 0.55 (id=disc) Rounded Discount: $ 0.6 (1 decimal) (id=rounded) Net Sales: $ 4.40 (id=net_sales) document.getElementById("net_sales").value = sales - rounded.toFixed(1); Net Sales: $ <input id = "net_sales" type="Text" name="net_sales" size="4" value="<?php if (!empty($net_sales)) echo $net_sales; ?>"> I tried the above, it is working in the browser. However, it cannot be written into MYSQL (with PHP). What is wrong with my Javascript? Thanks. I have tried many ways to do this and have also searched the forum, no go. I was doing it manually doing this: Code: Math.round((#)*100)/100 But no go, so I found this function here on the forum: Code: function roundNumber(num, dec) { var result = Math.round(num*Math.pow(10,dec))/Math.pow(10,dec); return result; } No go, it works yes, don't get me wrong. But I am working on a invoicing system and it needs to be exact. For instance with this number: Quote: 0.27470000001 It returns 0.27, when in reality it should return 0.28 because of the 7 changes the 4 to 5 and then 5 changes the 7 to 8. But it doesn't work. While reading some things I found while searching google I see that Math.round doesn't work 100% the way it should mathematically. So what options do I have left, I can't believe that a simple rounding calculationg that excel can do ha ha JS cannot. Hi.. I have javascript code with computation, but I have problem in my result because it was not round off or fixed into two decimal places only. here is my code: Code: <script type="text/javascript"> function test_(cmpd) { var len_ = (document.frmMain.elements.length) - 1; for (i=0; i <= len_; i++ ) { var strPos_ = document.frmMain.elements[i].id.indexOf(cmpd) if (strPos_ != -1) { var strPos = document.frmMain.elements[i].id.indexOf("_"); var strId = document.frmMain.elements[i].id.slice(strPos + 1) + "_" + document.frmMain.elements[i].id.slice(0,strPos) // this is the computation that I need to fixed the result into two decimal places document.frmMain.elements[i].value = document.getElementById(strId).value * document.getElementById('mult').value; } } } </script> Thank you so much I know im not supposed to use this for someone to write my codes for me but i need help with something the page AtreusComputers is what im working on at the bottom of the page is a price box which i might move to the side or the top later but right now just trying to get it to work here is my html page code Code: <html> <head> <title>ACS - Custom Computers</title> <link rel="stylesheet" href="script.css" /> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-19288524-2']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> <script type="text/javascript" src="scripttest.js"> </script> </head> <body bgcolor="#000000" text="#ffffff"> <center> <P align=center ><a href="http://www.atreuscomputerservices.com"><img src="webACSlogofinal.bmp" border="0"></a></P> <P align=center ><FONT color="#ffffff" size=6 face="Palatino Linotype" ><STRONG><EM>Computer Customization</EM></STRONG></FONT></P> </center> <table width="100%" border="0"> <tr> <td width="10%"></td> <td width="457px"><center><img src="ACSbanner.bmp" width="457px" height="100%" /></center></td> <td width="40%"></td> <td width="20%"> <style type="text/css"> @import url(http://www.google.com/cse/api/branding.css); </style> <div class="cse-branding-right" style="background-color:#000000;color:#FFFFFF"> <div class="cse-branding-form"> <form action="http://atreuscomputers.99k.org/google.html" id="cse-search-box"> <div> <input type="hidden" name="cx" value="partner-pub-3415227737255042:y4oouh-9ccq" /> <input type="hidden" name="cof" value="FORID:11" /> <input type="hidden" name="ie" value="ISO-8859-1" /> <input type="text" name="q" size="31" /> <input type="submit" name="sa" value="Search" /> </div> </form> </div> <div class="cse-branding-logo"> <img src="http://www.google.com/images/poweredby_transparent/poweredby_000000.gif" alt="Google" /> </div> <div class="cse-branding-text"> Custom Search </div> </div> </td> </tr> <tr> <td align="center" valign="top"> <script type="text/javascript"><!-- google_ad_client = "pub-3415227737255042"; /* 160x600, created 10/24/10 */ google_ad_slot = "6248958700"; google_ad_width = 160; google_ad_height = 600; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </td> <td width="457px" valign="top" bgcolor="#FFFFFF"><div id="header"><center> <img id="caseimg" src="start.jpg" /></div> </td> <td> <center> <form action="#"> <h1>COMPONENTS</h1> <select id="caseselect" style="width:625px" name="Items" class="select" onchange="swapImage()"; "priceUpdate()";> <option id="49.99" value="start.jpg">Case</option> <option id="49.99" value="COOLER MASTER Elite 310red.jpg">COOLER MASTER Elite 310 Red ($49.99)</option> <option id="49.99" value="COOLER MASTER Elite 310blue.jpg">COOLER MASTER Elite 310 Blue ($49.99)</option> <option id="49.99" value="COOLER MASTER Elite 310orange.jpg">COOLER MASTER Elite 310 Orange ($49.99)</option> <option id="49.99" value="COOLER MASTER Elite 310silver.jpg">COOLER MASTER Elite 310 Silver ($49.99)</option> </select> <br /><br /> <select id="powersupply" style="width:625px"> <option id="0" value="">Power Supply</option> </select><br /><br /> <select id="motherboard" style="width:625px"> <option id="0" value="">Motherboard</option> </select><br /><br /> <select id="cpu" style="width:625px"> <option id="0" value="">CPU</option> </select><br /><br /> <select id="cooling" style="width:625px"> <option id="0" value="">Cooling</option> </select><br /><br /> <select id="memory" style="width:625px"> <option id="0" value="">Memory</option> </select><br /><br /> <h1>AUDIO & VIDEO</h1> <select id="gpu" style="width:625px"> <option id="0" value="">Video</option> </select><br /><br /> <select id="monitor" style="width:625px"> <option id="0" value="">Monitor</option> </select><br /><br /> <select id="audio" style="width:625px"> <option id="0" value="">Audio</option> </select><br /><br /> <select id="cooling" style="width:625px"> <option id="0" value="">Speakers</option> </select><br /><br /> <h1>STORAGE & MEDIA</h1> <select id="hd1" style="width:625px"> <option id="0" value="">Hard Drive 1</option> </select><br /><br /> <select id="hd2" style="width:625px"> <option id="0" value="">Hard Drive 2</option> </select><br /><br /> <select id="od1" style="width:625px"> <option id="0" value="">Optical Drive 1</option> </select><br /><br /> <select id="od2" style="width:625px"> <option id="0" value="">Optical Drive 2</option> </select><br /><br /> <select id="mediaread" style="width:625px"> <option id="0" value="">Media Reader</option> </select><br /><br /> <h1>COMMUNICATION & NETWORKING</h1> <select id="netadapt" style="width:625px"> <option id="0" value="">Network Adapter</option> </select><br /><br /> <select id="wifi" style="width:625px"> <option id="0" value="">WiFi Adapter</option> </select><br /><br /> <select id="router" style="width:625px"> <option id="0" value="">Router</option> </select><br /><br /> <select id="modem" style="width:625px"> <option id="0" value="">Modem</option> </select><br /><br /> <select id="usb" style="width:625px"> <option id="0" value="">USB Ports</option> </select><br /><br /> <select id="bt" style="width:625px"> <option id="0" value="">Bluetooth</option> </select><br /><br /> <h1>SOFTWARE</h1> <select id="os" style="width:625px"> <option id="0" value="">Operating System</option> </select><br /><br /> <select id="productsoftware" style="width:625px"> <option id="0" value="">Productivity Software</option> </select><br /><br /> <select id="Secure" style="width:625px"> <option id="0" value="">Security Software</option> </select><br /><br /> <h1>ACCESORIES</h1> <select id="keyboard" style="width:625px"> <option id="0" value="">Keyboard</option> </select><br /><br /> <select id="mouse" style="width:625px"> <option id="0" value="">Mouse</option> </select><br /><br /> <select id="netcable" style="width:625px"> <option id="0" value="">Network Cable</option> </select><br /><br /> <select id="cam" style="width:625px"> <option id="0" value="">Web Cam</option> </select><br /><br /> <select id="surge" style="width:625px"> <option id="0" value="">Surge Protector</option> </select><br /><br /> </form><br /><br /> <input type="text" id="total" value="?" width="625px"></input> </center> </td> <td valign="top" align="center"> <script type="text/javascript"><!-- google_ad_client = "pub-3415227737255042"; /* 300x250, created 10/24/10 */ google_ad_slot = "4027168799"; google_ad_width = 300; google_ad_height = 250; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script></td> </tr> </table> </body> </html> and here is my js code Code: window.onload = initForm; function swapImage(){ var image = document.getElementById("caseimg"); var dropd = document.getElementById("caseselect"); image.src = dropd.value; } function priceUpdate() { var itemprice = document.getElementById("caseselect"); var box = document.getElementById("total") box.value = itemprice.id; } *PARTS IN RED ARE WHAT IM WORKING ON Hello, I am having a little issue with creating an updating price script for my website. I tried to look at examples like those at Apple, Hp, Dell, and other sites that have the kind of script I am looking to create. The way I have my page is that it grabs data from my database when someone clicks my product, after that they go to the customize the product page. The price is supposed to change as they click and remove options. I just need a little help on where to start and how to update the price. I know Javascript is the coding but I have been struggling with it. Examples of the script can be found on the link below. There is also a snippet of my code I am working with.. Thanks in advance for some help. http://configure.us.dell.com/dellsto...en&s=dhs&cs=19 Code: <script type="text/javascript"> //<![CDATA[ window.onload = setupScripts; function setupScripts() { var anOrder1 = new OrderForm(); } //]]> </script> <form id="Options"> <div style="color:#F00"><?=$msg?></div> <?php if(is_array($_SESSION['cart'])){ $max=count($_SESSION['cart']); for($i=0;$i<$max;$i++){ $pid=$_SESSION['cart'][$i]['productid']; $pname=get_product_name($pid); $price=get_price($pid); $pdes=get_desc($pid); $pdim=get_dimen($pid); $pweight=get_weight($pid); $pcode=get_code($pid); $picture=get_pic($pid); } } ?> <table width="850" border="0" cellpadding="8"> <tr> <td width="50" align="left" colspan="2"><font color="#FF9933" size="+5" style="letter-spacing:20px;" ><?=$pname?></font><br /> <img src="<?=$picture?>" border="2" height="300" width="300"/> </td> <td width="275" align="left" colspan="2"><b>Description:</b> <font style="letter-spacing:4px; word-spacing:7px;"><?=$pdes?></font><br /><br /> <b>Product Code:</b> <font style="letter-spacing:4px; word-spacing:7px;"><?=$pcode?></font><br /><br /> <b>Dimensions:</b> <font style="letter-spacing:4px; word-spacing:7px;"><?=$pdim?></font><br /><br /> <b>Weight:</b> <font style="letter-spacing:4px; word-spacing:7px;"><?=$pweight?></font><br /><br /> <b>Price:</b> <big style="color:green">$</big><font style="letter-spacing:4px; word-spacing:7px;"><?=$price?></font><br /><br /> </td> </tr> <tr> <td align="left" colspan="2"><img src="<?=$picture?>" border="2" height="50" width="50"/> <img src="<?=$picture?>" border="2" height="50" width="50"/> </td> </tr> <tr> <td colspan="2" align="left"><font color="#FF9900" size="+4" style="letter-spacing:10px;">Fabric</font><hr color="#999999" size="5" width="400" align="left"/> (Please describe the type of fabric you would like and we will try and match it. If you have a picture or link of a fabric style, please send along with item request.) </td> <td colspan="2" align="left"><font color="#FF9900" size="+4" style="letter-spacing:10px;">Handles</font><hr color="#999999" size="5" width="400" align="left"/> (These handles are great for the children and adult type products) </td> </tr> <tr> <td colspan="2" align="left"> Check this box if you have your own fabric and would like to send to us. <input name="own" type="checkbox" value="Own" id="chk0" /> <span id="txtPrice0">-5</span> <input type="text" id="txtTotal" size="8" value="<?=$price?>"/> <br /> I have a form that is working just fine the only thing is that I need to add a quantity field that will update the price. Can anyone help me with this please. I am not that good at javascript as you can see. I have gotten snippet from here and there to be able to create this form. Here is the code that I have at he moment: Code: <script type="text/javascript"> florida_tax_rate = .07; function update_price(radio) { price = parseFloat(radio.getAttribute("price")); shipping = parseFloat(document.getElementById("shipping").innerHTML); subtotal = document.getElementById("subtotal"); grand_total = document.getElementById("grand_total"); subtotal.innerHTML = price; grand_total.innerHTML = (shipping + price).toFixed(2); update_tax(); } function update_tax() { menu = document.getElementsByName("ShippingState")[0]; state = menu.value; is_florida = state.match(/^(florida|fl)$/i); price = parseFloat(document.getElementById("subtotal").innerHTML); shipping = parseFloat(document.getElementById("shipping").innerHTML); real_subtotal = price + shipping; taxes = 0.00; if (is_florida) { taxes = real_subtotal * florida_tax_rate; } grand_total = document.getElementById("grand_total"); document.getElementById("taxes").innerHTML = taxes.toFixed(2); grand_total.innerHTML = (real_subtotal + taxes).toFixed(2); } </script> <form> <input onchange="update_price(this);" type="radio" name="package" value="non-chamber" price="450.00" /> Non-Chamber Member (Qty: 0-5)<br /> <input name="non-chamber qty" type="text" id="non-chamber qty" value="" size="5" maxlength="999" /> Please Enter Your Quantity <br /> <input onchange="update_price(this);" type="radio" name="package" value="chamber" price="425.00" /> Chamber Member (Qty: 0-5)<br /> <input name="chamber qty" type="text" id="chamber qty" value="" size="5" maxlength="999" /> Please Enter Your Quantity <br /> <input onchange="update_price(this);" type="radio" name="package" value="standard" price="400.00" /> Bulk Orders (Qty: Over 5)<br /> <input name="bulk qty" type="text" id="bulk qty" value="" size="5" maxlength="999" /> Please Enter Your Quantity <br /> <br /><br /> <div style="display:none;"><select onchange="update_tax();" name="ShippingState"> <option value="Florida" selected="selected">Florida</option> </select></div> <br /> Subtotal: $<span id="subtotal">0.00</span><br /> <div style="display:none;">Shipping: $<span id="shipping">0.00</span><br /></div> Taxes: $<span id="taxes">0.00</span><br /> Grand Total: $<span id="grand_total">0.00</span><br /> <br /> <img src="http://www.paypal.com/en_US/i/btn/btn_paynowCC_LG.gif" onClick="document.paypalPayment.submit();" /> <input type="hidden" name="process" id="process" value="1" /> </form> Thanks Hello guys, I'm having some problems with jquery.. What I'm trying to do is, a jquery script to show in real time the total price. I got this: Code: <li>Users</li> <li> <select name="users" id="users"> <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> </li> <li>Months</li> <li> <select name="months" id="months"> <option value='1'>1 Month</option> <option value='2'>2 Months</option> <option value='3'>3 Months</option> <option value='4'>4 Months</option> <option value='5'>5 Months</option> <option value='6'>6 Months</option> <option value='7'>7 Months</option> <option value='8'>8 Months </option> <option value='9'>9 Months</option> <option value='10'>10 Months</option> <option value="11">11 Months</option> <option value="12">12 Months</option> </select> </li> <div class="grand_total"> <h4 class="colr">Price</h4> <ul> <li class="price">$0.50</li> </ul> </div> 1 Month and 1 User price should be 0.50 USD +1 Month = + 0.50 USD + 1 User = + 0.50 USD Example: 5 Users + 2 Months = 3.50 USD I wanna make the jquery to show the total price at li class="price" Sorry, I'm newbie at jquery. Anyone could help me please? Thank you. Hi friends, I am collecting and selling football stickers. Yes, World Cup 2010 stickers. The album have 640 distinct numbers. Everytime I receive a list of that stickers to buy by the user I would need ckeck out the price list because some stickers have different price from another. For example Stickers numbers: 00, 000, 1, 2, 3, 4, 5 and 29 costs 3,00. The stickers number 31, 50, 69, 88, 107, 126, 202, 411, 392, 544 and 637 costs = 1,00. The stickers 30, 49, 68, 87, 106, 125 costs 0,25 The sticker from 32 to 48 51 to 67 70 to 86 89 to 105 (and so on) costs 0,25 I would be glad if someone could help me for building a script which read from a textarea numbers contents and create a "short report" with the stickers numbers followed by its price and total sum. Bob Kuspe |