# Thread: percantage calculation of a number entered in input field

1. Junior Coders
Join Date
Nov 2007
Posts
69
Thanks
36
Thanked 0 Times in 0 Posts

## percantage calculation of a number entered in input field

hi
i m new to javascript and m really not getting any solution to what i need to do
if any of you could guide me how i should do this would be really a big help

i have a field in which a number is made to enter like 5000 and for the result i want it to show what will be the 20% and 30% and 40% of 5000 as result below
(like 1000 , 1500 , 2000 as result)
the input field
what should i do for that pls
help me in this regard
i know it is simple but for me i m just scratching my head without any help

<td>Calculate</td>
<td><input type="text" name="calculate" size="20"></td>

thanks
anand

2. Elite Coders
Join Date
Jul 2006
Location
just north of Boston, MA
Posts
1,806
Thanks
13
Thanked 72 Times in 72 Posts
Code:
```<script type="text/javascript">
var input = 0;
var percent = 0;
var el = '';
function calcPercent(input,percent,el)
{
if(document.getElementById(input).value > 0 && (int)percent>0 && document.getElementById(el))
{
document.getElementById(el).innerHTML = ((int)document.getElementById(input).value * (int)percent);
}
}
</script>

<form>
<p>
<label>Number:</label>
<input type="text" name="input_field" id="input_field" value="">
</p>
<p>
<label>Percentage:</label>
<input type="text" name="percent_field" id="percent_field" value=""> %
</p>
<p id="result">&nbsp;</p>
<input type="button" name="submit" value="Calculate" onclick="javascript:calcPercent('input_field','percent_field','result');">
</form>```

3. Junior Coders
Join Date
Nov 2007
Posts
69
Thanks
36
Thanked 0 Times in 0 Posts
hi
thanks for the reply but it shows error
i mean the page status bar shows a error sign and does nothing
thanks
anand

4. Code:
```<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.txt {
text-align:right;
}
</style>
<script type="text/javascript">
function makePercents(f){
var v; f=f.form.elements;
if(isNaN(v=f['p100'].value-0)){
return;
}
f['p20'].value=Math.round(v/20);
f['p30'].value=Math.round(v/30);
f['p40'].value=Math.round(v/40);
}
</script>
<body>
<form action="#">
<table>
<tr>
<td class="txt">Enter a Number:</td><td><input type="text" name="p100">
<input type="button" value="Go!" onclick="makePercents(this);"></td>
</tr>
<tr>
<td class="txt">20 Percent =</td><td><input type="text" name="p20"></td>
</tr>
<tr>
<td class="txt">30 Percent =</td><td><input type="text" name="p30"></td>
</tr>
<tr>
<td class="txt">40 Percent =</td><td><input type="text" name="p40"></td>
</tr>
</table>
</form>
</body>
</html>```
Last edited by jscheuer1; 02-21-2008 at 07:53 PM. Reason: fix HTML markup

5. ## The Following User Says Thank You to jscheuer1 For This Useful Post:

meenakshi (02-21-2008)

6. Junior Coders
Join Date
Nov 2007
Posts
69
Thanks
36
Thanked 0 Times in 0 Posts
wow
thanks
it worked
smile always
thanks once again
anand

#### Posting Permissions

• You may not post new threads
• You may not post replies
• You may not post attachments
• You may not edit your posts
•