Hello, I am new to javascript and I have been searching the web all day trying to figure out how to do what seems like a very simple task.

I have a page that is created dynamically with PHP, that lists an undefined number of users. On this page you can assign a number of items to each user. Three different set of items. You cannot go over the number of items in each category listed at the top. So what I need it to do is reduce the number at the top by the amount i enter into each field, Once the number at the top gets to 0 it should no longer allow me to enter any more numbers in that category.

This seems like it should be so simple to do but I just don't know javascript that well yet. Below is the form I have so you can get a better grasp of what I am talking about. Keep in mind that there will be more then three users, the number of users will change from one day to the next.

Any help would be greatly appreciated.

HTML Code:

<form method="POST" action="" name="beginValues" id="beginValues">
Begin Lvls: &nbsp; &nbsp; 
Level A <input type="text" id="totalA" value="250" size="8">
Level B <input type="text" id="totalB" value="56" size="8">
Level C <input type="text" id="totalC" value="143" size="8">
</form>


<table width="500px">

	<tr>
		<td width="25%" align="left"><h2>Users</h2></td>
		<td width="25%" align="center"><h2>Level A</h2></td>
		<td width="25%" align="center"><h2>Level B</h2></td>
		<td width="25%" align="center"><h2>Level C</h2></td>
	</tr>

	<form method="POST" action="" name="theForm" id="theForm">
	<tr>	
		<td>User 1</td>		
		<td align="center"><input type="text" name="levelA[]" id="levelA[]" size="8" onBlur="calculate()" ></td>
		<td align="center"><input type="text" name="levelB[]" id="levelB[]" size="8" onBlur="calculate()" ></td>
		<td align="center"><input type="text" name="levelC[]" id="levelC[]" size="8" onBlur="calculate()"></td>
	</tr>

	<tr>	
		<td>User 2</td>		
		<td align="center"><input type="text" name="levelA[]" id="levelA[]" size="8" onBlur="calculate()" ></td>
		<td align="center"><input type="text" name="levelB[]" id="levelB[]" size="8" onBlur="calculate()" ></td>
		<td align="center"><input type="text" name="levelC[]" id="levelC[]" size="8" onBlur="calculate()"></td>
	</tr>

	<tr>	
		<td>User 3</td>		
		<td align="center"><input type="text" name="levelA[]" id="levelA[]" size="8" onBlur="calculate()" ></td>
		<td align="center"><input type="text" name="levelB[]" id="levelB[]" size="8" onBlur="calculate()" ></td>
		<td align="center"><input type="text" name="levelC[]" id="levelC[]" size="8" onBlur="calculate()"></td>
	</tr>
	
</table>


<table width="500px">

	<tr>
		<td width="25%">Total</td>
		<td width="25%" align="center"><input type="text" value="0" name="sumA" id="sumA" size="8"></td>
		<td width="25%" align="center"><input type="text" value="0" name="sumB" id="sumB" size="8"></td>
		<td width="25%" align="center"><input type="text" value="0" name="sumC" id="sumC" size="8"></td>
	</tr>
	</form>

</table>