Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    jQuery, numbers only in a textbox help!

    Hey guys. So I'm trying to make something like a calculator and I want the user to be able to input numbers only. If he inputs letters to give him alert and then reset back.

    This is how I imagine this:
    Code:
    $('#numberbox').keydown(function()
    {
    	var notnumber = $("#numberbox").val();
    	if(notnumber==string){
    		alert("PLEASE USE NUMBERS ONLY!");
    		$('#numberbox').reset();
    	}
    })
    But unfortunately it doesn't work. I'm not a pro or anything so please help me out I'm just starting to learn Javascript/jquery.
    Thanks.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,155
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    ??? There is no such keyword as just string in JavaScript.

    And in any case the .val( ) of any form field will *ALWAYS* be a String.

    You have to TEST to see if that string value is numeric.

    Try this:
    Code:
    $('#numberbox').keydown(function()
    {
    	if( isNaN(this.value) ){
    		alert("PLEASE USE NUMBERS ONLY!");
    		$('#numberbox').reset();
    	}
    })
    NOTE: That *WILL* allow the user to enter numbers such as "-7" or "73.112". If you truly want only *DIGITS* then:
    Code:
    $('#numberbox').keydown(function()
    {
    	if( ! (/^\d+$/).test(this.value) ){
    		alert("PLEASE USE DIGITS ONLY!");
    		$('#numberbox').reset();
    	}
    })
    I'm not sure you can use .reset() there. If not, just replace all that with this.value = "";

    That is:
    Code:
    $('#numberbox').keydown(function()
    {
    	if( ! (/^\d+$/).test(this.value) ){
    		alert("PLEASE USE DIGITS ONLY!");
    		this.value = "";
    	}
    })
    Finally, alert( ) calls are considered obsolete. Some browsers allow the users to disable all alerts. Worse, some allow the user to TURN OFF JAVASCRIPT when an alert() is displayed. You really need to find something better.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,155
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    As a minor snide comment about jQuery:

    Why use it for something this simple?

    You can do the same thing somewhat more efficiently in vanilla JavaScript.
    Code:
    document.getElementById("numberbox").onkeydown =
    function()
    {
    	if( ! (/^\d+$/).test(this.value) ){
    		alert("PLEASE USE DIGITS ONLY!");
    		this.value = "";
    	}
    };
    [/code]
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    On onkeydown, the field value does not yet include the key that was pressed. You have to check event.keyCode to determine if the key is a number and return true to allow it and false otherwise. But you also have to allow keys such as -, Del, Tab, Backspace, Ctrl, etc. It's better to validate on onkeyup, onpaste, onblur, or for modern browsers, oninput, which covers all possible ways of user inputs.

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,915
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Code:
    Numbers Only In Here <input type = "text" id = "mytext"  onkeyup="if(isNaN(value=parseInt(value))) {value=''}; if(value=='0'){value=''};">

    It's like two immovable objects colliding. - Commentator Radio 5 Live

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    That will not validate paste operation via context menu

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,915
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by glenngv View Post
    That will not validate paste operation via context menu
    OK. do the same check onblur.

    Code:
    Numbers Only In Here <input type = "text" id = "mytext"  onkeyup="if(isNaN(value=parseInt(value))) {value=''}; if(value=='0'){value=''};"  onblur="if(isNaN(value=parseInt(value))) {value=''}; if(value=='0'){value=''};" >

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #8
    New to the CF scene
    Join Date
    Sep 2013
    Location
    Sofia, Bulgaria
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You could use HTML5's pattern attribute and it it;s not supported fallback to javascript to check if the input is a number.
    Code:
    <input type="number" id="number" placeholder="input any number (or smth like that)" pattern="[-+]?[0-9]*[.,]?[0-9]+" required>
    If the browser does not support placeholder and pattern, then with some javascript you can simulate the effect with something like this

    Note: just use modernizr to check browser support
    Code:
    var $number = $('#number');
    
    if (!Modernizr.input.placeholder) {
    	$number.on('focus', function () {
    		if ($number.val($number.attr('placeholder'))) {
    			$number.val() = "";
    		}
    	}).on('blur', function () {
    		if ($number.val() === "") {
    			$number.val($number.attr('placeholder'))
    		}
    	})
    }
    
    if (!Modernizr.input.pattern) {
    	$number.on('blur', function () {
    		if (!$number.val($number.attr('placeholder'))) {
    			var chk = parseFloat($number.val());
    			if (isNan(chk)) {
    				// do something if value is not a number
    			}
    		}
    	})
    }
    I haven't tested the code, but i think it would work

  • #9
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    Quote Originally Posted by Philip M View Post
    OK. do the same check onblur.
    That's my point in post #4. I prefer to validate on oninput first for those browsers that support it and then fall back to onkeyup and onblur if not supported.

  • #10
    New to the CF scene
    Join Date
    Sep 2013
    Location
    Sofia, Bulgaria
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Just one thing to correct in my post (#8). make that <input type="text"... not "number" as number does not support the pattern attribute. Sorry for the mistake


  •  

    Posting Permissions

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