• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1908
  • Last Modified:

How do I automatically round a percentage to 2 decimals places in a form?

Hi,

I have a form with several input fields that sum up a total as a user inputs them and at the same time is calculating an average percentage in the last field. As a user inputs a number in each field the percentage field changes but it doesn't show it rounding off to 2 decimal places.

It will only round off to two decimal places when the user has tabbed through all of the fields, and  then when they reach the submit button.

Is there a way to always display the percentage rounded off to 2 decimal places instantly, without having to go to the end of the form?

Below is the code for the form:
<html>
<head>
</head>
 
<body>
 
<script type="text/javascript">
  function startCalc(){
  interval = setInterval("calc()",1);
}
function calc(){
  sun = document.myform.edit1.value;
  mon = document.myform.edit2.value;
  tues = document.myform.edit3.value;
  wed = document.myform.edit4.value;
  thurs = document.myform.edit5.value;
  fri = document.myform.edit6.value;
  sat = document.myform.edit7.value;
  document.myform.edit13.value = (sun * 1) + (mon * 1) + (tues * 1) + (wed * 1) + (thurs * 1) + (fri * 1) + (sat * 1);
  
  total = document.myform.edit13.value;
  quota = document.myform.edit20.value;
  document.myform.edit14.value = (total / quota * 100);
}
function stopCalc(){
  clearInterval(interval);
}
</script>
 
<script type="text/javascript">
/*<![CDATA[*/
function pcent(ele) {
var percent = document.getElementById(ele).value.replace('%','');
document.getElementById(ele).value = Number(percent).toFixed(2) + '%';
}
/*]]>*/
</script>
 
<form name="myform" method="post" action="index.php" onsubmit="return check(this)">
 
<br />
 
 
		<table width='90%' border='0' cellpadding='0' cellspacing='0'>
			
			<tr>
 
				<td class='label'><label>Sun:</label></td>
 
				<td><input type="text" name="edit1" onFocus="startCalc();" onBlur="stopCalc();" value="" size="30"  maxlength="24" ></td>
				<td class='label'><label></label></td>
			</tr>
			<tr>
				<td class='label'><label>Mon:</label></td>
 
				<td><input type="text" name="edit2" onFocus="startCalc();" onBlur="stopCalc();" value="" size="30"  maxlength="24" ></td>
 
				<td class='label'><label></label></td>
			</tr>
			<tr>
				<td class='label'><label>Tues:</label></td>
 
				<td><input type="text" name="edit3" onFocus="startCalc();" onBlur="stopCalc();" value="" size="30"  maxlength="24" ></td>
				<td class='label'><label></label></td>
			</tr>
			<tr>
 
				<td class='label'><label>Wed:</label></td>
 
				<td><input type="text" name="edit4" onFocus="startCalc();" onBlur="stopCalc();" value="" size="30"  maxlength="24" ></td>
				<td class='label'><label></label></td>
			</tr>
			<tr>
				<td class='label'><label>Thurs:</label></td>
 
				<td><input type="text" name="edit5" onFocus="startCalc();" onBlur="stopCalc();" value="" size="30"  maxlength="24" ></td>
 
				<td class='label'><label></label></td>
			</tr>
			<tr>
				<td class='label'><label>Fri:</label></td>
 
				<td><input type="text" name="edit6" onFocus="startCalc();" onBlur="stopCalc();" value="" size="30"  maxlength="24" ></td>
				<td class='label'><label for='blank'></label></td>
			</tr>
			<tr>
 
				<td class='label'><label>Sat:</label></td>
 
				<td><input type="text" name="edit7" onFocus="startCalc();" onBlur="stopCalc();" value="" size="30"  maxlength="24" ></td>
				<td class='label'><label for='blank'></label></td>
			</tr>
 
			<tr><!--//begin total-->
 
				<td class='label'><label for='total'>Total:</label></td>
 
				<td><input type="text" name="edit13" value="" size="30"  maxlength="24" ></td>
				<td class='label'><label for='blank'></label></td>
			</tr><!--//end total-->
			<tr><!--//begin quota/percentage-->
				<td class='label'><label for='quota'>Quota:</label></td>
 
				<td><input type="text" name="edit20" value="443" size="30"  maxlength="24" ></td>
 
				<td class='label'><label for='percentage'>Percentage:</label></td>
				<td><input type="text" id="percent" name="edit14" onblur="pcent(this.id)" value="22.57%" size="30"  maxlength="24" ></td>			</tr><!--//end quota/percentage-->
		</table>
 
		<table width='100%' border='0' cellpadding='0' cellspacing='0'>
			
			<tr>
				<td align='center'><input type="submit" name="edit" value="Submit" /></td>
			</tr>
 
			
		</table>
 
<br />
 
</form>
 
</body>
</html>

Open in new window

0
fcruz5
Asked:
fcruz5
  • 2
2 Solutions
 
gops1Commented:
Add this

document.myform.edit14.value = (total / quota * 100).toFixed(2);
0
 
fcruz5Author Commented:
Thanks! How would I automatically add the percent sign at the end for that field?
0
 
gops1Commented:
document.myform.edit14.value = (total / quota * 100).toFixed(2) + '%';
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now