only number should be allowed using jquery

Question

4.00/5 (4 votes)

See more:

--the textbox id is txtdistanceops

--it should allow only numberic values

like 23
24.45
46

C#

$('#txtdistanceops').keydown(function(event) {
                     if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 )
                     {

                     }
                    else
                    {

                       if ((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 ))
                       {
                       event.preventDefault();

                       }
                   }
                });

--but this is not working

--aspx page

XML

<asp:TemplateField HeaderText="Approved Km By Ops">
                           <ItemTemplate>
                               <asp:TextBox ID="txtdistanceops" MaxLength="6" CssClass="textBox_for6tds" runat="server">  </asp:TextBox>
                               <asp:RegularExpressionValidator ID="revtxtdistanceops" runat="server" Display="Static"
                                   SetFocusOnError="True" ValidationExpression="[0-9]*\.?[0-9]*" ControlToValidate="txtdistanceops"></asp:RegularExpressionValidator>
                           </ItemTemplate>
                           <ItemStyle HorizontalAlign="center" />

--Altert message should be displayed immediatedly if except number anything else is pressed

Posted 15-Sep-13 1:37am

anurag19289

Updated 15-Nov-16 23:25pm

v2

Add a Solution

3 solutions

Solution 1

Try below one.

JavaScript

$(document).ready(function() {
    $("#txtboxToFilter").keydown(function(event) {
        // Allow: backspace, delete, tab, escape, and enter
        if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 || 
             // Allow: Ctrl+A
            (event.keyCode == 65 && event.ctrlKey === true) || 
             // Allow: home, end, left, right
            (event.keyCode >= 35 && event.keyCode <= 39)) {
                 // let it happen, don't do anything
                 return;
        }
        else {
            // Ensure that it is a number and stop the keypress
            if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
                event.preventDefault(); 
            }   
        }
    });
});

For more info :

http://stackoverflow.com/questions/995183/how-to-allow-only-numeric-0-9-in-html-inputbox-using-jquery[^]

I hope this will help to you.

Posted 15-Sep-13 3:06am

Sampath Lokuge

Updated 15-Sep-13 5:06am

v5

Comments

anurag19289 15-Sep-13 10:24am

Sampath-

when i write event then followed by .(dot)

i m not getting[preventDefault] event.preventDefault.

Am i missing anything.

its not working.

Sampath Lokuge 15-Sep-13 10:27am

Is your editor VS 2012 ?

Sampath Lokuge 15-Sep-13 10:34am

If it's a vs 2010,you can use below article for add Intellisense.(I have written this article).
How to Enable jQuery Intellisense in Visual Studio 2010?:
http://sampathloku.blogspot.com/2012/09/how-to-enable-jquery-intellisense-in-vs.html

Menon Santosh 15-Sep-13 11:07am

my +5

Sampath Lokuge 15-Sep-13 11:31am

Thanks :)

anurag19289 17-Sep-13 13:58pm

i m using <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

and its visual studio 2008

Sampath Lokuge 18-Sep-13 3:22am

Check below link for vs 2008 Intellisense with java script.
http://weblogs.asp.net/scottgu/archive/2007/06/21/vs-2008-javascript-intellisense.aspx

Solution 3

visit here......

http://www.aspsnippets.com/Articles/Numeric-Validation-Accept-only-numeric-values-numbers-in-TextBox-using-jQuery.aspx[^]

or

http://www.aspdotnet-suresh.com/2012/11/jquery-restrict-to-allow-only-numbers.html[^]

Posted 17-Sep-13 1:50am

Rakesh Meel

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Ashishmau · Accepted Answer · 2013-09-17T01:46:00

Solution 2

see this

http://www.aspdotnet-suresh.com/2013/04/jquery-allow-only-numbers-in-textbox.html[^]

I had modified the function given in above link as per your need and pasted as below...you can chk..hope it helps..

XML

<script type="text/javascript">
    var IsNumber = true;
    $(function () {
        $('#txtNumeric').keydown(function (e) {
            if (e.shiftKey || e.ctrlKey || e.altKey) {
                e.preventDefault();
                IsNumber = false;
            } else {
                var key = e.keyCode;
                if (!((key == 8) || (key == 46) || (key >= 35 && key <= 40) || (key >= 48 && key <= 57) || (key >= 96 && key <= 105))) {
                    e.preventDefault();
                    IsNumber = false;
                }
                else {
                    IsNumber = true;
                }
            }

        });
        $('#txtNumeric').keyup(function (e) {
            if (!IsNumber) {
                alert("Number only");
            }
        });

    });
</script>

Posted 17-Sep-13 1:46am

Ashishmau

Updated 17-Sep-13 22:40pm

v3

Comments

anurag19289 17-Sep-13 14:07pm

<head runat="server">
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function() {
$('#TextBox1').keydown(function(e) {
if (e.shiftKey || e.ctrlKey || e.altKey) {
e.preventDefault();
} else {
var key = e.keyCode;
if (!((key == 8) || (key == 46) || (key >= 35 && key <= 40) || (key >= 48 && key <= 57) || (key >= 96 && key <= 105)))
{
e.preventDefault();
alert("Please enter numeric value!");

}
}
});
});
</script>

-- i was trying to have an alert [message box] type error.

--but this is giving alert message but the character[like a] is entered in textbox

anurag19289 17-Sep-13 14:10pm

one way is found --> reset the textbox after the alert message

<head runat="server">
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function() {
$('#TextBox1').keydown(function(e) {
if (e.shiftKey || e.ctrlKey || e.altKey) {
e.preventDefault();
} else {
var key = e.keyCode;
if (!((key == 8) || (key == 46) || (key >= 35 && key <= 40) || (key >= 48 && key <= 57) || (key >= 96 && key <= 105)))
{
e.preventDefault();
alert("Please enter numeric value!");
$('#TextBox1').val('');

}
}
});
});
</script>

-->please let me know how we can display a message box error when any non numeric key is entered

anurag19289 17-Sep-13 14:13pm

And one more doubt
is src="http://code.jquery.com/jquery-1.8.2.js"

is this src standard ? is it going to work everywhere ?

Ashishmau 18-Sep-13 4:41am

see i had updated my answer as per your need and now you can check...

anurag19289 18-Sep-13 8:36am

i m trying this in home..its working

but when i tried this in office as below its not working:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ApprovingKm.aspx.cs" Inherits="TMSWeb.Masters_Route_ApprovedKm" %>

<%@ Register Src="../../UserControls/ContextMenu.ascx" TagName="ContextMenu" TagPrefix="uc3" %>
<%@ Register Src="../../UserControls/CustomDataView.ascx" TagName="CustomDataView"
TagPrefix="uc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<%HeaderHTML("Approving Km", 2, 0);%>
<body>
<link href="../../Utility/Style/TMS.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="../../Utility/JavaScript/wz_tooltip.js"></script>

<script type="text/javascript" language="javascript"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
.selected
{
background-color: #A1DCF2;
}
</style>

<script type="text/javascript">
$(function() {
$('#txtdistanceops').keydown(function(e) {
if (e.shiftKey || e.ctrlKey || e.altKey) {
e.preventDefault();
} else {
var key = e.keyCode;
if (!((key == 8) || (key == 46) || (key >= 35 && key <= 40) || (key >= 48 && key <= 57) || (key >= 96 && key <= 105)))
{
e.preventDefault();
alert("Please enter numeric value!");
$('#txtdistanceops').val('');

}
}
});
});
</script>

anurag19289 18-Sep-13 8:53am