Calculate Form

**Yep** · Jul 20 '05, 09:29 AM

Re: Calculate Form

Building Blocks <legoland@myway .com> wrote in message news:<0001HW.BB 5182E000128DD60 4185840@news.ea st.cox.net>...
[color=blue]
> A script that can handle text input, radio buttons, checkboxes, and
> dropdowns. Each one of these variables will contain a number. That number
> will appear in a seperate box at the bottom. So basically whatever you choose
> has a corresponding number associated with it (except for the text input,
> which you enter whatever number) and those numbers are added and produced in
> a separate box at the bottom (i.e. Total Cost).[/color]

This looks like a school assignment :-)
[color=blue]
> I have looked all over the Internet and cannot find a script that will insert
> the total for all the various field types.[/color]

You should have split your search on how to grab values from different
form controls, and then how to add them (string to number conversion).
Anyway, below's a short example, which should give you enough
information to get the different points. I've gone for a regular
quantity/price calculation problem, which is where you seem to be
heading.

Note that I use a unary "+" to convert from a string to a number,
which has the advantage of being short, fast, and automatically
dealing with octal numbers. I've also used an OO conception, which
should offer a neater approach to the problem and provide you with a
much more interesting experience ;-)

HTH
Yep.

<html>
<head>
<title>Calculat or Exemple</title>
<style type="text/css">
fieldset{border :2px #000 solid;padding:1 em;}
legend{font-weight:700}
table{margin-left:1em}
td{padding:0.4e m;vertical-align:top;font-size:0.9em}
#result{border: thin #fff solid;color:gre en;font-weight:700;}
</style>
<script type="text/javascript">
//-----------------------------------------------------------------
function Calculator(){ this.articles={ }; }
Calculator.prot otype.addArticl e = function (art){
this.articles[art.name]=art;
}
Calculator.prot otype.getTotal = function(){
var total = 0;
for(var ii in this.articles)
total += this.articles[ii].getValue();
return total;
}
Calculator.prot otype.getArticl e = function(s){
return this.articles[s] || null;
}
//-----------------------------------------------------------------
function Article(name, price, quantity){
this.name = name;
this.price = price || 0;
this.quantity = quantity || 0;
}
Article.prototy pe.getValue = function(){
return this.price * this.quantity;
}
Article.prototy pe.setQuantity = function(q){ this.quantity = q; }
//-----------------------------------------------------------------
var myCalculator = new Calculator();
myCalculator.ad dArticle(new Article("Arrows ", 10, 0));
myCalculator.ad dArticle(new Article("Deku Seeds", 5, 0));
myCalculator.ad dArticle(new Article("Biggor on Sword", 200, 0));
myCalculator.ad dArticle(new Article("Din's Fire", 70, 0));
myCalculator.ad dArticle(new Article("Farore 's Wind", 50, 0));
//-----------------------------------------------------------------
function calculate(butto n){
var
frm=button.form ,
qArrows=frm.ele ments["artArrows"].value,
qDekuSeeds=
+ frm.elements["artDekuSee ds"].options[
frm.elements["artDekuSee ds"].selectedIndex].value,
qBiggoronSword= frm.elements["artBiggoronSwo rd"].checked ? 1 : 0,
qDinsFire=frm.e lements["artMagics"][0].checked ? 1 : 0,
qFaroresWind=fr m.elements["artMagics"][1].checked ? 1 : 0;

qArrows = /^\d+$/.test(qArrows) ? + qArrows : 0

myCalculator.ge tArticle("Arrow s").setQuantity (qArrows);
myCalculator.ge tArticle("Deku Seeds").setQuan tity(qDekuSeeds );
myCalculator.ge tArticle("Biggo ron Sword").
setQuantity(qBi ggoronSword);
myCalculator.ge tArticle("Din's Fire").setQuant ity(qDinsFire);
myCalculator.ge tArticle("Faror e's Wind").
setQuantity(qFa roresWind);

frm.elements["result"].value = myCalculator.ge tTotal() + "r";
}
</script>
</head>
<body>
<form action="whateve r.foo" onsubmit="retur n false">
<fieldset>
<legend>Article s</legend>
<p>Please select your articles and quantities below.</p>
<table cellspacing="0" >
<tr>
<td><label for="artArrows" >Arrows (10r)</label></td>
<td>
<input type="text" id="artArrows" name="artArrows "
value="10" onblur="calcula te(this)">
</td>
</tr>
<tr>
<td><label for="artDekuSee ds">Deku Seeds (5r)</label></td>
<td>
<select name="artDekuSe eds" id="artDekuSeed s"
onchange="calcu late(this)">
<option value="0">0</option>
<option value="10">10</option>
<option value="20">20</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="artBiggoro nSword">
Do you want the Biggoron Sword (200r)?
</label>
</td>
<td>
<input name="artBiggor onSword" id="artBiggoron Sword"
value="YES_I_WA NT_THE_BIGGORON _SWORD"
type="checkbox" checked="checke d"
onclick="calcul ate(this)">
</td>
</tr>
<tr>
<td rowspan="2">Mag ics</td>
<td>
<input type="radio" name="artMagics " id="artDinsFire "
value="artDinsF ire_1" checked="checke d"
onclick="calcul ate(this)">
<label for="artDinsFir e">Din's Fire (70r)</label>
</td>
</tr>
<tr>
<td>
<input type="radio" name="artMagics " id="artFaroresW ind"
value="artFaror esWind_1" onclick="calcul ate(this)">
<label for="artFarores Wind">Farore's Wind (50r)</label>
</td>
</tr>
<tr>
<td>
<input type="button" value="Calculat e!"
onclick="calcul ate(this)">
</td>
<td>
<input type="text" name="result"
id="result" readonly="reado nly">
</td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>

Calculate Form

Calculate Form

Comment