SIMPLE Javascript Calculator

F

firstcustomer

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.
 
M

mistral

(e-mail address removed) пиÑал(а):
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
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=0}
return this
}

function BuildZeroArray(n) {
this.length = n
for (var i=0;i<=n;i++) {this=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+'.value'
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+'.value=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.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.billName.value

document.ordform.shipCompany.value=document.ordform.billCompany.value
document.ordform.shipAdd1.value=document.ordform.billAdd1.value
document.ordform.shipAdd2.value=document.ordform.billAdd2.value
document.ordform.shipCSZ.value=document.ordform.billCSZ.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=dStr-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 = 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.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
 
R

richardmgreen

This looks a little complexfor my needs. If I only have two drop downs
(A & B), how would I do the following:-
Multiply B by 2
Add on A
add on a constants (C) and then output the result to a small read-only
text-box. It can be changed from read-only if necessary.

Regards

Richard
(e-mail address removed) пиÑал(а):
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
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=0}
return this
}

function BuildZeroArray(n) {
this.length = n
for (var i=0;i<=n;i++) {this=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+'.value'
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+'.value=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.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.billName.value

document.ordform.shipCompany.value=document.ordform.billCompany.value
document.ordform.shipAdd1.value=document.ordform.billAdd1.value
document.ordform.shipAdd2.value=document.ordform.billAdd2.value
document.ordform.shipCSZ.value=document.ordform.billCSZ.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=dStr-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 = 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.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
 
L

Lee

richardmgreen said:
This looks a little complexfor my needs. If I only have two drop downs
(A & B), how would I do the following:-
Multiply B by 2
Add on A
add on a constants (C) and then output the result to a small read-only
text-box. It can be changed from read-only if necessary.

There's no real point in making the total read-only. The user can
still change the value before sending it to you, so you absolutely
must recalculate the total price on the server side.


<html>
<head>
<title>Widget Sales</title>
<script type="text/javascript">

var price = { pr_widget : 5.00,
pr_widgelet : 7.00
};
var someConstant=10;

function updateTotal(f) {
var total=0;
var itemName;
for (item in price) {
if (itemName=item.match(/pr_(.*)/)) {
itemName=itemName[1];
if(f.elements[itemName]) {
total+=f.elements[itemName].selectedIndex*price[item];
}
}
}
if(total>0) {
total+=someConstant;
}
f.total.value=total;
}

</script>
</head>
<body>
<form>
<p>Select the number of each item:</p>
<select name="widget">
<option>No Widgets</option>
<option>One Widget</option>
<option>Two Widget</option>
<option>Three Widget</option>
<option>Four Widget</option>
</select>
<select name="widgelet">
<option>No Widgelets</option>
<option>One Widgelet</option>
<option>Two Widgelet</option>
<option>Three Widgelet</option>
<option>Four Widgelet</option>
</select>
<br>
<input type="button" value="Update Total" onclick="updateTotal(this.form)">
<input name="total">
</form>
</body>
</html>


--
 
D

Dr John Stockton

JRS: In article <[email protected]>
, dated Mon, 10 Jul 2006 05:46:38 remote, seen in
news:comp.lang.javascript said:
...
var RowsInForm = 5 //How many line items will be in the order
form?
var ProductsInList = 10 //How many products in your product list?
...

That will not work, because you have posted incompetently.

Especially for readers such as the OP describes himself as, code as
transmitted must be executable code. You have carelessly allowed your
posting agent to line-wrap, making the code non-executable.

If you cannot control your posting agent, then you must write code in
lines which you know to be sufficiently short.

Read the newsgroup FAQ.

Obviously, you have not understood the question. Not only does the OP
write in British English, but he specifically gives prices in pounds
sterling. Therefore, he is rather unlikely to be interested in Florida
sales tax.

In your code, MakeArray(n) and BuildZeroArray(n) should be a single
function (if both effects are really needed) with a parameter for the
starting point; and the setting of .length the same in each case seems
strange.

Function eval is used where it should not be. Much of your code is
weird, irrelevant, or both.

Read the newsgroup FAQ.


===

Lee's code does not work for me - button gives "Object doesn't support
this action", line 14 char 5. I don't see why - the line is
for (item in price) {
But for (var item in price) { works.



I'd write a first column of drop-downs, and a second of item, and a
third of price; I'd just put numbers in the drop-downs, and use
selectedIndex as a multiplier, as Lee does.

For the controlling data structure, I'd consider
var Data = [
{N:7, S:"Thing1", P:5.00},
{N:9, S:"Thing2", P:7.00} ]
where N is the maximum number of S sellable at price P, with code
writing as many rows of input controls as Data has elements, here 2, and
code populating the drop-downs.
 
R

richardmgreen

Lee

I've just tried your code and got an error on line 16 char 5 - object
doesn't support this property or method.

Also, this is not for emailing anywhere. It will simply be for a web
page so people can work out values before emailing me with other
details.

Regards

Richard
richardmgreen said:
This looks a little complexfor my needs. If I only have two drop downs
(A & B), how would I do the following:-
Multiply B by 2
Add on A
add on a constants (C) and then output the result to a small read-only
text-box. It can be changed from read-only if necessary.

There's no real point in making the total read-only. The user can
still change the value before sending it to you, so you absolutely
must recalculate the total price on the server side.


<html>
<head>
<title>Widget Sales</title>
<script type="text/javascript">

var price = { pr_widget : 5.00,
pr_widgelet : 7.00
};
var someConstant=10;

function updateTotal(f) {
var total=0;
var itemName;
for (item in price) {
if (itemName=item.match(/pr_(.*)/)) {
itemName=itemName[1];
if(f.elements[itemName]) {
total+=f.elements[itemName].selectedIndex*price[item];
}
}
}
if(total>0) {
total+=someConstant;
}
f.total.value=total;
}

</script>
</head>
<body>
<form>
<p>Select the number of each item:</p>
<select name="widget">
<option>No Widgets</option>
<option>One Widget</option>
<option>Two Widget</option>
<option>Three Widget</option>
<option>Four Widget</option>
</select>
<select name="widgelet">
<option>No Widgelets</option>
<option>One Widgelet</option>
<option>Two Widgelet</option>
<option>Three Widgelet</option>
<option>Four Widgelet</option>
</select>
<br>
<input type="button" value="Update Total" onclick="updateTotal(this.form)">
<input name="total">
</form>
</body>
</html>


--
 
R

Richard Cornford

Dr John Stockton wrote:
Lee's code does not work for me - button gives "Object
doesn't support this action", line 14 char 5. I don't
see why - the line is
for (item in price) {
But for (var item in price) { works.
<snip>

Because IE browsers use the window/global object to implement the -
frames - collection the window/global object has an - item - method.
Without declaring - item - as a global variable the Identifier will be
scope resolved as that - item - method of the global/window object and
as a host provided method it is allowed to be read only, so assignments
to - item - may (and clearly do) error.

Perversely, as it is a method, on IE browsers - typeof item - returns
'string'.

Richard.
 
R

richardmgreen

In which case, can someone please tell me why thispiece of code isn't
working:-

<script language="text/javascript">
var someConstant=25;
function updateTotal(photos,videos) {
var total=0;
var photos;
var videos;
totalprice+=(videos*2);
totalprice+=photos;
if(total>0) {
total+=someConstant;
}
document.calculate.totalprice.value=total;
}
}
</script>

and here's the line that calls the procedure (theoretically):-
<input value="Get Price"
onclick="updatetotal(numberofphotos,numberofvideos)" type="button">

I'm trying to do some paramter passing which is probably where I'm
falling over.

All help gratefully recevied.

Richard
 
M

mistral

richardmgreen пиÑал(а):
In which case, can someone please tell me why thispiece of code isn't
working:-

<script language="text/javascript">
var someConstant=25;
function updateTotal(photos,videos) {
var total=0;
var photos;
var videos;
totalprice+=(videos*2);
totalprice+=photos;
if(total>0) {
total+=someConstant;
}
document.calculate.totalprice.value=total;
}
}
and here's the line that calls the procedure (theoretically):-
<input value="Get Price"
onclick="updatetotal(numberofphotos,numberofvideos)" type="button">
I'm trying to do some paramter passing which is probably where I'm
falling over.
All help gratefully recevied.

-------------------------------------------------------------------------

Look at this script instead, simple and convenient - total an Order
Form (a script that totals items using checkboxes and/or select lists).

How to do:
1.Download the script: http://ez-files.net/download.php?file=c4e6799b

2. Include the script. Put the following between the <head></head> tags
in your page.
<script type="text/javascript" src="orderform03.js"></script>

3. Set up to instantiate an OrderForm object when the page loads.
<script type="text/javascript">
//<![CDATA[
window.onload = setupScripts;
function setupScripts()
{
var anOrder1 = new OrderForm();
}
//]]>
</script>

4. Make sure your html matches the naming conventions in the OrderForm
script, or change the values in the script. You need unique ids for the
form, text output, checkboxes, select lists, and the span tags that
wrap the prices. Here is a simple xhtml example with the default name
formats.
<form id="frmOrder">
<p>
<input type="checkbox" id="chk0" />
Wonder Widget
$<span id="txtPrice0">10</span>
<select id="sel0">
<option value="val0">0</option>
<option value="val1">1</option>
<option value="val2">2</option>
<option value="val3">3</option>
</select>
</p>
<p>
<input type="checkbox" id="chk1" />
Snow Widget
$<span id="txtPrice1">20</span>
<select id="sel1">
<option value="val0">0</option>
<option value="val1">1</option>
<option value="val2">2</option>
</select>
</p>
<p>
<input type="text" id="txtTotal" size="8" />
</p>
</form>

5. That's all you should need to get it working. Most changes to the
html (such as removing the checkboxes) shouldn't require changes to the
script. Refer to the Notes below for additional tips.

here is script itself:


function OrderForm(prefix, firstChoice) {

this.prefix = prefix ? prefix : '';

// ****************************
// Configure here
// ****************************
// names - Set these according to how the html ids are set
this.FORM_NAME = this.prefix + 'frmOrder';
this.BTN_TOTAL = this.prefix + 'btnTotal';
this.TXT_OUT = this.prefix + 'txtTotal';

// partial names - Set these according to how the html ids are set
this.CHK = this.prefix + 'chk';
this.SEL = this.prefix + 'sel';
this.PRICE = this.prefix + 'txtPrice';

// if the drop down has the first choice after index 1
// this is used when checking or unchecking a checkbox
this.firstChoice = firstChoice ? firstChoice : 1;
// ****************************

// form
this.frm = document.getElementById(this.FORM_NAME);

// checkboxes
this.chkReg = new RegExp(this.CHK + '([0-9]+)');
this.getCheck = function(chkId) {
return document.getElementById(this.CHK + chkId);
};

// selects
this.selReg = new RegExp(this.SEL + '([0-9]+)');
this.getSelect = function(selId) {
return document.getElementById(this.SEL + selId);
};

// price spans
this.priceReg = new RegExp(this.PRICE + '([0-9]+)');

// text output
this.txtOut = document.getElementById(this.TXT_OUT);

// button
this.btnTotal = document.getElementById(this.BTN_TOTAL);

// price array
this.prices = new Array();

var o = this;
this.getCheckEvent = function() {
return function() {
o.checkRetotal(o, this);
};
};

this.getSelectEvent = function() {
return function() {
o.totalCost(o);
};
};

this.getBtnEvent = function() {
return function() {
o.totalCost(o);
};
};

/*
* Calculate the cost
*
* Required:
* Span tags around the prices with IDs formatted
* so each item's numbers correspond its select elements and input
checkboxes.
*/
this.totalCost = function(orderObj) {
var spanObj = orderObj.frm.getElementsByTagName('span');
var total = 0.0;
for (var i=0; i<spanObj.length; i++) {
var regResult = orderObj.priceReg.exec(spanObj.id);
if (regResult) {
var itemNum = regResult[1];
var chkObj = orderObj.getCheck(itemNum);
var selObj = orderObj.getSelect(itemNum);
var price = orderObj.prices[itemNum];
var quantity = 0;
if (selObj) {
quantity = parseFloat(selObj.options[selObj.selectedIndex].text);
quantity = isNaN(quantity) ? 0 : quantity;
if (chkObj) chkObj.checked = quantity;
} else if (chkObj) {
quantity = chkObj.checked ? 1 : 0;
}
total += quantity * price;
}
}
orderObj.txtOut.value = total;
};

/*
* Handle clicks on the checkboxes
*
* Required:
* The corresponding select elements and input checkboxes need to be
numbered the same
*
*/
this.checkRetotal = function(orderObj, obj) {
var regResult = orderObj.chkReg.exec(obj.id);
if (regResult) {
var optObj = orderObj.getSelect(regResult[1]);
if (optObj) {
if (obj.checked) {
optObj.selectedIndex = orderObj.firstChoice;
} else {
optObj.selectedIndex = 0;
}
}
orderObj.totalCost(orderObj);
}
};

/*
* Set up events
*/
this.setEvents = function(orderObj) {
var spanObj = orderObj.frm.getElementsByTagName('span');
for (var i=0; i<spanObj.length; i++) {
var regResult = orderObj.priceReg.exec(spanObj.id);
if (regResult) {
var itemNum = regResult[1];
var chkObj = orderObj.getCheck(itemNum);
var selObj = orderObj.getSelect(itemNum);
if (chkObj) {
chkObj.onclick = orderObj.getCheckEvent();
}
if (selObj) {
selObj.onchange = orderObj.getSelectEvent();
}
if (orderObj.btnTotal) {
orderObj.btnTotal.onclick = orderObj.getBtnEvent();
}
}
}
};
this.setEvents(this);

/*
*
* Grab the prices from the html
* Required:
* Prices should be wrapped in span tags, numbers only.
*/
this.grabPrices = function(orderObj) {
var spanObj = orderObj.frm.getElementsByTagName('span');
for (var i=0; i<spanObj.length; i++) {
if (orderObj.priceReg.test(spanObj.id)) {
var regResult = orderObj.priceReg.exec(spanObj.id);
if (regResult) {
orderObj.prices[regResult[1]] = parseFloat(spanObj.innerHTML);
}
}
}
};
this.grabPrices(this);

}
 
R

richardmgreen

Unfortunately, this still looks a little complex for my needs. I
forgot to mention I'm a complete newbie at this and just wanted
something to do a simple calulation, i.e. take two inputs from
drop-down menus (both numeric), do some simple maths as outlined above
and return the result.
richardmgreen пиÑал(а):
In which case, can someone please tell me why thispiece of code isn't
working:-

<script language="text/javascript">
var someConstant=25;
function updateTotal(photos,videos) {
var total=0;
var photos;
var videos;
totalprice+=(videos*2);
totalprice+=photos;
if(total>0) {
total+=someConstant;
}
document.calculate.totalprice.value=total;
}
}
and here's the line that calls the procedure (theoretically):-
<input value="Get Price"
onclick="updatetotal(numberofphotos,numberofvideos)" type="button">
I'm trying to do some paramter passing which is probably where I'm
falling over.
All help gratefully recevied.

-------------------------------------------------------------------------

Look at this script instead, simple and convenient - total an Order
Form (a script that totals items using checkboxes and/or select lists).

How to do:
1.Download the script: http://ez-files.net/download.php?file=c4e6799b

2. Include the script. Put the following between the <head></head> tags
in your page.
<script type="text/javascript" src="orderform03.js"></script>

3. Set up to instantiate an OrderForm object when the page loads.
<script type="text/javascript">
//<![CDATA[
window.onload = setupScripts;
function setupScripts()
{
var anOrder1 = new OrderForm();
}
//]]>
</script>

4. Make sure your html matches the naming conventions in the OrderForm
script, or change the values in the script. You need unique ids for the
form, text output, checkboxes, select lists, and the span tags that
wrap the prices. Here is a simple xhtml example with the default name
formats.
<form id="frmOrder">
<p>
<input type="checkbox" id="chk0" />
Wonder Widget
$<span id="txtPrice0">10</span>
<select id="sel0">
<option value="val0">0</option>
<option value="val1">1</option>
<option value="val2">2</option>
<option value="val3">3</option>
</select>
</p>
<p>
<input type="checkbox" id="chk1" />
Snow Widget
$<span id="txtPrice1">20</span>
<select id="sel1">
<option value="val0">0</option>
<option value="val1">1</option>
<option value="val2">2</option>
</select>
</p>
<p>
<input type="text" id="txtTotal" size="8" />
</p>
</form>

5. That's all you should need to get it working. Most changes to the
html (such as removing the checkboxes) shouldn't require changes to the
script. Refer to the Notes below for additional tips.

here is script itself:


function OrderForm(prefix, firstChoice) {

this.prefix = prefix ? prefix : '';

// ****************************
// Configure here
// ****************************
// names - Set these according to how the html ids are set
this.FORM_NAME = this.prefix + 'frmOrder';
this.BTN_TOTAL = this.prefix + 'btnTotal';
this.TXT_OUT = this.prefix + 'txtTotal';

// partial names - Set these according to how the html ids are set
this.CHK = this.prefix + 'chk';
this.SEL = this.prefix + 'sel';
this.PRICE = this.prefix + 'txtPrice';

// if the drop down has the first choice after index 1
// this is used when checking or unchecking a checkbox
this.firstChoice = firstChoice ? firstChoice : 1;
// ****************************

// form
this.frm = document.getElementById(this.FORM_NAME);

// checkboxes
this.chkReg = new RegExp(this.CHK + '([0-9]+)');
this.getCheck = function(chkId) {
return document.getElementById(this.CHK + chkId);
};

// selects
this.selReg = new RegExp(this.SEL + '([0-9]+)');
this.getSelect = function(selId) {
return document.getElementById(this.SEL + selId);
};

// price spans
this.priceReg = new RegExp(this.PRICE + '([0-9]+)');

// text output
this.txtOut = document.getElementById(this.TXT_OUT);

// button
this.btnTotal = document.getElementById(this.BTN_TOTAL);

// price array
this.prices = new Array();

var o = this;
this.getCheckEvent = function() {
return function() {
o.checkRetotal(o, this);
};
};

this.getSelectEvent = function() {
return function() {
o.totalCost(o);
};
};

this.getBtnEvent = function() {
return function() {
o.totalCost(o);
};
};

/*
* Calculate the cost
*
* Required:
* Span tags around the prices with IDs formatted
* so each item's numbers correspond its select elements and input
checkboxes.
*/
this.totalCost = function(orderObj) {
var spanObj = orderObj.frm.getElementsByTagName('span');
var total = 0.0;
for (var i=0; i<spanObj.length; i++) {
var regResult = orderObj.priceReg.exec(spanObj.id);
if (regResult) {
var itemNum = regResult[1];
var chkObj = orderObj.getCheck(itemNum);
var selObj = orderObj.getSelect(itemNum);
var price = orderObj.prices[itemNum];
var quantity = 0;
if (selObj) {
quantity = parseFloat(selObj.options[selObj.selectedIndex].text);
quantity = isNaN(quantity) ? 0 : quantity;
if (chkObj) chkObj.checked = quantity;
} else if (chkObj) {
quantity = chkObj.checked ? 1 : 0;
}
total += quantity * price;
}
}
orderObj.txtOut.value = total;
};

/*
* Handle clicks on the checkboxes
*
* Required:
* The corresponding select elements and input checkboxes need to be
numbered the same
*
*/
this.checkRetotal = function(orderObj, obj) {
var regResult = orderObj.chkReg.exec(obj.id);
if (regResult) {
var optObj = orderObj.getSelect(regResult[1]);
if (optObj) {
if (obj.checked) {
optObj.selectedIndex = orderObj.firstChoice;
} else {
optObj.selectedIndex = 0;
}
}
orderObj.totalCost(orderObj);
}
};

/*
* Set up events
*/
this.setEvents = function(orderObj) {
var spanObj = orderObj.frm.getElementsByTagName('span');
for (var i=0; i<spanObj.length; i++) {
var regResult = orderObj.priceReg.exec(spanObj.id);
if (regResult) {
var itemNum = regResult[1];
var chkObj = orderObj.getCheck(itemNum);
var selObj = orderObj.getSelect(itemNum);
if (chkObj) {
chkObj.onclick = orderObj.getCheckEvent();
}
if (selObj) {
selObj.onchange = orderObj.getSelectEvent();
}
if (orderObj.btnTotal) {
orderObj.btnTotal.onclick = orderObj.getBtnEvent();
}
}
}
};
this.setEvents(this);

/*
*
* Grab the prices from the html
* Required:
* Prices should be wrapped in span tags, numbers only.
*/
this.grabPrices = function(orderObj) {
var spanObj = orderObj.frm.getElementsByTagName('span');
for (var i=0; i<spanObj.length; i++) {
if (orderObj.priceReg.test(spanObj.id)) {
var regResult = orderObj.priceReg.exec(spanObj.id);
if (regResult) {
orderObj.prices[regResult[1]] = parseFloat(spanObj.innerHTML);
}
}
}
};
this.grabPrices(this);

}
 
R

Richard Cornford

richardmgreen said:
In which case, can someone please tell me why thispiece of code
isn't working:-

Whether someone could tell you why your code is 'not working' or not is
only part of your problem. You also have to achieve a situation where
the people who could tell you are willing to try. Presenting your
questions in a normal Usenet post format will help in that direction.
See:-

<URL: http://jibbering.com/faq/ >

Richard Cornford wrote:
<snip>

Richard.
 
M

mistral

richardmgreen пиÑал(а):
Unfortunately, this still looks a little complex for my needs. I
forgot to mention I'm a complete newbie at this and just wanted
something to do a simple calulation, i.e. take two inputs from
drop-down menus (both numeric), do some simple maths as outlined above
and return the result. -----------------------------------
mistral said:
richardmgreen пиÑал(а):
In which case, can someone please tell me why thispiece of code isn't
working:-

<script language="text/javascript">
var someConstant=25;
function updateTotal(photos,videos) {
var total=0;
var photos;
var videos;
totalprice+=(videos*2);
totalprice+=photos;
if(total>0) {
total+=someConstant;
}
document.calculate.totalprice.value=total;
}
}
and here's the line that calls the procedure (theoretically):-
<input value="Get Price"
onclick="updatetotal(numberofphotos,numberofvideos)" type="button">
I'm trying to do some paramter passing which is probably where I'm
falling over.
All help gratefully recevied.

-------------------------------------------------------------------------

Look at this script instead, simple and convenient - total an Order
Form (a script that totals items using checkboxes and/or select lists).

How to do:
1.Download the script: http://ez-files.net/download.php?file=c4e6799b

2. Include the script. Put the following between the <head></head> tags
in your page.
<script type="text/javascript" src="orderform03.js"></script>

3. Set up to instantiate an OrderForm object when the page loads.
<script type="text/javascript">
//<![CDATA[
window.onload = setupScripts;
function setupScripts()
{
var anOrder1 = new OrderForm();
}
//]]>
</script>

4. Make sure your html matches the naming conventions in the OrderForm
script, or change the values in the script. You need unique ids for the
form, text output, checkboxes, select lists, and the span tags that
wrap the prices. Here is a simple xhtml example with the default name
formats.
<form id="frmOrder">
<p>
<input type="checkbox" id="chk0" />
Wonder Widget
$<span id="txtPrice0">10</span>
<select id="sel0">
<option value="val0">0</option>
<option value="val1">1</option>
<option value="val2">2</option>
<option value="val3">3</option>
</select>
</p>
<p>
<input type="checkbox" id="chk1" />
Snow Widget
$<span id="txtPrice1">20</span>
<select id="sel1">
<option value="val0">0</option>
<option value="val1">1</option>
<option value="val2">2</option>
</select>
</p>
<p>
<input type="text" id="txtTotal" size="8" />
</p>
</form>

5. That's all you should need to get it working. Most changes to the
html (such as removing the checkboxes) shouldn't require changes to the
script. Refer to the Notes below for additional tips.

here is script itself:


function OrderForm(prefix, firstChoice) {

this.prefix = prefix ? prefix : '';

// ****************************
// Configure here
// ****************************
// names - Set these according to how the html ids are set
this.FORM_NAME = this.prefix + 'frmOrder';
this.BTN_TOTAL = this.prefix + 'btnTotal';
this.TXT_OUT = this.prefix + 'txtTotal';

// partial names - Set these according to how the html ids are set
this.CHK = this.prefix + 'chk';
this.SEL = this.prefix + 'sel';
this.PRICE = this.prefix + 'txtPrice';

// if the drop down has the first choice after index 1
// this is used when checking or unchecking a checkbox
this.firstChoice = firstChoice ? firstChoice : 1;
// ****************************

// form
this.frm = document.getElementById(this.FORM_NAME);

// checkboxes
this.chkReg = new RegExp(this.CHK + '([0-9]+)');
this.getCheck = function(chkId) {
return document.getElementById(this.CHK + chkId);
};

// selects
this.selReg = new RegExp(this.SEL + '([0-9]+)');
this.getSelect = function(selId) {
return document.getElementById(this.SEL + selId);
};

// price spans
this.priceReg = new RegExp(this.PRICE + '([0-9]+)');

// text output
this.txtOut = document.getElementById(this.TXT_OUT);

// button
this.btnTotal = document.getElementById(this.BTN_TOTAL);

// price array
this.prices = new Array();

var o = this;
this.getCheckEvent = function() {
return function() {
o.checkRetotal(o, this);
};
};

this.getSelectEvent = function() {
return function() {
o.totalCost(o);
};
};

this.getBtnEvent = function() {
return function() {
o.totalCost(o);
};
};

/*
* Calculate the cost
*
* Required:
* Span tags around the prices with IDs formatted
* so each item's numbers correspond its select elements and input
checkboxes.
*/
this.totalCost = function(orderObj) {
var spanObj = orderObj.frm.getElementsByTagName('span');
var total = 0.0;
for (var i=0; i<spanObj.length; i++) {
var regResult = orderObj.priceReg.exec(spanObj.id);
if (regResult) {
var itemNum = regResult[1];
var chkObj = orderObj.getCheck(itemNum);
var selObj = orderObj.getSelect(itemNum);
var price = orderObj.prices[itemNum];
var quantity = 0;
if (selObj) {
quantity = parseFloat(selObj.options[selObj.selectedIndex].text);
quantity = isNaN(quantity) ? 0 : quantity;
if (chkObj) chkObj.checked = quantity;
} else if (chkObj) {
quantity = chkObj.checked ? 1 : 0;
}
total += quantity * price;
}
}
orderObj.txtOut.value = total;
};

/*
* Handle clicks on the checkboxes
*
* Required:
* The corresponding select elements and input checkboxes need to be
numbered the same
*
*/
this.checkRetotal = function(orderObj, obj) {
var regResult = orderObj.chkReg.exec(obj.id);
if (regResult) {
var optObj = orderObj.getSelect(regResult[1]);
if (optObj) {
if (obj.checked) {
optObj.selectedIndex = orderObj.firstChoice;
} else {
optObj.selectedIndex = 0;
}
}
orderObj.totalCost(orderObj);
}
};

/*
* Set up events
*/
this.setEvents = function(orderObj) {
var spanObj = orderObj.frm.getElementsByTagName('span');
for (var i=0; i<spanObj.length; i++) {
var regResult = orderObj.priceReg.exec(spanObj.id);
if (regResult) {
var itemNum = regResult[1];
var chkObj = orderObj.getCheck(itemNum);
var selObj = orderObj.getSelect(itemNum);
if (chkObj) {
chkObj.onclick = orderObj.getCheckEvent();
}
if (selObj) {
selObj.onchange = orderObj.getSelectEvent();
}
if (orderObj.btnTotal) {
orderObj.btnTotal.onclick = orderObj.getBtnEvent();
}
}
}
};
this.setEvents(this);

/*
*
* Grab the prices from the html
* Required:
* Prices should be wrapped in span tags, numbers only.
*/
this.grabPrices = function(orderObj) {
var spanObj = orderObj.frm.getElementsByTagName('span');
for (var i=0; i<spanObj.length; i++) {
if (orderObj.priceReg.test(spanObj.id)) {
var regResult = orderObj.priceReg.exec(spanObj.id);
if (regResult) {
orderObj.prices[regResult[1]] = parseFloat(spanObj.innerHTML);
}
}
}
};
this.grabPrices(this);

}


----------------------------------------------------

Then you can use this simple form:


<CENTER>
<FONT SIZE=+2 FACE="miffed" COLOR="#0000ff">Javascript Sample Order
Form</FONT>

<FORM NAME="msg">
<UL>
<TABLE CELLPADDING=5>
<TR><TH>Description<TH>Price<TH COLSPAN=2>Order ?

<TR><TD><A HREF="http://www.miffed.com/puzzled/">The Puzzled? CD</A><TD
ALIGN=RIGHT>Ј8.00
<TD><INPUT TYPE="radio" NAME="rad1" VALUE="yes" onclick="if (r1 ==
'off') { r1='on'; distotal(800);}">Yes<TD><INPUT TYPE="radio"
NAME="rad1" CHECKED onclick="if (r1 == 'on') {r1='off';
distotal(-800);}"> No
<TR><TD>The Fishy T-Shirt<TD ALIGN=RIGHT>Ј12.00
<TD><INPUT TYPE="radio" NAME="rad2" VALUE="yes" onclick="if (r2 ==
'off') { r2='on'; distotal(1200);}">Yes<TD><INPUT TYPE="radio"
NAME="rad2" CHECKED onclick="if (r2 == 'on') {r2='off';
distotal(-1200);}"> No
<TR><TD>The Computer game<TD ALIGN=RIGHT>Ј35.00
<TD><INPUT TYPE="radio" NAME="rad3" VALUE="yes" onclick="if (r3 ==
'off') { r3='on'; distotal(3500);} ">Yes<TD><INPUT TYPE="radio"
NAME="rad3" CHECKED onclick="if (r3 == 'on') {r3='off';
distotal(-3500);} "> No<BR>
<TR><TD>The Cuddly Toy<TD ALIGN=RIGHT>Ј100.00
<TD><INPUT TYPE="radio" NAME="rad4" VALUE="yes" onclick="if (r4 ==
'off') { r4='on'; distotal(10000) ;} ">Yes<TD><INPUT TYPE="radio"
NAME="rad4" CHECKED onclick="if (r4 == 'on') {r4='off';
distotal(-10000); } "> No<BR>

<TR><TD ALIGN=RIGHT>Sub Total:<TD ALIGN=RIGHT>
<INPUT ALIGN=RIGHT type="text" NAME="sub" VALUE="" SIZE=7
onFocus="this.blur()" ></TD>

<TR><TD ALIGN=RIGHT>+ VAT (17.5% Tax):<TD ALIGN=RIGHT>
<INPUT ALIGN=RIGHT type="text" NAME="vat" VALUE="" SIZE=7
onFocus="this.blur()" ></TD>
<TR><TD ALIGN=RIGHT COLSPAN=2>
<FONT SIZE=+2><B>Total: Ј </B></FONT>
<INPUT ALIGN=RIGHT type="text" NAME="tot" VALUE="" SIZE=7
onFocus="this.blur()" ></TD></TABLE>
</UL>

</FORM>

</CENTER>


Rgrds
Mistral
 
R

richardmgreen

Just tried that and I get an error stating r1 not defined.

Regards

Richard
richardmgreen пиÑал(а):
Unfortunately, this still looks a little complex for my needs. I
forgot to mention I'm a complete newbie at this and just wanted
something to do a simple calulation, i.e. take two inputs from
drop-down menus (both numeric), do some simple maths as outlined above
and return the result. -----------------------------------
mistral said:
richardmgreen пиÑал(а):

In which case, can someone please tell me why thispiece of code isn't
working:-

<script language="text/javascript">
var someConstant=25;
function updateTotal(photos,videos) {
var total=0;
var photos;
var videos;
totalprice+=(videos*2);
totalprice+=photos;
if(total>0) {
total+=someConstant;
}
document.calculate.totalprice.value=total;
}
}
</script>

and here's the line that calls the procedure (theoretically):-
<input value="Get Price"
onclick="updatetotal(numberofphotos,numberofvideos)" type="button">

I'm trying to do some paramter passing which is probably where I'm
falling over.

All help gratefully recevied.

Richard

-------------------------------------------------------------------------

Look at this script instead, simple and convenient - total an Order
Form (a script that totals items using checkboxes and/or select lists).

How to do:
1.Download the script: http://ez-files.net/download.php?file=c4e6799b

2. Include the script. Put the following between the <head></head> tags
in your page.
<script type="text/javascript" src="orderform03.js"></script>

3. Set up to instantiate an OrderForm object when the page loads.
<script type="text/javascript">
//<![CDATA[
window.onload = setupScripts;
function setupScripts()
{
var anOrder1 = new OrderForm();
}
//]]>
</script>

4. Make sure your html matches the naming conventions in the OrderForm
script, or change the values in the script. You need unique ids for the
form, text output, checkboxes, select lists, and the span tags that
wrap the prices. Here is a simple xhtml example with the default name
formats.
<form id="frmOrder">
<p>
<input type="checkbox" id="chk0" />
Wonder Widget
$<span id="txtPrice0">10</span>
<select id="sel0">
<option value="val0">0</option>
<option value="val1">1</option>
<option value="val2">2</option>
<option value="val3">3</option>
</select>
</p>
<p>
<input type="checkbox" id="chk1" />
Snow Widget
$<span id="txtPrice1">20</span>
<select id="sel1">
<option value="val0">0</option>
<option value="val1">1</option>
<option value="val2">2</option>
</select>
</p>
<p>
<input type="text" id="txtTotal" size="8" />
</p>
</form>

5. That's all you should need to get it working. Most changes to the
html (such as removing the checkboxes) shouldn't require changes to the
script. Refer to the Notes below for additional tips.

here is script itself:


function OrderForm(prefix, firstChoice) {

this.prefix = prefix ? prefix : '';

// ****************************
// Configure here
// ****************************
// names - Set these according to how the html ids are set
this.FORM_NAME = this.prefix + 'frmOrder';
this.BTN_TOTAL = this.prefix + 'btnTotal';
this.TXT_OUT = this.prefix + 'txtTotal';

// partial names - Set these according to how the html ids are set
this.CHK = this.prefix + 'chk';
this.SEL = this.prefix + 'sel';
this.PRICE = this.prefix + 'txtPrice';

// if the drop down has the first choice after index 1
// this is used when checking or unchecking a checkbox
this.firstChoice = firstChoice ? firstChoice : 1;
// ****************************

// form
this.frm = document.getElementById(this.FORM_NAME);

// checkboxes
this.chkReg = new RegExp(this.CHK + '([0-9]+)');
this.getCheck = function(chkId) {
return document.getElementById(this.CHK + chkId);
};

// selects
this.selReg = new RegExp(this.SEL + '([0-9]+)');
this.getSelect = function(selId) {
return document.getElementById(this.SEL + selId);
};

// price spans
this.priceReg = new RegExp(this.PRICE + '([0-9]+)');

// text output
this.txtOut = document.getElementById(this.TXT_OUT);

// button
this.btnTotal = document.getElementById(this.BTN_TOTAL);

// price array
this.prices = new Array();

var o = this;
this.getCheckEvent = function() {
return function() {
o.checkRetotal(o, this);
};
};

this.getSelectEvent = function() {
return function() {
o.totalCost(o);
};
};

this.getBtnEvent = function() {
return function() {
o.totalCost(o);
};
};

/*
* Calculate the cost
*
* Required:
* Span tags around the prices with IDs formatted
* so each item's numbers correspond its select elements and input
checkboxes.
*/
this.totalCost = function(orderObj) {
var spanObj = orderObj.frm.getElementsByTagName('span');
var total = 0.0;
for (var i=0; i<spanObj.length; i++) {
var regResult = orderObj.priceReg.exec(spanObj.id);
if (regResult) {
var itemNum = regResult[1];
var chkObj = orderObj.getCheck(itemNum);
var selObj = orderObj.getSelect(itemNum);
var price = orderObj.prices[itemNum];
var quantity = 0;
if (selObj) {
quantity = parseFloat(selObj.options[selObj.selectedIndex].text);
quantity = isNaN(quantity) ? 0 : quantity;
if (chkObj) chkObj.checked = quantity;
} else if (chkObj) {
quantity = chkObj.checked ? 1 : 0;
}
total += quantity * price;
}
}
orderObj.txtOut.value = total;
};

/*
* Handle clicks on the checkboxes
*
* Required:
* The corresponding select elements and input checkboxes need to be
numbered the same
*
*/
this.checkRetotal = function(orderObj, obj) {
var regResult = orderObj.chkReg.exec(obj.id);
if (regResult) {
var optObj = orderObj.getSelect(regResult[1]);
if (optObj) {
if (obj.checked) {
optObj.selectedIndex = orderObj.firstChoice;
} else {
optObj.selectedIndex = 0;
}
}
orderObj.totalCost(orderObj);
}
};

/*
* Set up events
*/
this.setEvents = function(orderObj) {
var spanObj = orderObj.frm.getElementsByTagName('span');
for (var i=0; i<spanObj.length; i++) {
var regResult = orderObj.priceReg.exec(spanObj.id);
if (regResult) {
var itemNum = regResult[1];
var chkObj = orderObj.getCheck(itemNum);
var selObj = orderObj.getSelect(itemNum);
if (chkObj) {
chkObj.onclick = orderObj.getCheckEvent();
}
if (selObj) {
selObj.onchange = orderObj.getSelectEvent();
}
if (orderObj.btnTotal) {
orderObj.btnTotal.onclick = orderObj.getBtnEvent();
}
}
}
};
this.setEvents(this);

/*
*
* Grab the prices from the html
* Required:
* Prices should be wrapped in span tags, numbers only.
*/
this.grabPrices = function(orderObj) {
var spanObj = orderObj.frm.getElementsByTagName('span');
for (var i=0; i<spanObj.length; i++) {
if (orderObj.priceReg.test(spanObj.id)) {
var regResult = orderObj.priceReg.exec(spanObj.id);
if (regResult) {
orderObj.prices[regResult[1]] = parseFloat(spanObj.innerHTML);
}
}
}
};
this.grabPrices(this);

}


----------------------------------------------------

Then you can use this simple form:


<CENTER>
<FONT SIZE=+2 FACE="miffed" COLOR="#0000ff">Javascript Sample Order
Form</FONT>

<FORM NAME="msg">
<UL>
<TABLE CELLPADDING=5>
<TR><TH>Description<TH>Price<TH COLSPAN=2>Order ?

<TR><TD><A HREF="http://www.miffed.com/puzzled/">The Puzzled? CD</A><TD
ALIGN=RIGHT>Ј8.00
<TD><INPUT TYPE="radio" NAME="rad1" VALUE="yes" onclick="if (r1 ==
'off') { r1='on'; distotal(800);}">Yes<TD><INPUT TYPE="radio"
NAME="rad1" CHECKED onclick="if (r1 == 'on') {r1='off';
distotal(-800);}"> No
<TR><TD>The Fishy T-Shirt<TD ALIGN=RIGHT>Ј12.00
<TD><INPUT TYPE="radio" NAME="rad2" VALUE="yes" onclick="if (r2 ==
'off') { r2='on'; distotal(1200);}">Yes<TD><INPUT TYPE="radio"
NAME="rad2" CHECKED onclick="if (r2 == 'on') {r2='off';
distotal(-1200);}"> No
<TR><TD>The Computer game<TD ALIGN=RIGHT>Ј35.00
<TD><INPUT TYPE="radio" NAME="rad3" VALUE="yes" onclick="if (r3 ==
'off') { r3='on'; distotal(3500);} ">Yes<TD><INPUT TYPE="radio"
NAME="rad3" CHECKED onclick="if (r3 == 'on') {r3='off';
distotal(-3500);} "> No<BR>
<TR><TD>The Cuddly Toy<TD ALIGN=RIGHT>Ј100.00
<TD><INPUT TYPE="radio" NAME="rad4" VALUE="yes" onclick="if (r4 ==
'off') { r4='on'; distotal(10000) ;} ">Yes<TD><INPUT TYPE="radio"
NAME="rad4" CHECKED onclick="if (r4 == 'on') {r4='off';
distotal(-10000); } "> No<BR>

<TR><TD ALIGN=RIGHT>Sub Total:<TD ALIGN=RIGHT>
<INPUT ALIGN=RIGHT type="text" NAME="sub" VALUE="" SIZE=7
onFocus="this.blur()" ></TD>

<TR><TD ALIGN=RIGHT>+ VAT (17.5% Tax):<TD ALIGN=RIGHT>
<INPUT ALIGN=RIGHT type="text" NAME="vat" VALUE="" SIZE=7
onFocus="this.blur()" ></TD>
<TR><TD ALIGN=RIGHT COLSPAN=2>
<FONT SIZE=+2><B>Total: Ј </B></FONT>
<INPUT ALIGN=RIGHT type="text" NAME="tot" VALUE="" SIZE=7
onFocus="this.blur()" ></TD></TABLE>
</UL>

</FORM>

</CENTER>


Rgrds
Mistral
 
M

mistral

richardmgreen пиÑал(а):
Just tried that and I get an error stating r1 not defined.

Richard
richardmgreen пиÑал(а):
Unfortunately, this still looks a little complex for my needs. I
forgot to mention I'm a complete newbie at this and just wanted
something to do a simple calulation, i.e. take two inputs from
drop-down menus (both numeric), do some simple maths as outlined above
and return the result.
-----------------------------------
mistral said:
richardmgreen пиÑал(а):
In which case, can someone please tell me why thispiece of code isn't

<script language="text/javascript">
var someConstant=25;
function updateTotal(photos,videos) {
var total=0;
var photos;
var videos;
totalprice+=(videos*2);
totalprice+=photos;
if(total>0) {
total+=someConstant;
}
document.calculate.totalprice.value=total;
}
}
</script>
and here's the line that calls the procedure (theoretically):- <input value="Get Price"
onclick="updatetotal(numberofphotos,numberofvideos)" type="button">
I'm trying to do some paramter passing which is probably where I'm
falling over.
All help gratefully recevied.

Richard
-------------------------------------------------------------------------

Look at this script instead, simple and convenient - total an Order
Form (a script that totals items using checkboxes and/or select lists).

How to do:
1.Download the script: http://ez-files.net/download.php?file=c4e6799b

2. Include the script. Put the following between the <head></head> tags
in your page.
<script type="text/javascript" src="orderform03.js"></script>

3. Set up to instantiate an OrderForm object when the page loads.
<script type="text/javascript">
//<![CDATA[
window.onload = setupScripts;
function setupScripts()
{
var anOrder1 = new OrderForm();
}
//]]>
</script>

4. Make sure your html matches the naming conventions in the OrderForm
script, or change the values in the script. You need unique ids forthe
form, text output, checkboxes, select lists, and the span tags that
wrap the prices. Here is a simple xhtml example with the default name
formats.
<form id="frmOrder">
<p>
<input type="checkbox" id="chk0" />
Wonder Widget
$<span id="txtPrice0">10</span>
<select id="sel0">
<option value="val0">0</option>
<option value="val1">1</option>
<option value="val2">2</option>
<option value="val3">3</option>
</select>
</p>
<p>
<input type="checkbox" id="chk1" />
Snow Widget
$<span id="txtPrice1">20</span>
<select id="sel1">
<option value="val0">0</option>
<option value="val1">1</option>
<option value="val2">2</option>
</select>
</p>
<p>
<input type="text" id="txtTotal" size="8" />
</p>
</form>

5. That's all you should need to get it working. Most changes to the
html (such as removing the checkboxes) shouldn't require changes tothe
script. Refer to the Notes below for additional tips.

here is script itself:


function OrderForm(prefix, firstChoice) {

this.prefix = prefix ? prefix : '';

// ****************************
// Configure here
// ****************************
// names - Set these according to how the html ids are set
this.FORM_NAME = this.prefix + 'frmOrder';
this.BTN_TOTAL = this.prefix + 'btnTotal';
this.TXT_OUT = this.prefix + 'txtTotal';

// partial names - Set these according to how the html ids are set
this.CHK = this.prefix + 'chk';
this.SEL = this.prefix + 'sel';
this.PRICE = this.prefix + 'txtPrice';

// if the drop down has the first choice after index 1
// this is used when checking or unchecking a checkbox
this.firstChoice = firstChoice ? firstChoice : 1;
// ****************************

// form
this.frm = document.getElementById(this.FORM_NAME);

// checkboxes
this.chkReg = new RegExp(this.CHK + '([0-9]+)');
this.getCheck = function(chkId) {
return document.getElementById(this.CHK + chkId);
};

// selects
this.selReg = new RegExp(this.SEL + '([0-9]+)');
this.getSelect = function(selId) {
return document.getElementById(this.SEL + selId);
};

// price spans
this.priceReg = new RegExp(this.PRICE + '([0-9]+)');

// text output
this.txtOut = document.getElementById(this.TXT_OUT);

// button
this.btnTotal = document.getElementById(this.BTN_TOTAL);

// price array
this.prices = new Array();

var o = this;
this.getCheckEvent = function() {
return function() {
o.checkRetotal(o, this);
};
};

this.getSelectEvent = function() {
return function() {
o.totalCost(o);
};
};

this.getBtnEvent = function() {
return function() {
o.totalCost(o);
};
};

/*
* Calculate the cost
*
* Required:
* Span tags around the prices with IDs formatted
* so each item's numbers correspond its select elements and input
checkboxes.
*/
this.totalCost = function(orderObj) {
var spanObj = orderObj.frm.getElementsByTagName('span');
var total = 0.0;
for (var i=0; i<spanObj.length; i++) {
var regResult = orderObj.priceReg.exec(spanObj.id);
if (regResult) {
var itemNum = regResult[1];
var chkObj = orderObj.getCheck(itemNum);
var selObj = orderObj.getSelect(itemNum);
var price = orderObj.prices[itemNum];
var quantity = 0;
if (selObj) {
quantity = parseFloat(selObj.options[selObj.selectedIndex].text);
quantity = isNaN(quantity) ? 0 : quantity;
if (chkObj) chkObj.checked = quantity;
} else if (chkObj) {
quantity = chkObj.checked ? 1 : 0;
}
total += quantity * price;
}
}
orderObj.txtOut.value = total;
};

/*
* Handle clicks on the checkboxes
*
* Required:
* The corresponding select elements and input checkboxes need tobe
numbered the same
*
*/
this.checkRetotal = function(orderObj, obj) {
var regResult = orderObj.chkReg.exec(obj.id);
if (regResult) {
var optObj = orderObj.getSelect(regResult[1]);
if (optObj) {
if (obj.checked) {
optObj.selectedIndex = orderObj.firstChoice;
} else {
optObj.selectedIndex = 0;
}
}
orderObj.totalCost(orderObj);
}
};

/*
* Set up events
*/
this.setEvents = function(orderObj) {
var spanObj = orderObj.frm.getElementsByTagName('span');
for (var i=0; i<spanObj.length; i++) {
var regResult = orderObj.priceReg.exec(spanObj.id);
if (regResult) {
var itemNum = regResult[1];
var chkObj = orderObj.getCheck(itemNum);
var selObj = orderObj.getSelect(itemNum);
if (chkObj) {
chkObj.onclick = orderObj.getCheckEvent();
}
if (selObj) {
selObj.onchange = orderObj.getSelectEvent();
}
if (orderObj.btnTotal) {
orderObj.btnTotal.onclick = orderObj.getBtnEvent();
}
}
}
};
this.setEvents(this);

/*
*
* Grab the prices from the html
* Required:
* Prices should be wrapped in span tags, numbers only.
*/
this.grabPrices = function(orderObj) {
var spanObj = orderObj.frm.getElementsByTagName('span');
for (var i=0; i<spanObj.length; i++) {
if (orderObj.priceReg.test(spanObj.id)) {
var regResult = orderObj.priceReg.exec(spanObj.id);
if (regResult) {
orderObj.prices[regResult[1]] = parseFloat(spanObj.innerHTML);
}
}
}
};
this.grabPrices(this);

}


----------------------------------------------------

Then you can use this simple form:


<CENTER>
<FONT SIZE=+2 FACE="miffed" COLOR="#0000ff">Javascript Sample Order
Form</FONT>

<FORM NAME="msg">
<UL>
<TABLE CELLPADDING=5>
<TR><TH>Description<TH>Price<TH COLSPAN=2>Order ?

<TR><TD><A HREF="http://www.miffed.com/puzzled/">The Puzzled? CD</A><TD
ALIGN=RIGHT>Ј8.00
<TD><INPUT TYPE="radio" NAME="rad1" VALUE="yes" onclick="if (r1==
'off') { r1='on'; distotal(800);}">Yes<TD><INPUT TYPE="radio"
NAME="rad1" CHECKED onclick="if (r1 == 'on') {r1='off';
distotal(-800);}"> No
<TR><TD>The Fishy T-Shirt<TD ALIGN=RIGHT>Ј12.00
<TD><INPUT TYPE="radio" NAME="rad2" VALUE="yes" onclick="if (r2==
'off') { r2='on'; distotal(1200);}">Yes<TD><INPUT TYPE="radio"
NAME="rad2" CHECKED onclick="if (r2 == 'on') {r2='off';
distotal(-1200);}"> No
<TR><TD>The Computer game<TD ALIGN=RIGHT>Ј35.00
<TD><INPUT TYPE="radio" NAME="rad3" VALUE="yes" onclick="if (r3==
'off') { r3='on'; distotal(3500);} ">Yes<TD><INPUT TYPE="radio"
NAME="rad3" CHECKED onclick="if (r3 == 'on') {r3='off';
distotal(-3500);} "> No<BR>
<TR><TD>The Cuddly Toy<TD ALIGN=RIGHT>Ј100.00
<TD><INPUT TYPE="radio" NAME="rad4" VALUE="yes" onclick="if (r4==
'off') { r4='on'; distotal(10000) ;} ">Yes<TD><INPUT TYPE="radio"
NAME="rad4" CHECKED onclick="if (r4 == 'on') {r4='off';
distotal(-10000); } "> No<BR>

<TR><TD ALIGN=RIGHT>Sub Total:<TD ALIGN=RIGHT>
<INPUT ALIGN=RIGHT type="text" NAME="sub" VALUE="" SIZE=7
onFocus="this.blur()" ></TD>

<TR><TD ALIGN=RIGHT>+ VAT (17.5% Tax):<TD ALIGN=RIGHT>
<INPUT ALIGN=RIGHT type="text" NAME="vat" VALUE="" SIZE=7
onFocus="this.blur()" ></TD>
<TR><TD ALIGN=RIGHT COLSPAN=2>
<FONT SIZE=+2><B>Total: Ј </B></FONT>
<INPUT ALIGN=RIGHT type="text" NAME="tot" VALUE="" SIZE=7
onFocus="this.blur()" ></TD></TABLE>
</UL>

</FORM>

</CENTER>


Rgrds
Mistral


--------------------

sorry, one script part was missed, here you go:

<code>
<HTML>
<HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!-- Beginning of JavaScript Applet -------------------

var sub =0;
var total=0;
var vat=0;
var r1="off";
var r2="off";
var r3="off";
var r4="off";

function distotal(am)
{

total=total+am;
sub=total;
vat=Math.round(sub*0.175);

document.msg.sub.value="Ј"+AddDecimal(sub);
document.msg.vat.value="Ј"+AddDecimal(vat);
document.msg.tot.value=AddDecimal(total+vat);

}

function AddDecimal(number) {
var withdecimal = "";
var num = "" + number;
if (num.length == 0) { withdecimal += "0";
} else if (num.length == 1) { withdecimal += "0.0" + num;
} else if (num.length == 2) { withdecimal += "0." + num;
} else {
withdecimal += num.substring(0, num.length - 2);
withdecimal += "."
withdecimal += num.substring(num.length - 2, num.length);
}
return withdecimal;
}

// -- End of JavaScript code -------------- -->

</SCRIPT>

<TITLE>JavaScript Order Form</TITLE>
</HEAD>


<BODY BGCOLOR="#ffffff" LINK="#0000ff" VLINK="#ff0000">

<CENTER>

<BR><FONT SIZE=+2 FACE="miffed" COLOR="#0000ff">Javascript Sample Order
Form</FONT>

<FORM NAME="msg">
<UL>
<TABLE CELLPADDING=5>
<TR><TH>Description<TH>Price<TH COLSPAN=2>Order ?

<TR><TD><A HREF="http://www.miffed.com/puzzled/">The Puzzled? CD</A><TD
ALIGN=RIGHT>Ј8.00
<TD><INPUT TYPE="radio" NAME="rad1" VALUE="yes" onclick="if (r1 ==
'off') { r1='on'; distotal(800);}">Yes<TD><INPUT TYPE="radio"
NAME="rad1" CHECKED onclick="if (r1 == 'on') {r1='off';
distotal(-800);}"> No
<TR><TD>The Fishy T-Shirt<TD ALIGN=RIGHT>Ј12.00
<TD><INPUT TYPE="radio" NAME="rad2" VALUE="yes" onclick="if (r2 ==
'off') { r2='on'; distotal(1200);}">Yes<TD><INPUT TYPE="radio"
NAME="rad2" CHECKED onclick="if (r2 == 'on') {r2='off';
distotal(-1200);}"> No
<TR><TD>The Computer game<TD ALIGN=RIGHT>Ј35.00
<TD><INPUT TYPE="radio" NAME="rad3" VALUE="yes" onclick="if (r3 ==
'off') { r3='on'; distotal(3500);} ">Yes<TD><INPUT TYPE="radio"
NAME="rad3" CHECKED onclick="if (r3 == 'on') {r3='off';
distotal(-3500);} "> No<BR>
<TR><TD>The Cuddly Toy<TD ALIGN=RIGHT>Ј100.00
<TD><INPUT TYPE="radio" NAME="rad4" VALUE="yes" onclick="if (r4 ==
'off') { r4='on'; distotal(10000) ;} ">Yes<TD><INPUT TYPE="radio"
NAME="rad4" CHECKED onclick="if (r4 == 'on') {r4='off';
distotal(-10000); } "> No<BR>

<TR><TD ALIGN=RIGHT>Sub Total:<TD ALIGN=RIGHT>
<INPUT ALIGN=RIGHT type="text" NAME="sub" VALUE="" SIZE=7
onFocus="this.blur()" ></TD>

<TR><TD ALIGN=RIGHT>+ VAT (17.5% Tax):<TD ALIGN=RIGHT>
<INPUT ALIGN=RIGHT type="text" NAME="vat" VALUE="" SIZE=7
onFocus="this.blur()" ></TD>
<TR><TD ALIGN=RIGHT COLSPAN=2>
<FONT SIZE=+2><B>Total: Ј </B></FONT>
<INPUT ALIGN=RIGHT type="text" NAME="tot" VALUE="" SIZE=7
onFocus="this.blur()" ></TD></TABLE>
</UL>

</FORM>

</CENTER>

</BODY>
</HTML>
</code>

Mistral
 
R

richardmgreen

I don't know how much simpler I can make this. This is not the format
I need. It's a basic website, so I want to keep things simple. Select
one value each from two drop-down menus, do some fairly basic maths and
show the result. I don't need check boxes or radio buttons or anything
fancy like a separate line for VAT. I'm simply trying to get a very
basic calculator to work.

Richard
richardmgreen пиÑал(а):
Just tried that and I get an error stating r1 not defined.

Richard
richardmgreen пиÑал(а):
Unfortunately, this still looks a little complex for my needs. I
forgot to mention I'm a complete newbie at this and just wanted
something to do a simple calulation, i.e. take two inputs from
drop-down menus (both numeric), do some simple maths as outlined above
and return the result.
-----------------------------------
mistral said:
richardmgreen пиÑал(а):
In which case, can someone please tell me why thispiece of code isn't

<script language="text/javascript">
var someConstant=25;
function updateTotal(photos,videos) {
var total=0;
var photos;
var videos;
totalprice+=(videos*2);
totalprice+=photos;
if(total>0) {
total+=someConstant;
}
document.calculate.totalprice.value=total;
}
}
</script>
and here's the line that calls the procedure (theoretically):- <input value="Get Price"
onclick="updatetotal(numberofphotos,numberofvideos)" type="button">
I'm trying to do some paramter passing which is probably where I'm
falling over.
All help gratefully recevied.

Richard
-------------------------------------------------------------------------

Look at this script instead, simple and convenient - total an Order
Form (a script that totals items using checkboxes and/or select lists).

How to do:
1.Download the script: http://ez-files.net/download.php?file=c4e6799b

2. Include the script. Put the following between the <head></head> tags
in your page.
<script type="text/javascript" src="orderform03.js"></script>

3. Set up to instantiate an OrderForm object when the page loads.
<script type="text/javascript">
//<![CDATA[
window.onload = setupScripts;
function setupScripts()
{
var anOrder1 = new OrderForm();
}
//]]>
</script>

4. Make sure your html matches the naming conventions in the OrderForm
script, or change the values in the script. You need unique ids for the
form, text output, checkboxes, select lists, and the span tags that
wrap the prices. Here is a simple xhtml example with the default name
formats.
<form id="frmOrder">
<p>
<input type="checkbox" id="chk0" />
Wonder Widget
$<span id="txtPrice0">10</span>
<select id="sel0">
<option value="val0">0</option>
<option value="val1">1</option>
<option value="val2">2</option>
<option value="val3">3</option>
</select>
</p>
<p>
<input type="checkbox" id="chk1" />
Snow Widget
$<span id="txtPrice1">20</span>
<select id="sel1">
<option value="val0">0</option>
<option value="val1">1</option>
<option value="val2">2</option>
</select>
</p>
<p>
<input type="text" id="txtTotal" size="8" />
</p>
</form>

5. That's all you should need to get it working. Most changes to the
html (such as removing the checkboxes) shouldn't require changes to the
script. Refer to the Notes below for additional tips.

here is script itself:


function OrderForm(prefix, firstChoice) {

this.prefix = prefix ? prefix : '';

// ****************************
// Configure here
// ****************************
// names - Set these according to how the html ids are set
this.FORM_NAME = this.prefix + 'frmOrder';
this.BTN_TOTAL = this.prefix + 'btnTotal';
this.TXT_OUT = this.prefix + 'txtTotal';

// partial names - Set these according to how the html ids are set
this.CHK = this.prefix + 'chk';
this.SEL = this.prefix + 'sel';
this.PRICE = this.prefix + 'txtPrice';

// if the drop down has the first choice after index 1
// this is used when checking or unchecking a checkbox
this.firstChoice = firstChoice ? firstChoice : 1;
// ****************************

// form
this.frm = document.getElementById(this.FORM_NAME);

// checkboxes
this.chkReg = new RegExp(this.CHK + '([0-9]+)');
this.getCheck = function(chkId) {
return document.getElementById(this.CHK + chkId);
};

// selects
this.selReg = new RegExp(this.SEL + '([0-9]+)');
this.getSelect = function(selId) {
return document.getElementById(this.SEL + selId);
};

// price spans
this.priceReg = new RegExp(this.PRICE + '([0-9]+)');

// text output
this.txtOut = document.getElementById(this.TXT_OUT);

// button
this.btnTotal = document.getElementById(this.BTN_TOTAL);

// price array
this.prices = new Array();

var o = this;
this.getCheckEvent = function() {
return function() {
o.checkRetotal(o, this);
};
};

this.getSelectEvent = function() {
return function() {
o.totalCost(o);
};
};

this.getBtnEvent = function() {
return function() {
o.totalCost(o);
};
};

/*
* Calculate the cost
*
* Required:
* Span tags around the prices with IDs formatted
* so each item's numbers correspond its select elements and input
checkboxes.
*/
this.totalCost = function(orderObj) {
var spanObj = orderObj.frm.getElementsByTagName('span');
var total = 0.0;
for (var i=0; i<spanObj.length; i++) {
var regResult = orderObj.priceReg.exec(spanObj.id);
if (regResult) {
var itemNum = regResult[1];
var chkObj = orderObj.getCheck(itemNum);
var selObj = orderObj.getSelect(itemNum);
var price = orderObj.prices[itemNum];
var quantity = 0;
if (selObj) {
quantity = parseFloat(selObj.options[selObj.selectedIndex]..text);
quantity = isNaN(quantity) ? 0 : quantity;
if (chkObj) chkObj.checked = quantity;
} else if (chkObj) {
quantity = chkObj.checked ? 1 : 0;
}
total += quantity * price;
}
}
orderObj.txtOut.value = total;
};

/*
* Handle clicks on the checkboxes
*
* Required:
* The corresponding select elements and input checkboxes need to be
numbered the same
*
*/
this.checkRetotal = function(orderObj, obj) {
var regResult = orderObj.chkReg.exec(obj.id);
if (regResult) {
var optObj = orderObj.getSelect(regResult[1]);
if (optObj) {
if (obj.checked) {
optObj.selectedIndex = orderObj.firstChoice;
} else {
optObj.selectedIndex = 0;
}
}
orderObj.totalCost(orderObj);
}
};

/*
* Set up events
*/
this.setEvents = function(orderObj) {
var spanObj = orderObj.frm.getElementsByTagName('span');
for (var i=0; i<spanObj.length; i++) {
var regResult = orderObj.priceReg.exec(spanObj.id);
if (regResult) {
var itemNum = regResult[1];
var chkObj = orderObj.getCheck(itemNum);
var selObj = orderObj.getSelect(itemNum);
if (chkObj) {
chkObj.onclick = orderObj.getCheckEvent();
}
if (selObj) {
selObj.onchange = orderObj.getSelectEvent();
}
if (orderObj.btnTotal) {
orderObj.btnTotal.onclick = orderObj.getBtnEvent();
}
}
}
};
this.setEvents(this);

/*
*
* Grab the prices from the html
* Required:
* Prices should be wrapped in span tags, numbers only.
*/
this.grabPrices = function(orderObj) {
var spanObj = orderObj.frm.getElementsByTagName('span');
for (var i=0; i<spanObj.length; i++) {
if (orderObj.priceReg.test(spanObj.id)) {
var regResult = orderObj.priceReg.exec(spanObj.id);
if (regResult) {
orderObj.prices[regResult[1]] = parseFloat(spanObj.innerHTML);
}
}
}
};
this.grabPrices(this);

}

----------------------------------------------------

Then you can use this simple form:


<CENTER>
<FONT SIZE=+2 FACE="miffed" COLOR="#0000ff">Javascript Sample Order
Form</FONT>

<FORM NAME="msg">
<UL>
<TABLE CELLPADDING=5>
<TR><TH>Description<TH>Price<TH COLSPAN=2>Order ?

<TR><TD><A HREF="http://www.miffed.com/puzzled/">The Puzzled? CD</A><TD
ALIGN=RIGHT>Ј8.00
<TD><INPUT TYPE="radio" NAME="rad1" VALUE="yes" onclick="if (r1 ==
'off') { r1='on'; distotal(800);}">Yes<TD><INPUT TYPE="radio"
NAME="rad1" CHECKED onclick="if (r1 == 'on') {r1='off';
distotal(-800);}"> No
<TR><TD>The Fishy T-Shirt<TD ALIGN=RIGHT>Ј12.00
<TD><INPUT TYPE="radio" NAME="rad2" VALUE="yes" onclick="if (r2 ==
'off') { r2='on'; distotal(1200);}">Yes<TD><INPUT TYPE="radio"
NAME="rad2" CHECKED onclick="if (r2 == 'on') {r2='off';
distotal(-1200);}"> No
<TR><TD>The Computer game<TD ALIGN=RIGHT>Ј35.00
<TD><INPUT TYPE="radio" NAME="rad3" VALUE="yes" onclick="if (r3 ==
'off') { r3='on'; distotal(3500);} ">Yes<TD><INPUT TYPE="radio"
NAME="rad3" CHECKED onclick="if (r3 == 'on') {r3='off';
distotal(-3500);} "> No<BR>
<TR><TD>The Cuddly Toy<TD ALIGN=RIGHT>Ј100.00
<TD><INPUT TYPE="radio" NAME="rad4" VALUE="yes" onclick="if (r4 ==
'off') { r4='on'; distotal(10000) ;} ">Yes<TD><INPUT TYPE="radio"
NAME="rad4" CHECKED onclick="if (r4 == 'on') {r4='off';
distotal(-10000); } "> No<BR>

<TR><TD ALIGN=RIGHT>Sub Total:<TD ALIGN=RIGHT>
<INPUT ALIGN=RIGHT type="text" NAME="sub" VALUE="" SIZE=7
onFocus="this.blur()" ></TD>

<TR><TD ALIGN=RIGHT>+ VAT (17.5% Tax):<TD ALIGN=RIGHT>
<INPUT ALIGN=RIGHT type="text" NAME="vat" VALUE="" SIZE=7
onFocus="this.blur()" ></TD>
<TR><TD ALIGN=RIGHT COLSPAN=2>
<FONT SIZE=+2><B>Total: Ј </B></FONT>
<INPUT ALIGN=RIGHT type="text" NAME="tot" VALUE="" SIZE=7
onFocus="this.blur()" ></TD></TABLE>
</UL>

</FORM>

</CENTER>


Rgrds
Mistral


--------------------

sorry, one script part was missed, here you go:

<code>
<HTML>
<HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!-- Beginning of JavaScript Applet -------------------

var sub =0;
var total=0;
var vat=0;
var r1="off";
var r2="off";
var r3="off";
var r4="off";

function distotal(am)
{

total=total+am;
sub=total;
vat=Math.round(sub*0.175);

document.msg.sub.value="Ј"+AddDecimal(sub);
document.msg.vat.value="Ј"+AddDecimal(vat);
document.msg.tot.value=AddDecimal(total+vat);

}

function AddDecimal(number) {
var withdecimal = "";
var num = "" + number;
if (num.length == 0) { withdecimal += "0";
} else if (num.length == 1) { withdecimal += "0.0" + num;
} else if (num.length == 2) { withdecimal += "0." + num;
} else {
withdecimal += num.substring(0, num.length - 2);
withdecimal += "."
withdecimal += num.substring(num.length - 2, num.length);
}
return withdecimal;
}

// -- End of JavaScript code -------------- -->

</SCRIPT>

<TITLE>JavaScript Order Form</TITLE>
</HEAD>


<BODY BGCOLOR="#ffffff" LINK="#0000ff" VLINK="#ff0000">

<CENTER>

<BR><FONT SIZE=+2 FACE="miffed" COLOR="#0000ff">Javascript Sample Order
Form</FONT>

<FORM NAME="msg">
<UL>
<TABLE CELLPADDING=5>
<TR><TH>Description<TH>Price<TH COLSPAN=2>Order ?

<TR><TD><A HREF="http://www.miffed.com/puzzled/">The Puzzled? CD</A><TD
ALIGN=RIGHT>Ј8.00
<TD><INPUT TYPE="radio" NAME="rad1" VALUE="yes" onclick="if (r1 ==
'off') { r1='on'; distotal(800);}">Yes<TD><INPUT TYPE="radio"
NAME="rad1" CHECKED onclick="if (r1 == 'on') {r1='off';
distotal(-800);}"> No
<TR><TD>The Fishy T-Shirt<TD ALIGN=RIGHT>Ј12.00
<TD><INPUT TYPE="radio" NAME="rad2" VALUE="yes" onclick="if (r2 ==
'off') { r2='on'; distotal(1200);}">Yes<TD><INPUT TYPE="radio"
NAME="rad2" CHECKED onclick="if (r2 == 'on') {r2='off';
distotal(-1200);}"> No
<TR><TD>The Computer game<TD ALIGN=RIGHT>Ј35.00
<TD><INPUT TYPE="radio" NAME="rad3" VALUE="yes" onclick="if (r3 ==
'off') { r3='on'; distotal(3500);} ">Yes<TD><INPUT TYPE="radio"
NAME="rad3" CHECKED onclick="if (r3 == 'on') {r3='off';
distotal(-3500);} "> No<BR>
<TR><TD>The Cuddly Toy<TD ALIGN=RIGHT>Ј100.00
<TD><INPUT TYPE="radio" NAME="rad4" VALUE="yes" onclick="if (r4 ==
'off') { r4='on'; distotal(10000) ;} ">Yes<TD><INPUT TYPE="radio"
NAME="rad4" CHECKED onclick="if (r4 == 'on') {r4='off';
distotal(-10000); } "> No<BR>

<TR><TD ALIGN=RIGHT>Sub Total:<TD ALIGN=RIGHT>
<INPUT ALIGN=RIGHT type="text" NAME="sub" VALUE="" SIZE=7
onFocus="this.blur()" ></TD>

<TR><TD ALIGN=RIGHT>+ VAT (17.5% Tax):<TD ALIGN=RIGHT>
<INPUT ALIGN=RIGHT type="text" NAME="vat" VALUE="" SIZE=7
onFocus="this.blur()" ></TD>
<TR><TD ALIGN=RIGHT COLSPAN=2>
<FONT SIZE=+2><B>Total: Ј </B></FONT>
<INPUT ALIGN=RIGHT type="text" NAME="tot" VALUE="" SIZE=7
onFocus="this.blur()" ></TD></TABLE>
</UL>

</FORM>

</CENTER>

</BODY>
</HTML>
</code>

Mistral
 
L

Lee

richardmgreen said:
Lee

I've just tried your code and got an error on line 16 char 5 - object
doesn't support this property or method.

IE (unlike Firefox) seems to want the variable "item" declared.
Change the line to:

for (var item in price) {
Also, this is not for emailing anywhere. It will simply be for a web
page so people can work out values before emailing me with other
details.

Then there's still no need for the field to be read-only.


--
 
D

Dr John Stockton

JRS: In article <[email protected]>,
dated Tue, 11 Jul 2006 02:23:24 remote, seen in
news:comp.lang.javascript said:
Unfortunately, this still looks a little complex for my needs. I
forgot to mention I'm a complete newbie at this and just wanted
something to do a simple calulation, i.e. take two inputs from
drop-down menus (both numeric), do some simple maths as outlined above
and return the result.

If you read the newsgroup FAQ and start complying with its
recommendations for effective reply formatting - they are fully
compatible with those for the Big-8 newsgroups, and those for (see sig line 3); you may find that the experts regain some interest in
trying to educate you. If you do not, the programming advice that you
will be offered will come from the less intelligent.
 
D

Dr John Stockton

JRS: In article <[email protected]>, dated Tue, 11
Jul 2006 09:00:55 remote, seen in Richard
Cornford said:
Dr John Stockton wrote:

<snip>

Because IE browsers use the window/global object to implement the -
frames - collection the window/global object has an - item - method.
Without declaring - item - as a global variable the Identifier will be
scope resolved as that - item - method of the global/window object and
as a host provided method it is allowed to be read only, so assignments
to - item - may (and clearly do) error.


That supports the principle that every identifier used within a function
should be declared as a var within that function, or passed in as an
argument, except where it is necessary not to do so.

Also the principle that programmer-introduced identifiers should never
be correctly-spelt (or US-spelt) words - Lee's code works for me when
"item" is changed to "iteem".

Javascript needs an equivalent of VBScript's "Option Explicit".
 
M

mistral

(e-mail address removed) пиÑал(а):
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
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.

---------------------

Here is simple calculator you can use:

<?xml version = "1.0"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
<title>JavaScript Calculator</title>
<script>
var total = 0;
var isNew = true;
var op;

function Calculate()
{
var num = parseInt(document.Calculator.numbers.value);

switch(op)
{
case "plus":
{
total += num;
break;
}
case "minus":
{
total -= num;
break;
}
case "multiply":
{
total *= num;
break;
}
case "divide":
{
total /= num;
break;
}
default:
{
break;
}
}

document.Calculator.numbers.value = total;
}

function SetTotal()
{
Calculate();
total = null;
isNew = true;
}

function SetOperator(setOp)
{
if (total != null)
{
Calculate();
}
else
{
total = parseInt(document.Calculator.numbers.value);
}

op = setOp;
isNew = true;
}

function SetNumber(num)
{
if (isNew == true)
{
document.Calculator.numbers.value = num;
isNew = false;
}
else
{
document.Calculator.numbers.value += num;
}
}

function ClearTotal()
{
total = null;
document.Calculator.numbers.value = "";
isNew = true;
}

function ReturnNumber()
{
window.returnValue = document.Calculator.numbers.value;
}

function CloseCalculator()
{
window.close();
}
</script>

</head>

<body onunload="ReturnNumber();">

<form name="Calculator">

<table width="200">
<tr>
<td colspan="2">
<input type="text" size="27" name="numbers"
style="text-align:right">
</td>
</tr>
<tr>
<td style="width: 155px">
<button style="width:35px; height:35px; font-weight:bold"
name="seven" onclick="SetNumber(7);">7</button>&nbsp;
<button style="width:35px; height:35px; font-weight:bold"
name="eight" onclick="SetNumber(8);">8</button>&nbsp;
<button style="width:35px; height:35px; font-weight:bold"
name="nine" onclick="SetNumber(9);">9</button>&nbsp;
<button style="width:35px; height:35px; font-weight:bold"
name="divide" onclick="SetOperator('divide');">/</button></td>
<td>
<button style="width: 35px; height:35px; font-weight:bold"
name="clear" onclick="ClearTotal();">C</button>
</td>
</tr>
<tr>
<td>
<button style="width:35px; height:35px; font-weight:bold"
name="four" onclick="SetNumber(4);">4</button>&nbsp;
<button style="width:35px; height:35px; font-weight:bold"
name="button" onclick="SetNumber(5);">5</button>&nbsp;
<button style="width:35px; height:35px; font-weight:bold"
name="six" onclick="SetNumber(6);">6</button>&nbsp;
<button style="width:35px; height:35px; font-weight:bold"
name="multiply" onclick="SetOperator('multiply');">*</button>
</td>
<td rowspan="3">
<button style="width: 35px; height:115px; font-weight:bold"
name="equals" onclick="SetTotal();">=</button>
</td>
</tr>
<tr>
<td>
<button style="width:35px; height:35px; font-weight:bold"
name="one" onclick="SetNumber(1);">1</button>&nbsp;
<button style="width:35px; height:35px; font-weight:bold"
name="two" onclick="SetNumber(2);">2</button>&nbsp;
<button style="width:35px; height:35px; font-weight:bold"
name="three" onclick="SetNumber(3);">3</button>&nbsp;
<button style="width:35px; height:35px; font-weight:bold"
name="minus" onclick="SetOperator('minus');">-</button>
</td>
</tr>
<tr>
<td>
<button style="width:113px; height: 35px; font-weight:bold"
name="zero" onclick="SetNumber(0);">0</button>&nbsp;
<button style="width:35px; height:35px; font-weight:bold"
name="plus" onclick="SetOperator('plus');">+</button>
</td>
</tr>
<tr>
<td colspan="2">
<button style="width:192px; height: 35px;" name="close"
onclick="CloseCalculator(0);">Close Calculator</button>
</td>
</tr>
</table>
</form>
</body>

</html>

To use the calculator, copy the abovementioned code and paste it into a
notepad. Save the page as calculator.htm.

Here is page you will call calculator from.

<html>

<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252">
<title>Untitled 1</title>
<script>
function OpenCalculator()
{
var ret;
var spanTag;

ret = window.showModalDialog("calculator.htm", "",
"dialogHeight:325px; dialogWidth:215px; resizable:yes;");

spanTag = document.all.tags("span").item("numbers");
spanTag.innerText = ret;
}
</script>
</head>

<body>

<p><a href="javascript:OpenCalculator();">Calculate Numbers</a></p>

<p>The number is: <span id="numbers"></span></p>

</body>

</html>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,013
Latest member
KatriceSwa

Latest Threads

Top