[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1903
  • 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

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

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