Reference function inside seperate javascript file on window.load

Question

I have the following function which only allows for numerical characters to be entered in to the textbox. This is located inside common.js along with other global functions.

 function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode != 46 && charCode > 31
        && (charCode < 48 || charCode > 57))
        return false;

    return true;
  }

Now inside another javascript file I have the following code, what I'm trying to achieve is bind the on keypress event of the textbox mobilenumber to the function mentioned above located in the common.js file I have made a reference to that common.js as follows:

/// <reference path="common.js" /> 

window.onload = function () {
      document.getElementById('mobilenumber').keypress = isNumberKey(this.keypress);
};

But the error I receive is

isNumberKey is not defined $('mobilenumber').keypress = isNumberKey(this.keypress);

When I view source to check the naming conventions this is how it is rendered:

<input id="mobilenumber" class="form-control" type="text" value="" placeholder="Your Mobile Number" name="MobileNumber" data-val-maxlength-max="15" data-val-maxlength="Mobile number can not be longer then 15 characters" data-val="true">

I'm not sure where I'm going wrong with this? any help would be appreciated.

Update

Ok so I moved both javascript files into one file called common as shown here:

$(document).ready(function () {

document.getElementById('mobilenumber').keypress = isNumberKey(this.keypress);

function isNumberKey(evt) {

    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {

        return false;

    }
    return true;

}
});

When the page load instead of binding it, it calls it which gives me an error saying evt if undefined which I understand because nothing has been entered, why is it calling it? and how can I just bind it without having to call it?

I'm currently using bundles in MVC, and at the bottom of the page I use @Scripts.Render("~/bundles/NAME") when I view the source I can see both files, common and the profile.js — Code Ratchet, Mar 01 '15 at 05:10
Try `document.getElementById('mobilenumber').keypress = isNumberKey;` ; `isNumberKey(this.keypress)` appear calling `isNumeric` immediately ? , also `this` is `document` at that context — guest271314, Mar 01 '15 at 05:36
tried that, and I still get the same error evt is undefined var charCode = (evt.which) ? evt.which : evt.keyCode; — Code Ratchet, Mar 01 '15 at 05:37
Sorry I added brackets to the end of what you suggested i.e isNumberKey(); I removed the brackets and the error went away but when I type in the box it allows me to enter characters and numerical values. it should only allow for numerical characters — Code Ratchet, Mar 01 '15 at 05:39

score 1 · Accepted Answer · answered Mar 01 '15 at 05:47

Try

$("#mobilenumber").on("input", function(e) {
  return $(this).prop("value", function(_, val) {
    return val.replace(/[^\d]/, "").slice(0, 15)
  })
});

$("#mobilenumber").on("input", function(e) {
  return $(this).prop("value", function(_, val) {
    return val.replace(/[^\d]/, "").slice(0, 15)
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="mobilenumber" class="form-control" type="text" value="" placeholder="Your Mobile Number" name="MobileNumber" data-val-maxlength-max="15" data-val-maxlength="Mobile number can not be longer then 15 characters" data-val="true">

score 0 · Answer 2 · edited May 23 '17 at 11:50

0

JavaScript has no import, include, or require. There are other ways for JavaScript to include external JavaScript contents, though...

From: How do I include a JavaScript file in another JavaScript file?

Perhaps try keeping both the function and the attachment of the event handler in one file.

edited May 23 '17 at 11:50

Community

1
1

answered Mar 01 '15 at 05:10

Stephen Rodriguez

1,037
1
12
22

thanks for that, I also done what you suggested i.e put everything in one file but I get an error I've updated the question – Code Ratchet Mar 01 '15 at 05:22

score 0 · Answer 3 · answered Mar 01 '15 at 05:39

0

Reference function inside seperate javascript file on window.load

3 Answers3