SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Converting function that repeats many times...

    Hello,

    I have a function that I use to prevent users from entering anything but numbers in fields. This function works perfectly but it repeats many times in my code like this:
    Code:
    <input name="txtInput1" type="text" id="txtInput1" size="4" maxlength="4" tabindex="1">
    <script type="text/javascript">		
    document.getElementById('txtInput1').onkeyup = function () {
    this.value = this.value.replace(/\D/g,'');
    }
    </script>
    So if I have 30 input fields, this function repeats 30 times... which doesn't make sense. I started to convert it to a global function that will be written only once within the <head> and each input field will call the function. This is what I tried:

    Code:
    In the head:
    <script type="text/javascript">
    function functionNumbers() {
    this.value = this.value.replace(/\D/g,'');
    }
    </script>
    
    The input field:
    <input type="text" name="Tuition" size="15" tabindex="32" onkeyup="functionNumbers(Tuition)">
    It doesn't work. I tried 2 or 3 different ways such as 'Tuition' with the single quotes etc. There's obviously something I'm not getting...

    Thanks!
    Julia

  2. #2
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In this event handler:
    Code:
    onkeyup="functionNumbers(Tuition)"
    Tuition is a variable name, and it is undefined. You could remedy that like this:
    Code:
    onkeyup="functionNumbers(this)"
    That will pass a reference to the html element to the function, and then you can do this:
    Code:
    function functionNumbers(theElmt) {
    theElmt.value = theElmt.value.replace(/\D/g,'');
    }
    However, why not go all the way and remove all the js from the html?
    Code:
    window.onload = function()
    {
         var inputs = document.forms["myFormName"].getElementsByTagName("input");
         for(var i = 0; i<inputs.length; ++i)
         {
              if(inputs[i].type == "text")
              { 
                     inputs[i].onkeyup = function()
                     {
                              this.value = this.value.replace(/\D/g,'')
                     }
               }
          }
    }
    When you assign a function to an event handler like that, then inside the function, 'this' refers to the element upon which the event is taking place.

  3. #3
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    function functionNumbers(obj) {
    obj.value = obj.value.replace(/\D/g,'');
    }
    
    .....
    onkeyup="functionNumbers(this);"

  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're regressing. There's no need for inline event handlers.

    Some browsers will move the cursor to the beginning if you change the value via one of the key events, so use the onblur event instead.

    Code:
    <script type="text/javascript">
    function allowOnlyNumbers(el) {
      el.value = el.value.replace(/\D/g,'');
    }
    window.onload = function() {
      document.getElementsByName('Tuition')[0].onblur = function(){
        allowOnlyNumbers(this);
      }
    }
    </script>
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  5. #5
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think a key point of the OP was "repeats many times". Not once, not all the time. Can you show me a way of doing that without inline event handlers that does not include reams of superfluous javascript with arrays/objects defined, or "class='niceTextBox CHECKFORNUMBERS'" or such nonsense?

    The inline event handler in this case keeps things simple.

  6. #6
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why does a little extra code matter? (I do mean a little. Some people will write very silly amounts of code.) And what's wrong with classes? This is a perfect example of a good use for one.

    I suggest you read about modern JavaScript Best Practices.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  7. #7
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by 7stud View Post
    When you assign a function to an event handler like that, then inside the function, 'this' refers to the element upon which the event is taking place.
    Thanks a lot! It's much clearer now. Have a great day

    Julia


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •