JavaScript - How To Code For A Price Quote Calculator?
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. Similar TutorialsHi all again, Firstly thanks to Philip M for getting me this far but i still have a few quirks that i'd like to get around. Its a price generator with 3 options. User selects an option from a drop down, inputs "number of words" and hey-presto the price appears. That works superbly well but what would be really cool is if after someone gets a price they then would like to select a different option in order to see a new price. At the moment it means selecting another option and re-entering the number of words and then clicking in the price box to get the new result. Is there anyway to make that price change automatically (as if by magic even) if either the "option" or "number of words" is changed I have a sneaky suspicion that Philip M will come to the rescue again but should anyone else have a view that would be great also. Thanks as always in advance, Phil Code: <head> <!--quote generator --> <script type="text/javascript"> function update(){ var price = document.getElementById("Package").value; var words = document.getElementById("words").value; var wordsOver2000 = words-2000; if (wordsOver2000 <0) {wordsOver2000 = 0} words = words - wordsOver2000; var Tprice = ((price * words) + (price * .80 * wordsOver2000)).toFixed(2) ;document.getElementById("Totprice").value = Tprice; document.getElementById("Totprice2").innerHTML = "Your Quote Total Is: MYR" + Tprice } </script> <!--end quote generator --> </head> Code: <body> <!--quote generator --> <div align="center" class="generator"> PACKAGE - <select name="Package" id = "Package"> <option value="0.027">Economy</option> <option value="0.038">Standard</option> <option value="0.049">Express</option> </select> No. of Words - <input type="text" id="words" onchange="update()" value="" /> ---> MYR <input type = "text" id = "Totprice" value="...then click here" /><br /> <br /><strong>(NB - To see a quote for a different package, please select package and re-enter the number of words)</strong> </div> <!--end quote generator --> </body> Hi all. I hope that everyone is fine and doing well. This is something of an annual visit for me. You guys helped me enormously with the code below. It is a price quote generator that takes a number (entered by the client) and depending on the package selected, produces a price quote. As I said, it works really well, but it's time for me to expand my business overseas. At the moment, I display the price as a single currency, but I would like for clients to be able to select (maybe from a drop down list in the answer field) any one of 4 different currencies (i.e., GBP, USD, EURO, MYR). The different exchange rates don't need to be up to the minute accurate. I'm quite happy to go in to the code and update them weekly or as required. I have attempted to research different ways of doing this, but as my needs are quite unusual and my brain really can't wrap around the ins and outs of java script, i'm here again begging with my cap in hand for help. To see this code in action as it stands, please go to www.grammarproofing.com Code: <head> <!--quote generator --> <script type="text/javascript"> function update(){ var price = document.getElementById("Package").value; var words = document.getElementById("words").value; if (words != "") { words = parseInt(words); if (isNaN (words)) { alert ("Please enter the number of words in figures"); document.getElementById("words").value = ""; return false; } } var wordsOver2000 = words-2000; if (wordsOver2000 <0) {wordsOver2000 = 0} words = words - wordsOver2000; var Tprice = ((price * words) + (price * .95 * wordsOver2000)).toFixed(2) ;document.getElementById("Totprice").value = Tprice; document.getElementById("Totprice2").innerHTML = "Your Quote Total Is: MYR" + Tprice } </script> <!--end quote generator --> </head> Code: <body> <!--start quote generator --> <div class="quote" id="quote"> <select name="Package" id = "Package" onchange = "update()"> <option value="0.052">STUDENTS THE 11th HOUR PACKAGE</option> <option value="0.041">STUDENTS EXPRESS PACKAGE</option> <option value="0.035" selected="selected">STUDENTS WORK in PROGRESS PACKAGE</option> </select> x <input type="text" id="words" onchange="update()" value="" /> WORDS<br /> = MYR <input type = "text" id = "Totprice" readonly /> </div> <!--end quote generator --> </body> Thanks in advance for any help offered. Regards as always, Phil Firstly i have to thank Philip M for this code which is great but for what i need, requires a little extra tweaking. Its a price quote generator (package price x number of pages = price) However if the customer has more pages over a set amount (2000) the package price changes. So the formula becomes (package price x pages (upto 2000) = price + number of pages over 2000 x new package price = Total price. Does that make sense? So i can do a flat rate with this code but if anyone has suggestions on how to do the rest? I would be eternaly grateful as my head really hurts. Code: <head> <script type="text/javascript"> function update(){ var price = document.getElementById("Package").value; var pages = document.getElementById("pages").value; var Tprice = (price * pages).toFixed(2) ; document.getElementById("Totprice").value = Tprice; document.getElementById("Totprice2").innerHTML = "Your Order Total Is: $" + Tprice } </script> </head> <body> choose<select name="Package" id = "Package"> <option value="2">a</option> <option value="3">b</option> <option value="4">c</option> </select> No. of PAGES <input type = "text" id = "pages" onChange="update()" ><br> QUOTE <input type = "text" id = "Totprice"> <br><br> <span id ="Totprice2"></span><br> </body> Thanks all 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 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 The question in the book says: Many companies normally charge a shipping and handling fee for purchases. Create a Web page that allows a user to enter a purchase price into a text box; include a JavaScript function that calculates shipping and handling. Add functionality to the script that adds a minimum shipping and handling fee of $1.50 for any purchase that is less than or equal to $25.00. For any orders over $25.00, add 10% to the total purchase price for shipping and handling, but do not include the $1.50 minimum shipping and handling fee. The formula for calculating a percentage is price*percent/100. After you determine the total cost of the order (purchase plus shipping and handling), display it in an alert dialog box. This is what I have so far, it comes up with the text box, but when the price is entered it doesn't come back with an answer. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="js_styles.css" type="text/css" /> <title>Calculating Shipping & Handling</title> <script type="text/javascript"> /* ![CDATA[ */ function getShipping(); { if (price <= 25.00) shipping = 1.50 else if(price > 25.00) shipping = (price * (10/100)); } /* ]]> */ </script> </head> <body> <script type="text/javascript"> /* ![CDATA[ */ document.write("<h1>Purchase Price with Shipping</h1>"); /* ]]> */ </script> <script type="text/javascript"> /* <![CDATA[ */ var price=prompt("What is your purchase price?"); getShipping(); document.write ("<p>The purchase price entered is $" + (price) + "</p>"); document.write ("<p>Shipping is $" + (shipping) + "</p>"); var total = price + shipping; document.write("Your total price with shipping is $ " + (total) + ""); /* ]]> */ </script> </body> </html> Code: <script> // Calculate and display the total cost of the selected cruise function CostOfCruise(findRounding) { //Get the varius elements in the statements and variable document.getelementbyID ("costCruise" + i); //Assign a value to the radioButton document.getElementById("returnFare"); //Assign a vlaue to the checkbox document.getElementById("costSeat" + i); //Assign a value to the second radio button document.getElementById ("totalCost"); //Assign a value to the total cost of the cruise document.getElementById("findRounding"); //Assign a rounded value to the total cost //List the variables involved var radioButton; // A radio button var costCruise; //Cost of each cruise var checkbox; //A checkbox var returnFare; //The reutrn fare var radio; //the second set of radio buttons var costSeat; //Cost of seating choice var totalCost; //The final cost of the cruise //Determine the cruise chosen and its cost //Get the cost of the selected cruise for (var i = 1; i <= 5; i++) radioButton = document.getElementById("Costcruise" + i); // Display the appropriate response if (radioButton.value === "") alert("You need to choose one of the islands to visit."); else (radioButton.checked === true); //Get the cost of the cruise as a whole number costCruise *= parseInt(radioButton.value); //Determine if return fare purchased // Check if the object is valid before attempting to use it if (returnFare.value === null) return; else (checkbox.checked === true); checkbox = document.getElementById("returnFare"); //Get the value of the reutrn fare as a whole number returnFare *= parseInt(checkbox.value); //Determine which type of seating chosen if (radio.value === "") alert("You need to choose your preferred seating arrangements."); else (radio.checked === true); radio = document.getElementById("costSeat" + i); //Get the cost of the seating as a whole number costSeat *= parseFloat(radio.value); //Calculate total cost of cruise totalCost = document.getElementById ("totalCost"); totalCost = ("costCruise" * "returnFare") * "costSeat"; //Total Cost of cruise //rounds the cost to its nearest integer findRounding = document.getElementById("findRounding"); findRounding = Math.round("totalCost"); alert ("The total cost of this cruise is $" + findRounding); } </script> <html> body> <h1>Island Hopper Cruises Fare Calculator</h1> <p> Complete the form below to calculate the cost of your cruise.</p> <form> <!--The choices of islands to visit with their assigned values or cost of the trip.--> <p>Route:<br /> <input type="radio" id="cruise1" name="costCruise" value="49"> <label for="cruise1">Main Beach - Azkaban Island</label><br> <input type="radio" id="cruise2" name="costCruise" value="79"> <label for="cruise2">Main Beach - Amity Island</label><br> <input type="radio" id="cruise3" name="costCruise" value="109"> <label for="cruise3">Main Beach - Treasure Island</label><br> <input type="radio" id="cruise4" name="costCruise" value="89"> <label for="cruise4">Main Beach - Gilligan's Island</label><br> <input type="radio" id="cruise5" name="costCruise" value="59"> <label for="cruise5">Main Beach - Skull Island</label><br></p> <!--The decision to purcahse a return fare or not.--> <p> Click here if you will be purchasing a return fa <input type="checkbox" id="returnFare" name="returnFare" value="2"></p> <!--The choice of seating arrangment and their assigned value according to class of seat.--> <p>Seating:<br /> <input type="radio" id="first" name="costSeat" value="2.5"> <label for="first">First class</label><br> <input type="radio" id="busi" name="costSeat" value="1.5"> <label for="busi">Business class</label><br> <input type="radio" id="econ" name="costSeat" value="1"> <label for="econ">Economy class</label><br></p> <!--The total cost of the chosen trip displayed as an alert.--> <input type="button" value="Calculate" onclick="CostOfCruise"> <input type="reset" value="Reset"> </form> </body> </html> I use Firefox and am wondering how to select a word and wrap [b] tags or [quote] tags around it? Any tutorials?
I am trying to create a function or have this work some how where it displays the first number when you make your choice in the first drop down box, which is working so far. In the second drop down box, if any of the answers are chosen except for none, it will take off 10% of the first number. Then add or subtract from there. I just have a problem with creating a function to take off that 10%. Here is the javascript: Code: /* This source is shared under the terms of LGPL 3 www.gnu.org/licenses/lgpl.html You are free to use the code in Commercial or non-commercial projects */ //Set up an associative array //The keys represent the size of the cake //The values represent the cost of the cake i.e A 10" cake cost's $35 var practice_field = new Array(); practice_field["None"]=0; practice_field["Allergy and Immunology"]=4400; practice_field["Endocrinology"]=4400; practice_field["Pathology"]=4400; practice_field["Dermatology"]=4400; practice_field["Geriatrics"]=4400; practice_field["Physical Rehabilitation"]=4400; practice_field["Family Practice"]=6900; practice_field["General Practice"]=6900; practice_field["Internal Medicine"]=6900; practice_field["Oncology"]=6900; practice_field["Oral Surgery"]=6900; practice_field["Radiology"]=6900; practice_field["Gastroenterology"]=6900; practice_field["Infectious Disease"]=6900; practice_field["Nephrology"]=6900; practice_field["Ophthalmology"]=6900; practice_field["Pediatrics"]=6900; practice_field["Urology"]=6900; practice_field["Anesthesiology"]=9000; practice_field["Cosmetic Surgery"]=9000; practice_field["General Surgery"]=9000; practice_field["Neurology"]=9000; practice_field["Otolaryngology"]=9000; practice_field["Plastic Surgery"]=9000; practice_field["Vascular Surgery"]=9000; practice_field["Cardiology"]=9000; practice_field["Emergency Medicine"]=9000; practice_field["Gynecology"]=9000; practice_field["Orthopedic Surgery"]=9000; practice_field["Pain Management"]=9000; practice_field["Pulmonary Surgery"]=9000; practice_field["Neurological Surgery"]=9900; practice_field["Obstetrics"]=9900; //Set up an associative array //The keys represent the filling type //The value represents the cost of the filling i.e. Lemon filling is $5,Dobash filling is $9 //We use this this array when the user selects a filling from the form var society_member= new Array(); society_member["None"]=1; society_member["BCMA"]=0.10; society_member["DCMA"]=0.10; society_member["FOGS"]=0.10; society_member["FNS"]=0.10; society_member["PBCMS"]=0.10; society_member["FSPS"]=0.10; //This function finds the filling price based on the //drop down selection function getPracticeField() { var docPracticeField=0; //Get a reference to the form id="cakeform" var theForm = document.forms["cakeform"]; //Get a reference to the select id="filling" var selectedPracticeField = theForm.elements["practice"]; //set cakeFilling Price equal to value user chose //For example filling_prices["Lemon".value] would be equal to 5 docPracticeField = practice_field[selectedPracticeField.value]; //finally we return cakeFillingPrice return docPracticeField; } //This function finds the filling price based on the //drop down selection function getSelectedSociety() { var docSelectedSociety=0; //Get a reference to the form id="cakeform" var theForm = document.forms["cakeform"]; //Get a reference to the select id="filling" var selectedSociety = theForm.elements["society"]; //set cakeFilling Price equal to value user chose //For example filling_prices["Lemon".value] would be equal to 5 docSelectedSociety = society_member[selectedSociety.value]; //finally we return cakeFillingPrice return docSelectedSociety; } //candlesPrice() finds the candles price based on a check box selection function candlesPrice() { var candlePrice=0; //Get a reference to the form id="cakeform" var theForm = document.forms["cakeform"]; //Get a reference to the checkbox id="includecandles" var includeCandles = theForm.elements["includecandles"]; //If they checked the box set candlePrice to 5 if(includeCandles.checked==true) { candlePrice=5; } //finally we return the candlePrice return candlePrice; } function insciptionPrice() { //This local variable will be used to decide whether or not to charge for the inscription //If the user checked the box this value will be 20 //otherwise it will remain at 0 var inscriptionPrice=0; //Get a refernce to the form id="cakeform" var theForm = document.forms["cakeform"]; //Get a reference to the checkbox id="includeinscription" var includeInscription = theForm.elements["includeinscription"]; //If they checked the box set inscriptionPrice to 20 if(includeInscription.checked==true){ inscriptionPrice=20; } //finally we return the inscriptionPrice return inscriptionPrice; } function calculateTotal() { //Here we get the total price by calling our function //Each function returns a number so by calling them we add the values they return together var cakePrice = getPracticeField() * getSelectedSociety() + candlesPrice() + insciptionPrice(); //display the result var divobj = document.getElementById('totalPrice'); divobj.style.display='block'; divobj.innerHTML = "Total Price For the Cake $"+cakePrice; } function hideTotal() { var divobj = document.getElementById('totalPrice'); divobj.style.display='none'; } I have to create a website as a project for my university course. Said course has nothing at all to do with computers really so it's really throwing us into the deep end as the majority of us have/had no interest in this particular field. Regardless, I am creating a website that uses the Random Quote Generator Javascript that I copied from the Hotscripts website. The code details are below and my question is: is there any way I could change the formatting for each quote? For example, change quote 1 to be, say, yellow or bold and change quote 3 to be aligned right and blue? I mainly want to change the colour for each quote but having any other info on how to format it would be really helpful. Code: var quotes=new Array(); quotes[0] = "This is quote 1."; quotes[1] = "This is quote 2."; quotes[2] = "This is quote 3."; var q = quotes.length; var whichquote=Math.round(Math.random()*(q-1)); function showquote(){document.write(quotes[whichquote]);} showquote(); Also if you could put it into total idiot-speak for me I'd be oh so grateful. It shouldn't be too hard. I just can't crack it. I haven't moved from my computer in hours So, my problem... In a form I have two drop down menus (list of 3 and 7) and two tick boxs. What I want to do is show an estimated quote based on the selections. Here is the code I have if it helps. I haven't included the javascript in the header since it doesn't make sense. Code: <form method="post" action=""> <div id="left"> <p><b>Name:</b><br /><input type="text" name="name" /></p> <p><b>Daytime Number:</b><br /><input type="text" name="daytime" /></p> <p><b>Address Line 1:</b><br /><input type="text" name="address1" /></p> <p><b>City/Town:</b><br /><input type="text" name="citytown" /></p> <p><b>Postcode:</b><br /><input type="text" name="postcode" /></p> <p><b>Cake Type:</b><br /><select id="caketype"> <option value="0">Fruit cake +£0</option> <option value="20">Sponge +£20</option> <option value="30">Chocolate +£30</option> </select></p> <p><b>Tiers:</b><br /><select name="tiers"> <option>1 Tier +£0</option> <option>2 Tiers +£20</option> <option>3 Tiers +£40</option> <option>4 Tiers +£60</option> <option>5 Tiers +£80</option> <option>6 Tiers +£100</option> </select></p> <p><input type="submit" value="Submit Message"/><input type="reset" /></p> </div> <div id="right"> <p><b>Email:</b><br /><input type="text" name="email" /></p> <p><b>Mobile Number:</b><br /><input type="text" name="mobile" /></p> <p><b>Address Line 2:</b><br /><input type="text" name="address2" /></p> <p><b>County:</b><br /><input type="text" name="county" /></p> <p><b>Message:</b><br /><textarea name="message" cols=30 rows=2></textarea></p> <p><b>Extras:</b><br /> <input type="checkbox" id="selecteddecorativebox" value="25" />Decorative Box +£25<br /> <input type="checkbox" id="selecteddelivery" value="20" checked/>25 Mile Maximum Delivery +£20<br /></p> <h4>Estimated Price: £<script type="text/javascript"> var base = 100; var quote = base + caketype + tiers + decorativebox + delivery; document.write(quote); </script><button type="button" onclick="refresh()">Refresh</button></h4> <div id=output><br /></div> </div> </form> Thanks I have the following piece of script to write a line in HTML which is variable; the variable 'bunting' is the path and filename (which varies depending on site where page resides): <CODE> <script language="JavaScript" type="text/javascript"> <!-- document.write('<div id="ic1" style="background-image:url(' + bunting + ');">'); //--> </script> </CODE> This works in most browsers, but in Firefox 3.0.4, it fails to render, and instead generates a piece of literal text: ');//--> on the page. I've read, and re-read the script, and believe it to be correct (with the single quote marks being the javascript delimiters and the double quotes being the html delimiters. I've also tried various combinations of creating piecemeal variables and then creating a final variable by concatenating the pieces. Any help would be greatly appreciated. I have this script and it is performing the calculations to provide an instant price quote script fine in IE and also making only certain boxes editable when a certain radio button is clicked. However in Firefox or Safari it isn't working. Code: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> td.calchead{ width:75px; background:none; border-top:thin solid black; text-align:right; } td.calc{ width:75px; background:none; border:thin solid black; text-align:right; } td.products{ float:right; text-align:right; border:1px solid black; } td.inputs{ width:200px; float:right; text-align:right; } p.products{ text-align:left; font-family:Georgia, "Times New Roman", Times, serif, 14px; } p.inputs{ text-align:left; font-family:Georgia, "Times New Roman", Times, serif, 14px; } input.inputs{ width:30px; background-color:CCCCCC; } p.calculate{ text-align:left; font-family:Georgia, "Times New Roman", Times, serif, 14px; } </style> <?php $header = $_POST['header']; $productid = $_POST['group1']; $width = $_POST['width']; $height = $_POST['height']; $openings = $_POST['openings']; $clearpanel = $_POST['clearpanel']; $resident = $_POST['resident']; $color = $_POST['color']; $motor = $_POST['motor']; $priceperheader=.5833; //error checking, ensures all variables are numeric between calculatable values 0 and 999 if($width>=0 && $width<=999 && $height>=0 && $height<=999 && $openings>=0 && $openings<=999 && $clearpanel>=0 && $clearpanel<=999) { $width2=$width+6; $height2=$height+6; if($productid == 'Roll-down Shutters') { $height2=$height2+4; } $wh=$width2*$height2; if($header=='yes') { $he=$openings*$width; $he=$he*$priceperheader; } else { $he=0; } if($resident=='yes') { $tax=1.085; } else { $tax=1; } if($motor=='2') { $motor=488*$openings; } else { $motor=0; } //$cl=$clearpanel*$priceperclearpanel; //echo(' ' + $wh + ' ' + $he + ' ' + $cl + ' '); //divide sq ft by 144 to get sq inches ////.050 alum =$4.94 per sq ft ////24 gauge steel =$3.72 per sq ft ////change Protexan to Lexan =9.94 sq ft ////roll downs = $24.99 per sq ft motor = $488. ////bahama impact = 25.99 sq ft no impact 21 per sq ft ////colonial impact = 25.99 and non = 21 sq ft ////Hurricane Fabric $6.38 per sq ft //All prices are self install only installation is extra and highly reccommended ////F track = $1.79 per ft ////H track = $2.29 per ft ////Texas residents add 8.25 percent sales tax //Standard Clamshell<input type='radio' name='group1' value='Standard Clamshell' onFocus="enable5()"><br /> //Impact Clamshell<input type='radio' name='group1' value='Impact Clamshell' onFocus="enable5()"><br /> //.063 Aluminum Panels<input type='radio' name='group1' value='.063 Aluminum Panels' onFocus="enable1()"><br /> //Accordian Shutters<input type='radio' name='group1' value='Accordian Shutters' onFocus="enable4()" /><br /> function sum($productid, $priceperopening, $wh, $he, $tax, $motor, $width, $height, $width2, $height2) { $wh=$wh*$priceperopening; $subtotal=$wh+$he; $subtotal=$subtotal+$motor; $total=$subtotal*$tax; $tax=$total-$subtotal; echo("<table><tr ><td>Product</td><td>Measured Opening</td><td>Finished Opening</td></tr> <tr><td >" . $productid . "</td><td align'right'>" . $width . " x " . $height . "</td><td align'right'>" . $width2 . " x " . $height2 . "</td></tr></table> <table><tr><td></td><td class='calchead'>Shutter</td><td class='calchead'>Header</td><td class='calchead'>Motor</td><td class='calchead'>Tax</td><td class='calchead'>Total</td></tr> <tr><td>$</td><td class='calc'>". money_format('%.2n',$wh) . "</td><td width='30' class='calc'>". money_format('%.2n',$he) . "</td><td width='30' class='calc'>" . money_format('%.2n',$motor) . "</td><td width='30' class='calc'>" . money_format('%.2n',$tax) . "</td><td align='right' class='calc'>$" . money_format('%.2n',$total) . "</td></tr></table>"); } if($productid == '.050 Aluminum Panels') { $priceperopening=.03431; sum($productid, $priceperopening, $wh, $he, $tax, $motor, $width, $height, $width2, $height2); } if($productid == '24 gauge steel') { $priceperopening=.02583; sum($productid, $priceperopening, $wh, $he, $tax, $motor, $width, $height, $width2, $height2); } if($productid == 'lexan') { $priceperopening=.0659; sum($productid, $priceperopening, $wh, $he, $tax, $motor, $width, $height, $width2, $height2); } if($productid == 'Roll-down Shutters') { $priceperopening=.17354; sum($productid, $priceperopening, $wh, $he, $tax, $motor, $width, $height, $width2, $height2); } if($productid == 'Impact Bahama Shutters') { $priceperopening=.18049; sum($productid, $priceperopening, $wh, $he, $tax, $motor, $width, $height, $width2, $height2); } if($productid == 'Impact Colonial Shutters') { $priceperopening=.18049; sum($productid, $priceperopening, $wh, $he, $tax, $motor, $width, $height, $width2, $height2); } if($productid == 'Hurricane Fabric') { $priceperopening=.04431; sum($productid, $priceperopening, $wh, $he, $tax, $motor, $width, $height, $width2, $height2); } if($productid == 'Non-Impact Bahama Shutters') { $priceperopening=.14583; sum($productid, $priceperopening, $wh, $he, $tax, $motor, $width, $height, $width2, $height2); } if($productid == 'Non-Impact Colonial Shutters') { $priceperopening=.14583; sum($productid, $priceperopening, $wh, $he, $tax, $motor, $width, $height, $width2, $height2); } } else {echo('Please make sure to enter numbers greater than zero and less than 999 in all required fields.');} $header=''; ?> <script type='text/javascript'> //white() clears backs of inputs to white and is called from eable functions function white(){ document.getElementById("header").style.background='#ffffff'; document.getElementById("width").style.background='#ffffff'; document.getElementById("height").style.background='#ffffff'; document.getElementById("openings").style.background='#ffffff'; document.getElementById("resident").style.background='#ffffff'; document.getElementById("color").style.background='#ffffff'; document.getElementById("motor").style.background='#ffffff'; } //enable1-5() enables particular requested fields specific for product type and disables unused fields. function enable1() { white(); document.getElementById("header").disabled=''; document.getElementById("width").disabled=''; document.getElementById("height").disabled=''; document.getElementById("openings").disabled=''; document.getElementById("resident").checked=''; document.getElementById("resident").disabled=''; document.getElementById("color").style.background='#CCCCCC'; document.getElementById("color").value=''; document.getElementById("color").disabled='true'; document.getElementById("motor").style.background='#CCCCCC'; document.getElementById("motor").value=''; document.getElementById("motor").disabled='true'; } function enable2() { white(); document.getElementById("header").disabled=''; document.getElementById("width").disabled=''; document.getElementById("height").disabled=''; document.getElementById("openings").disabled=''; document.getElementById("resident").checked=''; document.getElementById("resident").disabled=''; document.getElementById("color").value=''; document.getElementById("color").style.background='#CCCCCC'; document.getElementById("color").disabled='true'; document.getElementById("motor").value=''; document.getElementById("motor").style.background='#CCCCCC'; document.getElementById("motor").disabled='true'; } function enable3() { white(); document.getElementById("header").checked=''; document.getElementById("header").style.background='#CCCCCC'; document.getElementById("header").disabled='true'; document.getElementById("width").disabled=''; document.getElementById("height").disabled=''; document.getElementById("openings").disabled=''; document.getElementById("resident").disabled=''; document.getElementById("resident").checked=''; document.getElementById("color").disabled=''; document.getElementById("motor").disabled=''; } function enable4() { white(); document.getElementById("header").checked=''; document.getElementById("header").style.background='#CCCCCC'; document.getElementById("header").disabled='true'; document.getElementById("width").disabled=''; document.getElementById("height").disabled=''; document.getElementById("openings").disabled=''; document.getElementById("resident").checked=''; document.getElementById("resident").disabled=''; document.getElementById("color").disabled=''; document.getElementById("motor").style.background='#CCCCCC'; document.getElementById("motor").value=''; document.getElementById("motor").disabled='true'; } function enable5() { white(); document.getElementById("header").checked=''; document.getElementById("header").disabled='true'; document.getElementById("header").style.background='#CCCCCC'; document.getElementById("width").disabled=''; document.getElementById("height").disabled=''; document.getElementById("openings").disabled=''; document.getElementById("resident").checked=''; document.getElementById("resident").disabled=''; document.getElementById("color").value=''; document.getElementById("color").disabled='true'; document.getElementById("color").style.background='#CCCCCC'; document.getElementById("motor").value=''; document.getElementById("motor").disabled='true'; document.getElementById("motor").style.background='#CCCCCC'; } </script> <title>Estimator</title> </head> <body> <div> <table> <tr> <td><p class='products'>First, select a product</p></td> <td><p class='inputs'>Then, enter dimensions and select options (in inches) that appear in white</p></td> </tr> <tr> <td class='products'> <form width='550' name='form01' method='post' action='http://www.windowguardoftexas.com/estimator.php'> .050 Aluminum Panels<input type='radio' name='group1' value='.050 Aluminum Panels' onFocus="enable1()"><br /> 24 Gauge Steel<input type='radio' name='group1' value='24 gauge steel' onFocus="enable1()"><br /> Lexan<input type='radio' name='group1' value='lexan' onFocus="enable2()"><br /> Roll-down Shutters<input type='radio' name='group1' value='Roll-down Shutters' onFocus="enable3()"><br /> Impact Bahama Shutters<input type='radio' name='group1' value='Impact Bahama Shutters' onFocus="enable4()"><br /> Impact Colonial Shutters<input type='radio' name='group1' value='Impact Colonial Shutters' onFocus="enable4()"><br /> Hurricane Fabric<input type='radio' name='group1' value='Hurricane Fabric' onFocus="enable5()"><br /> Non-Impact Bahama Shutters<input type='radio' name='group1' value='Non-Impact Bahama Shutters' onFocus="enable4()"><br /> Non-Impact Colonial<input type='radio' name='group1' value='Non-Impact Colonial Shutters' onFocus="enable4()"><br /> </td> <td class='inputs'> Add Header and F-track to openings: <input type='checkbox' name='header' class='inputs' value='yes' disabled="disabled"/><br /> Width: <input type='text' class='inputs' name='width' value='' maxlength='3'disabled='disabled' /><br /> Height: <input type='text' class='inputs' name='height' value='' maxlength='3' disabled='disabled' /><br /> Openings: <input type='text' class='inputs' name='openings' value='' maxlength='3' disabled='disabled' /><br /> Texas Resident <input type='checkbox' name='resident' class='inputs' value='yes' disabled="disabled"/><br /> Color: <select name="color" id='color' class='inputs' disabled='disabled'><br /> <option value="0" >--Select Color--</option> <option value="1" >White</option> <option value="2">Bronze</option> <option value="3">Ivory</option> <option value="3">Beige</option> </select> <br /> Motor: <select name="motor" class='inputs' disabled="disabled"><br /> <option value="0">--Select Motor--</option> <option value="1">None</option> <option value="2" >Standard</option> </select> <br /><br /> <p class='calculate'>Finally, press calculate</p> <input type='reset' name='Submit2' value='Reset'> <input type='submit' name='Submit' value='Calculate'> </td> </form> </tr> <tr><td>All prices are self install only, installation</td><td>is extra and highly reccommended</td></tr> </table> </div> </body> </html> How do I get this to work in Firefox and Safari? Why would it work in IE but not the others? I have a small form that I'm working on for a client. They want a form that their potential leads can fill out and then hit 'calculate rate'. Once this is done, the results should display on another page with a short summary of what their quote will be as well as some of the other information they filled out. It should also send an email to my client displaying the information that their lead just filled out. My only problem is I am not sure how to go about the calculation part. I know I would have to do an onSubmit, but how would I hide that calculation and then receive that number on another page. Here is the javascript for that form: Code: /* This source is shared under the terms of LGPL 3 www.gnu.org/licenses/lgpl.html You are free to use the code in Commercial or non-commercial projects */ //Set up an associative array //The keys represent the size of the cake //The values represent the cost of the cake i.e A 10" cake cost's $35 var practice_field = new Array(); practice_field["None"]=0; practice_field["Allergy and Immunology"]=4400; practice_field["Endocrinology"]=4400; practice_field["Pathology"]=4400; practice_field["Dermatology"]=4400; practice_field["Geriatrics"]=4400; practice_field["Physical Rehabilitation"]=4400; practice_field["Family Practice"]=6900; practice_field["General Practice"]=6900; practice_field["Internal Medicine"]=6900; practice_field["Oncology"]=6900; practice_field["Oral Surgery"]=6900; practice_field["Radiology"]=6900; practice_field["Gastroenterology"]=6900; practice_field["Infectious Disease"]=6900; practice_field["Nephrology"]=6900; practice_field["Ophthalmology"]=6900; practice_field["Pediatrics"]=6900; practice_field["Urology"]=6900; practice_field["Anesthesiology"]=9000; practice_field["Cosmetic Surgery"]=9000; practice_field["General Surgery"]=9000; practice_field["Neurology"]=9000; practice_field["Otolaryngology"]=9000; practice_field["Plastic Surgery"]=9000; practice_field["Vascular Surgery"]=9000; practice_field["Cardiology"]=9000; practice_field["Emergency Medicine"]=9000; practice_field["Gynecology"]=9000; practice_field["Orthopedic Surgery"]=9000; practice_field["Pain Management"]=9000; practice_field["Pulmonary Surgery"]=9000; practice_field["Neurological Surgery"]=9900; practice_field["Obstetrics"]=9900; //Set up an associative array //The keys represent the filling type //The value represents the cost of the filling i.e. Lemon filling is $5,Dobash filling is $9 //We use this this array when the user selects a filling from the form var society_member= new Array(); society_member["None"]=null; society_member["BCMA"]=0.10; society_member["DCMA"]=0.10; society_member["FOGS"]=0.10; society_member["FNS"]=0.10; society_member["PBCMS"]=0.10; society_member["FSPS"]=0.10; //This function finds the filling price based on the //drop down selection function getPracticeField() { var docPracticeField=0; //Get a reference to the form id="cakeform" var theForm = document.forms["cakeform"]; //Get a reference to the select id="filling" var selectedPracticeField = theForm.elements["practice"]; //set cakeFilling Price equal to value user chose //For example filling_prices["Lemon".value] would be equal to 5 docPracticeField = practice_field[selectedPracticeField.value]; //finally we return cakeFillingPrice return docPracticeField; } //This function finds the filling price based on the //drop down selection function getSelectedSociety() { var docSelectedSociety=0; //Get a reference to the form id="cakeform" var theForm = document.forms["cakeform"]; //Get a reference to the select id="filling" var selectedSociety = theForm.elements["society"]; //set cakeFilling Price equal to value user chose //For example filling_prices["Lemon".value] would be equal to 5 docSelectedSociety = society_member[selectedSociety.value]; //finally we return cakeFillingPrice return docSelectedSociety; } //candlesPrice() finds the candles price based on a check box selection function candlesPrice() { var candlePrice=0; //Get a reference to the form id="cakeform" var theForm = document.forms["cakeform"]; //Get a reference to the checkbox id="includecandles" var includeCandles = theForm.elements["includecandles"]; //If they checked the box set candlePrice to 5 if(includeCandles.checked==true) { candlePrice=0; } //finally we return the candlePrice return candlePrice; } function insciptionPrice() { //This local variable will be used to decide whether or not to charge for the inscription //If the user checked the box this value will be 20 //otherwise it will remain at 0 var inscriptionPrice=0; //Get a refernce to the form id="cakeform" var theForm = document.forms["cakeform"]; //Get a reference to the checkbox id="includeinscription" var includeInscription = theForm.elements["includeinscription"]; //If they checked the box set inscriptionPrice to 20 if(includeInscription.checked==true){ inscriptionPrice=0; } //finally we return the inscriptionPrice return inscriptionPrice; } function calculateTotal() { //Here we get the total price by calling our function //Each function returns a number so by calling them we add the values they return together var cakePrice = getPracticeField() + null - (getPracticeField() * getSelectedSociety()) + candlesPrice() + insciptionPrice(); //display the result var divobj = document.getElementById('totalPrice'); divobj.style.display='block'; divobj.innerHTML = "Your Pre-Paid Legal Defense Fee Will Be Around $"+cakePrice; } function hideTotal() { var divobj = document.getElementById('totalPrice'); divobj.style.display='none'; } If you look at the bottom you can see where the Function that Calculates everything is. Right now it calculates onClick. I just want it to calculate after the user has filled out the form completely and display that calculation on another page along with the rest of the information they inputted. I have a JavaScript application that needs to preserve double quote marks and apostrophes (" and ') that are entered into form fields by the user. The form data is passed through several screens using hidden fields. Right now, apostrophes work because I have the input fields coded as value="". I have not found a way for JavaScript to retrieve the field's value if double quotes are entered by the user. If I change the parameter to value='' (single quotes) then the apostrophes probably won't work. Is there a straightforward way for JavaScript to retrieve the field value containing quotes, so that I can manipulate it into a different string that can be easily passed between HTML pages? 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 /> 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 |