Insert Only Numbers Using jQuery

Today i will tell you how to make custom validation using jQuery, this validation allows only numbers to insert in the input field.

Demo: https://jsfiddle.net/javedfiddle/g9z57pew/

HTML

<input type="text" name="numbers" class="numbers" placeholder="Enter Only Numbers" />

JQuery

$(".numbers").keypress(function (e) {
//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
return false;
}
});

Complete Webpage

<html>
<head>
<title>Insert Only Numbers Using jQuery</title>
</head>
<body>
<input type="text" name="numbers" class="numbers" placeholder="Enter Only Numbers" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(".numbers").keypress(function (e) {
//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
return false;
}
});
</script>
</body>
</html>

Demo: https://jsfiddle.net/javedfiddle/g9z57pew/

Leave your comments and share this tutorial with your friends, if you find this tutorial helpful.🙂

Required and Readonly using jQuery

Sometimes we need to make field readonly along with required attribute but unfortunately, readonly and required do not work together just because if field is required than it can not be readonly so user must need to enter data in it. I was also stuck in a problem of using them together when i was using jQuery DatePicker with required format and i don’t want user to type value but just click on icon and select date as per required format. Below code can help you to achieve it.

Demo: https://jsfiddle.net/javedfiddle/LbyL4ar9/

HTML

<form action="" method="">
<input type="text" name="date" class="date readonly" placeholder="DD/MM/YYYY" required /><br /><br />
<input type="submit" value="Submit" />
</form>

JQuery

// To make field readonly
$(".readonly").keydown(function(e){
e.preventDefault();
});

// To user jQuery DatePicker
$(function() {
$( ".date" ).datepicker({
dateFormat : 'dd/mm/yy',
showOn: "button",
buttonImage: "https://htmlcssphptutorial.files.wordpress.com/2015/09/b_calendar.png",
buttonImageOnly: true,
buttonText: "Select date"
});
});

Complete Code

<html>
<head>
<title>Required and Readonly using jQuery</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
</head>
<body>
<form action="" method="">
<input type="text" name="date" class="date readonly" placeholder="DD/MM/YYYY" required /><br /><br />
<input type="submit" value="Submit" />
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
// To make field readonly
$(".readonly").keydown(function(e){
e.preventDefault();
});

// To user jQuery DatePicker
$(function() {
$( ".date" ).datepicker({
dateFormat : 'dd/mm/yy',
showOn: "button",
buttonImage: "https://htmlcssphptutorial.files.wordpress.com/2015/09/b_calendar.png",
buttonImageOnly: true,
buttonText: "Select date"
});
});
</script>
</body>
</html>

Demo: https://jsfiddle.net/javedfiddle/LbyL4ar9/

Leave your comments and share this tutorial with your friends, if you find this tutorial helpful.🙂

jQuery Datepicker with Icon

Today i will explain how to use jQuery Datepicker with Icon, it is very simple to use. We need the following libraries to use it.

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

jQuery Datepicker with Icon

Demo: https://jsfiddle.net/javedfiddle/v0nmpdx9/

HTML

In the below HTML i used class data for jQuery Datepicker and made it readonly so that user can not type date in this input field, they should need to insert date via calendar icon button then date will be entered as per our given format in JQuery.

<input type="text" name="date" class="date" readonly placeholder="DD/MM/YYYY" />

JQuery

Change buttonImage URL, make sure you first upload image on your host then link to it. You can also change date format as per your need such as dd-mm-yy or set mm-dd-yy anything you wish. If you want that calendar should open when click on input field so change showOn: “button” to showOn: “both”.

$(function() {
 $( ".date" ).datepicker({
 dateFormat : 'dd/mm/yy',
 showOn: "button",
 buttonImage: "https://htmlcssphptutorial.files.wordpress.com/2015/09/b_calendar.png",
 buttonImageOnly: true,
 buttonText: "Select date"
 }); 
}); 

Complete Page

<html>
<head>
<title>jQuery Datepicker with Icon</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
</head>
<body>
<input type="text" name="date" class="date" readonly placeholder="DD/MM/YYYY" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
 $( ".date" ).datepicker({
 dateFormat : 'dd/mm/yy',
 showOn: "button",
 buttonImage: "https://htmlcssphptutorial.files.wordpress.com/2015/09/b_calendar.png",
 buttonImageOnly: true,
 buttonText: "Select date"
 }); 
}); 
</script>
</body>
</html>

Demo: https://jsfiddle.net/javedfiddle/v0nmpdx9/

Leave your comments and share this tutorial with your friends, if you find this tutorial helpful.🙂

Dynamic Dependent Select Box using jQuery and Ajax

We often see dependent select box on the websites, when parent changes, its child select box automatically changes. Today i will explain that how it works, i will use example of country and cities, when someone select any country, cities of that country will be displayed automatically. Let me give you a quick review of this tutorial, all countries are fetching from database table name county, when someone select any country then it fetches the cities of that country without refresh or reload the page this is the power of Ajax which helps to retrieve data from database without refresh page.

Download Complete Source Code

Dynamic Dependent Select Box using jQuery and Ajax

Steps to Create Dynamic Dependent Select Box using jQuery and Ajax

  1. Create a Database
  2. Create Two Tables of County and City
  3. Create a Database Connection
  4. Create Index File with Ajax
  5. Create Action PHP File

1. Create a Database

Create a database with name parent_child_select. Simply execute the following query.

CREATE DATABASE parent_child_select;

2. Create Two Tables of County and City

Create two tables of county and city with name country and city. Simply execute the following queries. Or you can also import the attached sql file to create table with data which is available in download file.

CREATE TABLE IF NOT EXISTS `country` (
 `country_id` int(11) NOT NULL AUTO_INCREMENT,
 `country_name` varchar(50) NOT NULL,
 PRIMARY KEY (`country_id`)
 );

CREATE TABLE IF NOT EXISTS `city` (
 `city_id` int(11) NOT NULL AUTO_INCREMENT,
 `city_name` varchar(50) NOT NULL,
 `country_id` varchar(50) NOT NULL,
 PRIMARY KEY (`city_id`)
 );

3. Create a Database Connection

Simply create a file with name db.php and paste the below code there.

$hostname = "localhost";
$user = "root";
$password = "";
$database = "parent_child_select";
$bd = mysql_connect($hostname, $user, $password) 
or die("DB Connection Failed!");
mysql_select_db($database, $bd) or die("DB Connection Failed!");

4. Create Index File with Ajax

Create a file with name index.php and paste the below code there. I will add the Ajax code in the footer of this file.

<html>
<head>
<title>Dynamic Dependent Select Box using jQuery and Ajax</title>
</head>
<body>
<div>
<label>Country :</label><select name="country" class="country">
<option selected="selected" value="0">Select Country</option>
<?php
include('db.php');
$sql=mysql_query("select * from country");
while($row=mysql_fetch_array($sql))
{
echo '<option value="'.$row['country_id'].'">'.$row['country_name'].'</option>';
} ?>
</select><br/><br/>
<label>City :</label><select name="city" class="city">
<option selected="selected">Select City</option>
</select>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".country").change(function()
{
var id=$(this).val();
var id_String = 'id='+ id;

$.ajax
({
type: "POST",
url: "ajax_cities.php",
data: id_String,
cache: false,
success: function(citydata)
{
$(".city").html(citydata);
} 
});

});
});
</script>
</body>
</html>

5. Create Action PHP File

Create a file with name ajax_cities.php and paste the below code there.

include('db.php');
if($_REQUEST['id'])
{
$id=$_REQUEST['id'];
if($id==0){echo "<option>Select City</option>";}else{
$sql=mysql_query("select * from city where country_id='$id'");
while($row=mysql_fetch_array($sql))
{
echo '<option value="'.$row['city_id'].'">'.$row['city_name'].'</option>';
}
}
}

Download Complete Source Code

Leave your comments if you find this tutorial helpful.

Remove .PHP Extension from URL using .htaccess

We do see many PHP URLs without .php extension this can easily be achieved simply adding the following in .htaccess file.

Note: .htaccess file must be placed in the directory where PHP files are placed.

.htaccess code

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}\.php -f
#RewriteRule ^(.*)$ $1.php #enable it <= if / is not required after URL
RewriteRule ^(.*)/$ $1.php [L] #disable it <= if / is not required after URL
</IfModule>

After this create a file of PHP in the same folder then you can access that URL without .php extension. I have also placed slash in the end of URL if you don’t want it so simply disable last time by # comment and enable second last line by removing # before it in the above htaccess code.

Example URL with Slash:

http://localhost/tutorials/Extensionless/newpage/

Example URL without Slash:

http://localhost/tutorials/Extensionless/newpage

Leave your comments if you find this tutorial helpful.