Creating function to use many times

Question

Thank you in advance of any help... I am really new to PHP and Javascript - but I am enjoying the experience. I have 2 field on a form that needed to accept only positive integers and using the code and comments from jQuery: what is the best way to restrict "number"-only input for textboxes? (allow decimal points) I was able to come up with the following code, which if switched to include the decimal place will also check that the user has only entered 1 decimal place:

     $(document).ready(function() { 
     $("#NoOfClients").keypress(function(event) {
        // Backspace, tab, enter, end, home, left, right
        // We don't support the del key in Opera because del == . == 46.
        // Add 46 to ControlKeys for allowing decimal point
        var controlKeys = [8, 9, 13, 35, 36, 37, 39];
        // IE doesn't support indexOf
        var isControlKey = controlKeys.join(",").match(new RegExp(event.which));
        var hasDecimalPoint = (($(this).val().split('.').length-1)>0);
        // Some browsers just don't raise events for control keys. Easy.
        // e.g. Safari backspace.
        if (!event.which || // Control keys in most browsers. e.g. Firefox tab is 0
        (49 <= event.which && event.which <= 57) || // Always 1 through 9
        (48 == event.which && $(this).attr("value")) || // No 0 first digit
        (isControlKey && !hasDecimalPoint)) { // Opera assigns values for control keys.
           return;
        } else {
           event.preventDefault();
        }
     });
     $("#NoOfClientContacts").keypress(function(event) {
        // Backspace, tab, enter, end, home, left, right
        // We don't support the del key in Opera because del == . == 46.
        // Add 46 to ControlKeys for allowing decimal point
        var controlKeys = [8, 9, 13, 35, 36, 37, 39];
        // IE doesn't support indexOf
        var isControlKey = controlKeys.join(",").match(new RegExp(event.which));
        var hasDecimalPoint = (($(this).val().split('.').length-1)>0);
        // Some browsers just don't raise events for control keys. Easy.
        // e.g. Safari backspace.
        if (!event.which || // Control keys in most browsers. e.g. Firefox tab is 0
        (49 <= event.which && event.which <= 57) || // Always 1 through 9
        (48 == event.which && $(this).attr("value")) || // No 0 first digit
        (isControlKey && !hasDecimalPoint)) { // Opera assigns values for control keys.
           return;
        } else {
           event.preventDefault();
        }
     });
     });

As you can see both controls are identical... what I want to do is make the keypress function a stand alone function so I can include it when defining the form input.... but I haven't got a clue where to start.

Sorry if I've use the wrong terminology - but learning all the time. If I manage to work it out (or get close) I will post the answer here.

score 1 · Accepted Answer · answered May 17 '16 at 11:33

The .keypress receive function as argument, you can send a named function pointer

function handleKey(event) {
    // Backspace, tab, enter, end, home, left, right
    // We don't support the del key in Opera because del == . == 46.
    // Add 46 to ControlKeys for allowing decimal point
    var controlKeys = [8, 9, 13, 35, 36, 37, 39];
    // IE doesn't support indexOf
    var isControlKey = controlKeys.join(",").match(new RegExp(event.which));
    var hasDecimalPoint = (($(this).val().split('.').length-1)>0);
    // Some browsers just don't raise events for control keys. Easy.
    // e.g. Safari backspace.
    if (!event.which || // Control keys in most browsers. e.g. Firefox tab is 0
    (49 <= event.which && event.which <= 57) || // Always 1 through 9
    (48 == event.which && $(this).attr("value")) || // No 0 first digit
    (isControlKey && !hasDecimalPoint)) { // Opera assigns values for control keys.
        return;
    } else {
        event.preventDefault();
    }
}

use:

$(document).ready(function() { 
     $("#NoOfClients").keypress(handleKey);
     $("#NoOfClientContacts").keypress(handleKey);
 });

score 1 · Answer 2 · answered May 17 '16 at 11:34

yes , you can try something like below -

 function inputHandler(elem){
     $(elem).keypress(function(event) {
        // Backspace, tab, enter, end, home, left, right
        // We don't support the del key in Opera because del == . == 46.
        // Add 46 to ControlKeys for allowing decimal point
        var controlKeys = [8, 9, 13, 35, 36, 37, 39];
        // IE doesn't support indexOf
        var isControlKey = controlKeys.join(",").match(new RegExp(event.which));
        var hasDecimalPoint = (($(this).val().split('.').length-1)>0);
        // Some browsers just don't raise events for control keys. Easy.
        // e.g. Safari backspace.
        if (!event.which || // Control keys in most browsers. e.g. Firefox tab is 0
        (49 <= event.which && event.which <= 57) || // Always 1 through 9
        (48 == event.which && $(this).attr("value")) || // No 0 first digit
        (isControlKey && !hasDecimalPoint)) { // Opera assigns values for control keys.
           return;
        } else {
           event.preventDefault();
        }
     });
  }

You can call this function for multiple inputs like below -

 inputHandler('#NoOfClients');
 inputHandler('#NoOfClientContacts');

Creating function to use many times

2 Answers2