By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,660 Members | 1,735 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,660 IT Pros & Developers. It's quick & easy.

Calculate Form

P: n/a
Hi,

All I need is a simle calculate form script which contains this:

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

I have looked all over the Internet and cannot find a script that will insert
the total for all the various field types. Seems Im only find calculators
that produce a total number from input text fields only.

Can anyone help me? Please?
Thanks,
Sean

Jul 20 '05 #1
Share this Question
Share on Google+
1 Reply


P: n/a
Yep
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>
Jul 20 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.