urgent help needed in javascript

Hi ,

I have 4 input form fields and when user enters data in any number of fields like he enter data in 2 fields and left 2 fields blank like(123, ,456, ,), i need to check on blur event so that it has to check for empty fields and once empty fields exits then it has to sort out all the data presented fields and then placed back to input fields like (456,123, , ,).

i am new to java script and i have no idea how to implement this , please help me thanks.


<input type="text"
name="itemMod1_1"
size="5"
maxlength="5"
class="mono" >
<input type="text"
name="itemMod2_1"
size="5"
maxlength="5"
class="mono" >
<input type="text"
name="itemMod3_1"
size="5"
maxlength="5"
class="mono" >
<input type="text"
name="itemMod4_1"
size="5"
maxlength="5"
class="mono" >

 

<script type="text/javascript">
function handle_change()
{
	var i, el, val, values = [];

	for (i = 1; i < 100; ++i)
	{
		el = document.getElementById('in_' + i);

		if (!el)
		{
			break;
		}

		val = parseInt(el.value, 10);

		if (isNaN(val))
		{
			val = 0;
		}

		values[i] = val;
	}

	function sort_number_desc(a, b)
	{
		return b - a;
	}

	values.sort(sort_number_desc);

	for (i = 1; i < 100; ++i)
	{
		el = document.getElementById('in_' + i);

		if (!el)
		{
			break;
		}

		if (typeof values[i - 1] != 'undefined')
		{
			if (values[i - 1] == 0)
			{
				el.value = '';
			}
			else
			{
				el.value = values[i - 1];
			}
		}
		else
		{
			el.value = '';
		}
	}
}
</script>
<input type="text" name="in_1" id="in_1" onblur="handle_change()" />
<input type="text" name="in_2" id="in_2" onblur="handle_change()" />
<input type="text" name="in_3" id="in_3" onblur="handle_change()" />
<input type="text" name="in_4" id="in_4" onblur="handle_change()" />
<input type="text" name="in_5" id="in_5" onblur="handle_change()" />

Code (markup):