fi***********@gmail.com ΠΏΠΈΡΠ°Π»(Π°):
Hi,
Firstly, I know NOTHING about Javascript I'm afraid, so I'm hoping that
someone will be able to point me to a ready-made solution to my
problem!
A friend of mine (honest!) is wanting to have on his site, a Javascript
Calculator for working out the cost of what they want, for example:
1 widget and 2 widglets = Β£5.00
2 widgets and 2 widglets = Β£7.00
etc etc
He is wanting a solution so that users are faced with two (or maybe
more) drop down boxes where they select how many "widgets" and
"widglets" they want to buy, and the script outputs the price (by
multiplying the two figures).
Can this be done? If so, could someone please kindly supply me with the
script.
TIA, Neil.
------------------------------
Hi,
you can try this:
<html>
<head>
<style type="text/css"><!--
input.num { font-family: monospace; text-align: Right }
h1 {font-family: Comic Sans MS; font-size: 16pt; color: #008080;
font-weight: bold; margin-bottom:0px; padding:0px}
//--></style>
<title>Interactive JavaScript Order Form</title>
<script language="javascript"><!--
var RowsInForm = 5 //How many line items will be in the order
form?
var ProductsInList = 10 //How many products in your product list?
var SalesTaxRate = 0.0600 //Set to sales tax rate in decimal. e.g.
0.0775 is 6.00%.
var TaxableState = "FL" //Set to name of state you charge sales tax
in.
var ProdSubscript = 0 //Identifies subscript of selected product
in current row.
function MakeArray(n) {
this.length = n
for (var i=1;i<=n;i++) {this[i]=0}
return this
}
function BuildZeroArray(n) {
this.length = n
for (var i=0;i<=n;i++) {this[i]=0}
return this
}
function prodobj(name, unitprice) {
this.name = name
this.unitprice = unitprice
}
function ordobj(prodsub, qty, unitprice, extprice) {
this.prodsub = prodsub
this.qty = qty
this.unitprice = unitprice
this.extprice = extprice
}
function updateRow(rownum){
var
exeLine='ProdSubscript=document.ordform.prodchosen '+rownum+'.selectedIndex'
eval(exeLine)
ordData[rownum].prodsub=ProdSubscript
var exeLine='tempqty=document.ordform.qty'+rownum+'.va lue'
eval(exeLine)
ordData[rownum].qty=tempqty-0 //-- Gets unit price from the
product price list.
ordData[rownum].unitprice=prodlist[ProdSubscript].unitprice
ordData[rownum].extprice=(ordData[rownum].qty)*ordData[rownum].unitprice
var
exeLine='document.ordform.unitprice'+rownum+'.valu e=currency(ordData['+rownum+'].unitprice,10)'
eval (exeLine)
var
exeLine='document.ordform.extprice'+rownum+'.value =currency(ordData['+rownum+'].extprice,10)'
eval(exeLine)
updateTotals()
}
function updateTotals() {
var subtotal = 0
for (var i=1;i<=RowsInForm;i++) {
subtotal=subtotal+ordData[i].extprice
}
document.ordform.subtotal.value = currency(subtotal,10)
salestax=0
if (document.ordform.Taxable.checked) {
salestax = SalesTaxRate*subtotal
}
document.ordform.salestax.value = currency(salestax,10)
document.ordform.grandtotal.value = currency(subtotal+salestax,10)
}
function copyAddress() {
document.ordform.shipName.value=document.ordform.b illName.value
document.ordform.shipCompany.value=document.ordfor m.billCompany.value
document.ordform.shipAdd1.value=document.ordform.b illAdd1.value
document.ordform.shipAdd2.value=document.ordform.b illAdd2.value
document.ordform.shipCSZ.value=document.ordform.bi llCSZ.value
document.ordform.shipPhone.value=document.ordform. billPhone.value
document.ordform.shipEmail.value=document.ordform. billEmail.value
}
function currency(anynum,width) {
anynum=eval(anynum)
workNum=Math.abs((Math.round(anynum*100)/100));workStr=""+workNum
if (workStr.indexOf(".")==-1){workStr+=".00"}
dStr=workStr.substr(0,workStr.indexOf("."));dNum=d Str-0
pStr=workStr.substr(workStr.indexOf("."))
while (pStr.length<3){pStr+="0"}
if (dNum>=1000) {
dLen=dStr.length
dStr=parseInt(""+(dNum/1000))+","+dStr.substring(dLen-3,dLen)
}
if (dNum>=1000000) {
dLen=dStr.length
dStr=parseInt(""+(dNum/1000000))+","+dStr.substring(dLen-7,dLen)
}
retval=dStr+pStr
if (anynum < 0) {
retval=retval.substring(1,retval.length)
retval="("+retval+")"
}
retval = "$"+retval
//--Pad with leading blanks to better align numbers.
while (retval.length<width){retval=" "+retval}
return retval
}
//--></script>
</head>
<body>
<CENTER><h2>Interactive Order Form</h2></CENTER>
<BLOCKQUOTE><BLOCKQUOTE><BLOCKQUOTE>
<p>Here's a hypothetical order form, which uses quite a bit of advanced
JavaScript code. To try it out, pick a product from the drop-down list,
then type in a quantity and click another field, or press Tab. There's
also a button to copy information from the Bill To part of the form to
the Ship To part of the form.
<br></BLOCKQUOTE></BLOCKQUOTE></BLOCKQUOTE><BR>
<script language="JavaScript"><!--
prodlist = new BuildZeroArray(ProductsInList)
prodlist[0] = new prodobj('-none-',0)
prodlist[1] = new prodobj('Bumper Sticker',10.00)
prodlist[2] = new prodobj('Lapel Pin',10.50)
prodlist[3] = new prodobj('Ball Cap',11.00)
prodlist[4] = new prodobj('Calendar',11.99)
prodlist[5] = new prodobj('Braided Ball Cap',12.00)
prodlist[6] = new prodobj('License Plate',14.99)
prodlist[7] = new prodobj('One Year Membership',25.00)
prodlist[8] = new prodobj('Wrist Watch',99.99)
prodlist[9] = new prodobj('Five Year Membership',100.00)
prodlist[10] = new prodobj('Life Time Membership',250.00)
ordData = new MakeArray(RowsInForm)
for (var i=1; i<= RowsInForm; i++) {
ordData[i] = new ordobj(0,0,0,0)
}
//--></script>
</p>
<form name="ordform" method="POST" action="someHandler">
<table align="center" border="1" bgcolor="#800000"><tr>
<th width="192" BGCOLOR="YELLOW"><b>Product</b></th>
<th width="72" BGCOLOR="YELLOW" align="center"><b>Qty</b></th>
<th width="120" BGCOLOR="YELLOW" align="center"><b>Unit Price</b></th>
<th width="120" BGCOLOR="YELLOW" align="center"><b>Ext Price</b></th>
</tr>
<script language="JavaScript"><!--
for (var rownum=1;rownum<=RowsInForm;rownum++) {
document.write('<tr><td width=192 BGCOLOR="CYAN">')
document.write('<select name="prodchosen'+rownum+'"
onChange="updateRow('+rownum+')">')
for (i=0; i<=ProductsInList; i++) {
document.write ("<option>"+prodlist[i].name)
}
document.write ('</select></td>')
document.write ('<td width=72 align="center" BGCOLOR="CYAN"><input
class="num" name="qty'+rownum+'" value=""')
document.write ('size=3 onChange="updateRow('+rownum+')"></td>')
document.write ('<td width=120 align="center" BGCOLOR="CYAN">')
document.write ('<input class="num" name="unitprice'+rownum+'"
value="" ')
document.write ('size=10 onfocus="this.blur()"></td>')
document.write ('<td width=120 align="center" BGCOLOR="CYAN">')
document.write ('<input class="num" name="extprice'+rownum+'"
value="" ')
document.write ('size=10 onfocus = "this.blur()"></td>')
document.write ('</tr>')
}
//--></script>
<tr>
<td width="384" colspan="3" align="right"
BGCOLOR="LIMEGREEN">Subtotal:</td>
<td width="120" align="center" BGCOLOR="LIMEGREEN"><input class="num"
name="subtotal" size="10" onfocus="this.blur()"></td></tr>
<tr><td width="264" colspan="2" BGCOLOR="CYAN"><input type="checkbox"
name="Taxable" value="true" onclick="updateTotals()">Click here if you
live in <script>document.write(TaxableState)</script></td>
<td width="120" align="right" BGCOLOR="LIMEGREEN">Sales Tax:Β*</td>
<td width="120" align="center" BGCOLOR="CYAN"><input class="num"
name="salestax" size="10" onfocus="this.blur()"></td>
</tr>
<tr>
<td width="384" colspan="3" align="right" BGCOLOR="YELLOW">Grand
Total:</td>
<td width="120" align="center" BGCOLOR="#800000"><input class="num"
name="grandtotal" size="10" onfocus="this.blur()"></td></tr></table>
</body>
</html>
Regards,
Mistral
