How to create an event listener?

[JulieCanada2]

Hello,

How do I add an event listener to a few text boxes that prevents the user from typing anything but digits. I use the numbers entered in the text boxes in calculations afterwards so I don't want the user to enter "one" instead of "1" etc... Also, the range of possible numbers is too big for a drop down menu.

Please help :-)

Thanks!

Julie

[Buddy Bradley]

my_input.onkeyup = function () {
	this.value = this.value.replace(/\D/g,'');
}

[JulieCanada2]

Thanks to both of you for your suggestions. I will try both... First of all, for this one:

my_input.onkeyup = function () {
	this.value = this.value.replace(/\D/g,'');
}

I assume I place the above code in my js file. Now what do I need to add in my text input line to call the above code in my js file?:

<input name="txtTest" type="text" id="txtTest" size="4" maxlength="4" tabindex="1">

I know how to call a function from a input field to validate if text has been entered but I'm not familiar with the way the above code is written. Also, what does this code (/\D/g,''); mean? A more detailed explaination would be greatly appreciated!

Thanks for your help!

Julie

[Buddy Bradley]

I assume I place the above code in my js file. Now what do I need to add in my text input line to call the above code in my js file?

<input name="txtTest" type="text" id="txtTest" size="4" maxlength="4" tabindex="1">

<script type="text/javascript">
document.getElementById('txtTest').onkeyup = function () {
	this.value = this.value.replace(/\D/g,'');
}
</script>

Also, what does this code (/\D/g,''); mean? A more detailed explaination would be greatly appreciated!

It is a regular expression - the forward-slashes are the delimiters, the \D means 'match any non-numeric character', and the 'g' at the end means global, as in do it as many times as is needed. It is replacing all non-numeric characters in the string with a blank - i.e. deleting them.

[JulieCanada2]

It works! Thanks a lot!

Have a great day!

Julie

[dwees]

What I would do is use the 'onblur' event of the textbox, and then validate for a numeric response there.

So for instance:

<input type="text" size="10" onblur="checkNumeric(this)" />

and use the following Javascript in your head.

function checkNumeric(el) {
      if (!el.value) {
           alert("You must enter a value");
           el.focus();
           return false;
      }
      if (parseInt(el.value)==el.value) return true;
      alert("You must enter a numeric value");
      el.focus();
      return false;
}

[dwees]

Looks like to me that you won't need to add anything, just change my_input to txtTest.

Dave