Building Blocks <le******@myway .com> wrote in message news:<00******* *************** *******@news.ea st.cox.net>...
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).
This looks like a school assignment :-)
I have looked all over the Internet and cannot find a script that will insert
the total for all the various field types.
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>
