isNumeric not testing all form fields

Question

im trying to create a form that takes 3 values, a name, a weight and height. i want to force the user to only enter numbers and not letters, so using the isNumeric this works but only for WEIGHT, not height.

this is the current code

<script type='text/javascript'>
function isNumeric(elem, helperMsg){
    var numericExpression = /^[0-9]+$/;
    if(elem.value.match(numericExpression)){
        return true;
    }else{
        alert(helperMsg);
        elem.focus();
        return false;
    }
}
</script>
        <form name="input" action="calc.html" method="get">
        Name: <input type="text" id="firstname"     maxlength="20"><br>
        Weight(KG): <input type="text" id="weight"><br>
        Height(CM): <input type="text" id="height"><br>
<input type='button'
    onclick="isNumeric(document.getElementById('weight'), 'Numbers Only Please')"
    value='Check Field' />
</form>

i tried several things in order to incorporate the Height field as well such as ('weight')('height') or ('weight'&&'height') and even writing the whole line twice but with Height instead.

any help in solving this would be welcome.

http://jsfiddle.net/gv7y7vp1/ here is your sample but with height field, please edit there to show us what you tried. — Amr Elgarhy, Aug 18 '14 at 20:15

Zach Spencer · Answer 1 · 2014-08-18T20:23:13.953

If you must do it this way, try this instead.

<script type='text/javascript'>
function isNumeric(elem, helperMsg){
    var numericExpression = /^[0-9]+$/;
    if(elem.value.match(numericExpression)){
        return true;
    }else{
        alert(helperMsg);
        elem.focus();
        return false;
    }
}
</script>
        <form name="input" action="calc.html" method="get">
        Name: <input type="text" id="firstname"     maxlength="20"><br>
        Weight(KG): <input type="text" id="weight"><br>
        Height(CM): <input type="text" id="height"><br>
<input type='button'
    onclick="isNumeric(document.getElementById('weight'), 'Numbers Only Please') && isNumeric(document.getElementById('height'), 'Numbers Only Please')"
    value='Check Field' />
</form>

Sidenote: Inline javascript is never a good idea, it makes it much harder to maintain your code. If I were you, I would rewrite your code to something like this:

<script type='text/javascript'>
window.onload = function() {

    document.getElementById("click-button").onclick = function() {
        return isNumeric(document.getElementById('weight'), 'Numbers Only Please') && isNumeric(document.getElementById('height'), 'Numbers Only Please');
    }

    function isNumeric(elem, helperMsg) {
        var numericExpression = /^[0-9]+$/;
        if (elem.value.match(numericExpression)) {
            return true;
        } else {
            alert(helperMsg);
            elem.focus();
            return false;
        }
    }
};

</script>
        <form name="input" action="calc.html" method="get">
        Name: <input type="text" id="firstname"     maxlength="20"><br>
        Weight(KG): <input type="text" id="weight"><br>
        Height(CM): <input type="text" id="height"><br>
<input id="click-button" type='button'
    value='Check Field' />
</form>

score 0 · Answer 2 · answered Aug 18 '14 at 20:20

What's your use case like for this? I think it might be easier to have a function validate() that checks all the fields. I ask about the use case because you'd have to tailor the function to fit these three categories- it looks like you are trying to be a little more "Object Oriented" than that.

Example in pseudocode:

function validate() {
    get name form from page
        check that name is valid
        if its not, show error message
    get height form from page
        check that height is valid
        if its not, show error message
    get weight form from page
        check that weight is valid
        if its not, show error message
    everything good? then proceeed to the next step
}

I can show you it using some real code if you're confused.

Alternatively, you could edit your isNumeric() function to accept the element which calls it. Instead of passing it the element, every element that is assigned isNumeric() as its onclick would work. The function would use the this keywork to access the relevant data (something like this.value).

isNumeric not testing all form fields

2 Answers2