Hi all,

I'm trying to change an <input> to either "st", "nd", "rd" or "th" depending on what value is another box, so collectively the two cells will look like "3rd" or "21st" etc

The code I'm using is:
Code:
<html>
<head>
<script>
function stndrdth()
{
	var theinput = document.getElementById("hole_number").value;
	var righthandnumber = theinput.charAt(theinput.length-1);
	
	
	
	if( righthandnumber == 1 )
	{
		document.getElementById("stndrdth").value = 'st';
	}
	else if( righthandnumber == 2 )
	{
		document.getElementById("stndrdth").value = 'nd';
	}
	else if( righthandnumber == 3 )
	{
		document.getElementById("stndrdth").value = 'rd';
	}
	else
	{
		document.getElementById("stndrdth").value = 'th';
	}
	
	
}
</script>

</head>
<body>

<form>
<input id="hole_number" name="hole_number" maxlength="3" size="3" onkeypress="stndrdth()" onchange="stndrdth()" onkeyup="stndrdth()" />
<input id="stndrdth" name="stndrdth" size="2" maxlength="2" /> hole 
<a href="javascript:stndrdth()">A link</a>
</form>

</body>
</html>
I don't understand why if I click on the link, it works, but altering the number in the "hole_number" box doesn't

What confuses me more is if I remove the <form> tags, it works as expected

Any help will be appreciated


Regards
Lee