/    Sign up×
Community /Pin to ProfileBookmark

Need Help with a Calculating Form

Copy linkTweet thisAlerts:
Jul 24.2010

I’m brand new to Javascript and I’m trying to create a four-box form in which the user enters information into the first two boxes, and the program fills the second two boxes in.

Basically, I need a form to calculate the square footage and cost of a vinyl banner.

In the first text box the user would enter the banner’s height.
In the second box the user would enter the banner’s width.

The third box would multiply the height by the width and display the total square footage of the banner.

So far, I have this part down. The following is what I need help with: the fourth box.

The fourth box needs to display the cost of the banner. I have a complicated pricing structure. For example:

If the total square feet for the banner is under 12 square feet, the cost is $60.00. If the square feet for the banner is between 13 and 25 square feet. The cost is $4.80/square foot and ect…

I believe this would be done using some variation of an IF statement but I can’t get it to work.

Using this example, what would I add to the form to get this work? The following is the form I have so far which just consists of the calculation of the square feet which is all I’ve been able to get working.

[CODE]<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
</head>

<SCRIPT language = JavaScript>

function calculate() {
A = eval(document.frmOne.txtFirstNumber.value)
B = eval(document.frmOne.txtSecondNumber.value)
C = (A * B)
eval(document.frmOne.txtThirdNumber.value = C)

}

</SCRIPT>

<body><FORM NAME = frmOne>

Height: <INPUT TYPE = Text NAME = txtFirstNumber SIZE = 5 value =””>

Width: <INPUT TYPE = Text NAME = txtSecondNumber SIZE = 5 value =””>

Square Footage: <INPUT TYPE = Text NAME = txtThirdNumber SIZE = 5 value = “”>
<P>
<Input Type = Button NAME = b1 VALUE = “Add Numbers” onClick = calculate()>

</FORM>
</body>
</html>[/CODE]

Thanks for any help,
Nick.

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@tirnaJul 25.2010 — maybe use this as a guide:

I also wouldn't use eval() because of potential security risks. I used parseFloat() instead.


[code=php]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
<!--
function calculate() {
var a = parseFloat(document.frmOne.txtFirstNumber.value);
var b = parseFloat(document.frmOne.txtSecondNumber.value);
var area = (a * b);
document.frmOne.txtThirdNumber.value = area;
var totCost;
if(area < 12) {
totCost = 100.0;
} else if (area >= 12 && area <= 25) {
totCost = 4.8 * area;
} else {
totCost = 3.5 * area; //or whatvere rate you want
}
document.getElementById('txtTotCost').value = '$'+totCost.toFixed(2);
}
//-->
</script>

</head>
<body>
<form name="frmOne">
Height: <input type="text" name="txtFirstNumber" size="5" value ="">
Width: <input type="text" name="txtSecondNumber" size="5" value ="">
Square Footage: <input type="text" name="txtThirdNumber" size="5" readonly="readonly" value = "">
Total Cost: <input type="text" name="txtTotCost" id="txtTotCost" size="5" readonly="readonly" value = "">
<input type="button" name="b1" value="Add Numbers" onclick="calculate()" />
</form>

</body>
</html>
[/code]
Copy linkTweet thisAlerts:
@PadonakJul 25.2010 — slightly enhanced version

[CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Vinyl banner</title>
<style type="text/css">
input{text-align:center;}
input.btn{cursor:pointer;width:100px;font-weight:bold;}
div#div_c{text-align:center;padding-top:50px;}
</style>
<script type="text/javascript">
<!--
// cost conditions
var cc = [
/* [from, to, cost, per] */
[0, 12, 60, ''],
[12, 25, 4.8, 'per']
];

function calculate(){
var err = document.getElementById('err');
var ban_H = document.frmOne.txtFirstNumber.value;
var ban_W = document.frmOne.txtSecondNumber.value;
if((ban_H === '') || (ban_W === '')){err.innerHTML = '<h2 style="color:#dc143c;">One or both dimention missed!</h2>'; return;}
else{
var a = parseFloat(ban_H);
var b = parseFloat(ban_W);
var area = (a * b);
document.frmOne.txtThirdNumber.value = area;
var totCost; var exclusive = true;

for(var i = 0; i < cc.length; i++){
if(area >= cc[i][0] && area <= cc[i][1]){
totCost = (cc[i][3] !== 'per') ? (cc[i][2]) : (cc[i][2] * area);
exclusive = false;
}
else{continue;}
}
document.getElementById('txtTotCost').value = (exclusive == false) ? ('$'+totCost.toFixed(2)) : '- -';
err.innerHTML = (exclusive == false) ? '&nbsp;' : 'Your banner is of non-standart size!<br /><br />Please contact us via Email for further info';
}
}

function clearErr(){document.getElementById('err').innerHTML = '&nbsp;';}
//-->
</script>
</head>
<body>
<div id="div_c">
<form name="frmOne" action="">
Height: <input type="text" name="txtFirstNumber" size="5" value="" />
Width: <input type="text" name="txtSecondNumber" size="5" value="" />
Square Footage: <input type="text" name="txtThirdNumber" size="5" readonly="readonly" value="" />
Total Cost: <input type="text" name="txtTotCost" id="txtTotCost" size="5" readonly="readonly" value="" />
<br /><br />
<input class="btn" type="button" name="b1" value="Calculate" onclick="calculate()" onfocus="this.blur()" />&nbsp;&nbsp;&nbsp;<input class="btn" type="reset" value="Clear form" onclick='clearErr()' onfocus="this.blur()" />
</form>
<br /><br />
<div id="err">&nbsp;</div>
</div>
</body>
</html>[/CODE]
Copy linkTweet thisAlerts:
@PadonakJul 25.2010 — and this one has interactive price table example

[CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Vinyl banner</title>
<style type="text/css">
input{text-align:center;}
input.btn{cursor:pointer;width:100px;font-weight:bold;}
div#div_c{text-align:center;padding-top:50px;}
td{text-align:center;}
</style>
<script type="text/javascript">
<!--
// cost conditions
var cc = [
/* [from, to, cost, per] */
[0, 12, 60, ''],
[13, 25, 4.8, 'per']
];

// drawing the price table begin

function insRow(obj,pos,id){var new_tr = obj.insertRow(pos); new_tr.setAttribute('id',id);}
function insCell(row,pos,content){var new_td = row.insertCell(pos);new_td.innerHTML = content;}
function drawPriceTab(){
var tab = document.createElement('table');
tab.setAttribute('id','price');
tab.setAttribute('width','500');
tab.setAttribute('border','1');
tab.setAttribute('cellPadding','3');
tab.setAttribute('cellSpacing','3');
tab.setAttribute('align','center');
tab.style.marginTop = 10 + 'px';
tab.style.backgroundColor = '#a5b5c5';
insRow(tab,-1,'r_0');
insCell(tab.rows[tab.tBodies[0].getElementsByTagName('TR').length-1],0,'From');
insCell(tab.rows[tab.tBodies[0].getElementsByTagName('TR').length-1],1,'To');
insCell(tab.rows[tab.tBodies[0].getElementsByTagName('TR').length-1],2,'Cost');
insCell(tab.rows[tab.tBodies[0].getElementsByTagName('TR').length-1],3,'Per');
for(var i = 0; i < cc.length; i++){
insRow(tab,-1,'tr_'+(i+1));
for(var n = 0; n < cc[i].length; n++){
var cont = (cc[i][n] !== '') ? cc[i][n] : '- -';
if(n == 2){cont = '$' + cont.toFixed(2);}
insCell(tab.rows[tab.tBodies[0].getElementsByTagName('TR').length-1],n,cont);
}
}
document.body.insertBefore(tab,document.body.childNodes[0]);
var h = document.createElement('h2');
h.style.marginTop = 30 + 'px';
h.innerHTML = 'Pricelist';
h.style.textAlign = 'right';
h.style.paddingRight = tab.offsetLeft + 'px';
document.body.insertBefore(h,tab);
}

// drawing the price table end

function calculate(){
clearTrs();
var err = document.getElementById('err');
var ban_H = document.frmOne.txtFirstNumber.value;
var ban_W = document.frmOne.txtSecondNumber.value;
if((ban_H === '') || (ban_W === '')){err.innerHTML = '<h2 style="color:#dc143c;">One or both dimention missed!</h2>'; return;}
else{
var a = parseFloat(ban_H);
var b = parseFloat(ban_W);
var area = (a * b);
document.frmOne.txtThirdNumber.value = area;
var totCost; var exclusive = true;

for(var i = 0; i < cc.length; i++){
if(area >= cc[i][0] && area <= cc[i][1]){
totCost = (cc[i][3] !== 'per') ? (cc[i][2]) : (cc[i][2] * area);
if(document.getElementById('tr_'+(i+1))){document.getElementById('tr_'+(i+1)).style.backgroundColor = 'Yellow';}
exclusive = false;
}
else{continue;}
}
document.getElementById('txtTotCost').value = (exclusive == false) ? ('$'+totCost.toFixed(2)) : '- -';
err.innerHTML = (exclusive == false) ? '&nbsp;' : 'Your banner is of non-standart size!<br /><br />Please contact us via Email for further info';
}
}

function clearErr(){document.getElementById('err').innerHTML = '&nbsp;';clearTrs();}
function clearTrs(){var trs = document.getElementsByTagName('TR');for(var x = 0; x < trs.length; x++){if(trs[x]){trs[x].style.backgroundColor = 'transparent';}}}
// if the price table is not needed just comment up the line below
window.onload = drawPriceTab;
//-->
</script>
</head>
<body>
<div id="div_c">
<form name="frmOne" action="">
Height: <input type="text" name="txtFirstNumber" size="5" value="" />
Width: <input type="text" name="txtSecondNumber" size="5" value="" />
Square Footage: <input type="text" name="txtThirdNumber" size="5" readonly="readonly" value="" />
Total Cost: <input type="text" name="txtTotCost" id="txtTotCost" size="5" readonly="readonly" value="" />
<br /><br />
<input class="btn" type="button" name="b1" value="Calculate" onclick="calculate()" onfocus="this.blur()" />&nbsp;&nbsp;&nbsp;<input class="btn" type="reset" value="Clear form" onclick='clearErr()' onfocus="this.blur()" />
</form>
<br /><br />
<div id="err">&nbsp;</div>
</div>
</body>
</html>[/CODE]
×

Success!

Help @nickwhall spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...