Building Blocks <le******@myway.com> wrote in message news:<00*****************************@news.east.co x.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>Calculator Exemple</title>
<style type="text/css">
fieldset{border:2px #000 solid;padding:1em;}
legend{font-weight:700}
table{margin-left:1em}
td{padding:0.4em;vertical-align:top;font-size:0.9em}
#result{border:thin #fff solid;color:green;font-weight:700;}
</style>
<script type="text/javascript">
//-----------------------------------------------------------------
function Calculator(){ this.articles={}; }
Calculator.prototype.addArticle = function (art){
this.articles[art.name]=art;
}
Calculator.prototype.getTotal = function(){
var total = 0;
for(var ii in this.articles)
total += this.articles[ii].getValue();
return total;
}
Calculator.prototype.getArticle = function(s){
return this.articles[s] || null;
}
//-----------------------------------------------------------------
function Article(name, price, quantity){
this.name = name;
this.price = price || 0;
this.quantity = quantity || 0;
}
Article.prototype.getValue = function(){
return this.price * this.quantity;
}
Article.prototype.setQuantity = function(q){ this.quantity = q; }
//-----------------------------------------------------------------
var myCalculator = new Calculator();
myCalculator.addArticle(new Article("Arrows", 10, 0));
myCalculator.addArticle(new Article("Deku Seeds", 5, 0));
myCalculator.addArticle(new Article("Biggoron Sword", 200, 0));
myCalculator.addArticle(new Article("Din's Fire", 70, 0));
myCalculator.addArticle(new Article("Farore's Wind", 50, 0));
//-----------------------------------------------------------------
function calculate(button){
var
frm=button.form,
qArrows=frm.elements["artArrows"].value,
qDekuSeeds=
+ frm.elements["artDekuSeeds"].options[
frm.elements["artDekuSeeds"].selectedIndex].value,
qBiggoronSword=frm.elements["artBiggoronSword"].checked ? 1 : 0,
qDinsFire=frm.elements["artMagics"][0].checked ? 1 : 0,
qFaroresWind=frm.elements["artMagics"][1].checked ? 1 : 0;
qArrows = /^\d+$/.test(qArrows) ? + qArrows : 0
myCalculator.getArticle("Arrows").setQuantity(qArr ows);
myCalculator.getArticle("Deku Seeds").setQuantity(qDekuSeeds);
myCalculator.getArticle("Biggoron Sword").
setQuantity(qBiggoronSword);
myCalculator.getArticle("Din's Fire").setQuantity(qDinsFire);
myCalculator.getArticle("Farore's Wind").
setQuantity(qFaroresWind);
frm.elements["result"].value = myCalculator.getTotal() + "r";
}
</script>
</head>
<body>
<form action="whatever.foo" onsubmit="return false">
<fieldset>
<legend>Articles</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="calculate(this)">
</td>
</tr>
<tr>
<td><label for="artDekuSeeds">Deku Seeds (5r)</label></td>
<td>
<select name="artDekuSeeds" id="artDekuSeeds"
onchange="calculate(this)">
<option value="0">0</option>
<option value="10">10</option>
<option value="20">20</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="artBiggoronSword">
Do you want the Biggoron Sword (200r)?
</label>
</td>
<td>
<input name="artBiggoronSword" id="artBiggoronSword"
value="YES_I_WANT_THE_BIGGORON_SWORD"
type="checkbox" checked="checked"
onclick="calculate(this)">
</td>
</tr>
<tr>
<td rowspan="2">Magics</td>
<td>
<input type="radio" name="artMagics" id="artDinsFire"
value="artDinsFire_1" checked="checked"
onclick="calculate(this)">
<label for="artDinsFire">Din's Fire (70r)</label>
</td>
</tr>
<tr>
<td>
<input type="radio" name="artMagics" id="artFaroresWind"
value="artFaroresWind_1" onclick="calculate(this)">
<label for="artFaroresWind">Farore's Wind (50r)</label>
</td>
</tr>
<tr>
<td>
<input type="button" value="Calculate!"
onclick="calculate(this)">
</td>
<td>
<input type="text" name="result"
id="result" readonly="readonly">
</td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
