jQuery Convert string to number


 

jQuery Convert string to number

In this tutorial , we will discuss about how to convert string (enter into input box) into number.

In this tutorial , we will discuss about how to convert string (enter into input box) into number.

jQuery Convert string to number

In this tutorial , we will discuss about how to convert string (enter into input box) into number. In this example, a registration page is developed using jQuery plug-in . The value entered here for age is restricted inside range(18 yrs to 35 yrs). For this you need to fetch it from input and also need to convert into number. We can do this by following line :

<parseInt($("#quantity").val(), 10)

We are checking it for range using following lines :

if((parseInt($("#quantity").val(), 10)<18))
{
$("#errmsg").html("&nbsp;&nbsp;Age must be greater than 18").show();

}
if((parseInt($("#quantity").val(), 10)>35))
{
$("#errmsg").html("&nbsp;&nbsp;Age must be less than 35").show();
}

You can click on below link to know the details about the plug in with example :

http://www.roseindia.net/tutorial/jquery/formValidation.html

Complete example is given below :

string2number.html

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>textbox to accept only numbers (digits)</title>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript">

$(document).ready(function(){

//called when key is pressed in textbox
$("#quantity").keypress(function (e)
{
$("#errmsg").hide();
//if the letter is not digit then display error and don't type anything
if( e.which!=8 && e.which!=0 && (e.which<48 || e.which>57))
{
//display error message
$("#errmsg").html("&nbsp;&nbsp;Digits Only").show();
return false;
}
});
$('#quantity').blur(function(a) {
if((parseInt($("#quantity").val(), 10)<18))
{
$("#errmsg").html("&nbsp;&nbsp;Age must be greater than 18").show();

}
if((parseInt($("#quantity").val(), 10)>35))
{
$("#errmsg").html("&nbsp;&nbsp;Age must be less than 35").show();
}
});
//FOR EMAIL ADDRESS
$("#form").validate({
rules: {
name: "required",// simple rule, converted to {required:true}
email: {// compound rule
required: true,
email: true
},
url: {
url: true
},
comment: {
required: true
}
},
messages: {
comment: "Please enter a comment."
}
});
});
</script>
<style type="text/css">
* { font-family: Verdana; font-size: 11px; line-height: 14px; }
.submit { margin-left: 125px; margin-top: 10px;}
.label { display: block; float: left; width: 120px; text-align: right; margin-right: 5px; }
.form-row { padding: 10px 0; clear: both; width: 800px; }
label.error { width: 250px; display: block; float: left; padding-left: 10px; }
input[type=text], textarea { width: 250px; float: left; }
textarea { height: 50px; }
</style>
</head>
<body>
<h3><font color="blue">Please enter the following information</font></h3>

<form id="form" method="post" action="formValidation.jsp">
<div class="form-row"><span class="label">Name *</span><input type="text"
name="name" id="namei"/></div>
<div class="form-row"><span class="label">E-Mail *</span><input type="text"
name="email" id="emaili"/></div>

<div class="form-row"><span class="label">URL</span><input type="text"
name="url" id="urli" /></div>
<div class="form-row"><span class="label">Age</span><input type="text"
name="quantity" id="quantity" /></div>
<div class="label.error" id="errmsg"></div>
<div class="form-row"><span class="label">Your comment *</span><textarea
name="comment" id="commenti"></textarea></div>
<div class="form-row"><input class="submit" type="submit" value="Submit"
name="submit" id="submiti"></div>
</form>
</body>
</html>

OUTPUT

If you enter alphabet/special character inside age input box :

If you enter number greater than 35 years :

Download Source Code

Click here to see demo

Ads