|
JavaScript - Price/quote Generator - Re-visited
Hi 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>
Similar TutorialsHi 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 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. 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. I am looking for something that works like this list/menu. Code: <html>
<head>
<title>
trial
</title>
<script type="text/javascript">
function go(a)
{
c=document.getElementById("hidden").value;
if(c!="")
{
document.getElementById(c).className="black";
}
b=document.getElementById(a).value;
document.getElementById(b).className="red";
document.getElementById("hidden").value=b;
}
</script>
<style type="text/css">
.black {color: #000000;}
.red {color: #c00;}
</style>
</head>
<body>
<select id="blue" onchange="go(this.id)">
<option value="1" id="1">1</option>
<option value="2" id="2">2</option>
<option value="3" id="3">3</option>
<option value="4" id="4">4</option>
<option value="5" id="5">5</option>
<option value="6" id="6">6</option>
</select>
<input type="hidden" id="hidden" value="">
</body>
</html>
This code does not work "correctly" in IE It does work "correctly" in Firefox I need something that will work "correctly" in IE and Firefox I have looked high and low but have come up with nothing.... Also I don't know if it is possible but I would like to find something that changes the font color of every previous selection that has been made not just the last one. Has any one seen anything like that???? How can i make counter for my site that will alert how many visitors had been before every new Visiting? <script type="text/javascript" > function counter(incrimentbyone){ // IF i make var i=0 everytime alert will be 1 and like this alert is "NaN" var i=i+incrimentbyone; alert(i); } </script> <body onLoad="counter(1)"> 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';
}
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? Hi. I have a problem with a random link generator within a DIV. When I try it on my desktop it works fine, but does nothing once I upload it to the website. I'm not sure how to explain what happens, but here is it, more or less: The website is this: http://torcacita.atspace.com Via an Ajax script, http://torcacita.atspace.com/menu.html is loaded into DIV "menu". Here's the script: <script type="text/javascript"> ajaxpage('menu.html', 'menu') //load "menu.html" into "menu" DIV </script> Well, there's another load of stuff inside the <head> tag. You may see it from the main page source code. Anyway, if you go to the menu.html, the link generator will work there as it is intended; however, if you try it from the main page, it won't do anything. But people are not suppossed to go to menu.html. They are suppossed to load it from the index.html (I mean, plain http://torcacita.atspace.com) So, here's the link generator code: --------------------------------- <script type="text/javascript"> function randomlinks(){ var myrandom=Math.round(Math.random()*9) var links=new Array() links[0]="http://www.javascriptkit.com" links[1]="http://www.dynamicdrive.com" links[2]="http://www.cssdrive.com" links[3]="http://www.codingforums.com" links[4]="http://www.news.com" links[5]="http://www.gamespot.com" links[6]="http://www.msnbc.com" links[7]="http://www.cnn.com" links[8]="http://news.bbc.co.uk" links[9]="http://www.news.com.au" window.location=links[myrandom] } </script> <form> <input type="button" value="Lo Que Sea" onClick="randomlinks()"> </form> --------------------------------- I believe this could be solved if I could target the generator to the whole window, 'cause maybe it's trying to open the new page inside the DIV. Well, I don't know... So, what do you think? Could somebody help me? I have a piece of code that randomly picks a line from a preset list and displays it whenever the page is loaded. I'm using it to generate random quotes on my pages. At the moment, there seems to be a good chance that when the page loads no quote appears at all, just a blank space. Anyone know why this could be happening? the code I am using is: Code: <script type="text/javascript">
q0= "<img src=\"images/quotes/01.png\" />";
q1= "<img src=\"images/quotes/02.png\" />";
q2= "<img src=\"images/quotes/03.png\" />";
q3= "<img src=\"images/quotes/04.png\" />";
q4= "<img src=\"images/quotes/05.png\" />";
q5= "<img src=\"images/quotes/06.png\" />";
q6= "<img src=\"images/quotes/07.png\" />";
q7= "<img src=\"images/quotes/08.png\" />";
q8= "<img src=\"images/quotes/09.png\" />";
q9= "<img src=\"images/quotes/10.png\" />";
q10= "<img src=\"images/quotes/11.png\" />";
q11= "<img src=\"images/quotes/12.png\" />";
var ran_unrounded=Math.random()*11;
var ran_number=Math.round(ran_unrounded);
document.write(eval("q"+ran_number));
</script>
I know i don't have any code but does anyone have ideas how to start one? Preferably not squares hexes as each piece.
Hey I'm somewhat new to the javascript world because 95% of my website is HTML so, if you will, I need help writing the javascript for a Random Question Generator...basicly all I have is Code: <script type="text/javascript"> var Q = new Array() Q[1] = "What is your favorite color?"; Q[2] = "What is your favorite animal?"; Q[3] = "What is your favorite place?"; </script> In the real one, there will be about 20 questions and I will need it to choose a quetion randomly out of the 20. As I said i am a beginer so as simple as possible would be great. Thank You for your help in advance Hello. I'm new here and learning JavaScript. Could you help me to write very simple script to auto generate user name ? From any letters. Min 6 - Max 10. Like: "jgFJFJ" "KGHGyvk" etc. Please help. Hey guys. It's been a while since I was last here but I'm having a few problems. I'm building a random word generator form for a friend but my knowledge of JS is limited. I have found a script to randomly generate a word at the click of a button. Quote: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//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" /> <title>Untitled Document</title> <SCRIPT LANGUAGE="JavaScript"> <!-- // Use the following variable to specify // the number of random words var NumberOfWords = 28 var words = new BuildArray(NumberOfWords) // Use the following variables to // define your random words: words[1] = "czarevitch" words[2] = "brightwork" words[3] = "verkrampte" words[4] = "protectrix" words[5] = "nudibranch" words[6] = "grandchild" words[7] = "newfangled" words[8] = "flugelhorn" words[9] = "mythologer" words[10] = "pluperfect" words[11] = "jellygraph" words[12] = "quickthorn" words[13] = "rottweiler" words[14] = "technician" words[15] = "cowpuncher" words[16] = "middlebrow" words[17] = "jackhammer" words[18] = "triphthong" words[19] = "wunderkind" words[20] = "dazzlement" words[21] = "jabberwock" words[22] = "witchcraft" words[23] = "pawnbroker" words[24] = "thumbprint" words[25] = "motorcycle" words[26] = "cryptogram" words[27] = "torchlight" words[28] = "bankruptcy" function BuildArray(size){ this.length = size for (var i = 1; i <= size; i++){ this[i] = null} return this } function PickRandomWord(frm) { // Generate a random number between 1 and NumberOfWords var rnd = Math.ceil(Math.random() * NumberOfWords) // Display the word inside the text box frm.WordBox.value = words[rnd] } //--> </SCRIPT> </head> <body> <FORM NAME="WordForm"> <INPUT TYPE=TEXT SIZE=10 NAME="WordBox"><BR> <INPUT TYPE=BUTTON VALUE="Click Here to Get a Random Word" onClick="PickRandomWord(document.WordForm);" > <input TYPE="reset" VALUE="CLEAR" onClick="clearForm(this.form)"> </FORM> </body> </html> This works without problems, however by friend wants to be able to fill multiple boxes with words from different lists by clicking only 1 button. The script above will allow me to do separate boxes with their own buttons. If anyone can help it would be greatly appreciated. Foster |
|||||||