Here's a little demo that may help:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Number Padding</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
function checkpads(num, len){
if (isNaN(num)){
alert ('Numbers Only Please')
return 0;
}
if (len==0){
alert ('Please Select a Padding Length')
return 0;
}
if (num.length>=len){
alert ('Number is already that Long or Longer')
return 0;
}
return 1;
}
function visiblepad(num, len){
if (!checkpads(num, len))
return '';
var padded=num
while (padded.length<len)
padded='0'+padded
return padded
}
function invisiblepad(num, len){
if (!checkpads(num, len))
return '';
var padded=''
while (padded.length+num.length<len)
padded+='0'
return '<span style="visibility:hidden;">'+padded+'</span>'+num
}
</script>
</head>
<body>
<form>
Number to be padded:
<input type="text" onchange="if (!isNaN(this.value)) document.getElementById('numarea').innerHTML=this.value;" onfocus="this.value=''" value="[Enter Number]">
Padding:
<select>
<option selected value="0">[Select Padding]
<option value="2">Pad to Two
<option value="3">Pad to Three
<option value="4">Pad to Four
</select>
<br>
<input type="button" value="Pad Number" onclick="document.getElementById('numarea').innerHTML=visiblepad(this.form[0].value, this.form[1].options[this.form[1].selectedIndex].value)">
<input type="button" value="Invisible Pad" onclick="document.getElementById('numarea').innerHTML=invisiblepad(this.form[0].value, this.form[1].options[this.form[1].selectedIndex].value)">
</form>
Landing Area:<br>
<div id="numarea"></div>
</body>
</html>
Bookmarks