Simple And Really Cool Page turning Animation in JQUERY With TURN.JS

Guys This is just a demo how to implement turn.js you can find the demo below.

turn.js is  a readymade file through which you can implement this animation effect.

You can google it and download it from github.

I just created a sample and will release the codes and  teach you guys how to implement turn.js

So stay tuned and for now you can check the demo.

And if you guys like it do comment

LIVE DEMO

Some basic selecting methods in JQUERY

The jQuery library allows you to select elements in your XHTML by wrapping them in $("") (you could also use single quotes), which is the jQuery wrapper. Here are some examples of “wrapped sets” in jQuery:

$("div"); // selects all HTML div elements

$("#myElement"); // selects one HTML element with ID "myElement"

$(".myClass"); // selects HTML elements with class "myClass"

$("p#myElement"); // selects HTML paragraph element with ID "myElement"

$("ul li a.navigation"); // selects anchors with class "navigation" that are nested in list items

jQuery supports the use of all CSS selectors, even those in CSS3. Here are some examples of alternate selectors: 

$("p > a"); // selects anchors that are direct children of paragraphs

$("input[type=text]"); // selects inputs that have specified type

$("a:first"); // selects the first anchor on the page

$("p:odd"); // selects all odd numbered paragraphs

$("li:first-child"); // selects each list item that's the first child in its list

jQuery also allows the use of its own custom selectors. Here are some examples: 

$(":animated"); // selects elements currently being animated

$(":button"); // selects any button elements (inputs or buttons)

$(":radio"); // selects radio buttons

$(":checkbox"); // selects checkboxes

$(":checked"); // selects checkboxes or radio buttons that are selected

$(":header"); // selects header elements (h1, h2, h3, etc.) 

Join our facebook group for more updates and many more simple and esy web application

Join our facebook group for more updates and many more simple and esy web application

https://www.facebook.com/groups/644359705655287/

On change query the database using JQUERY - PHP

This is a simple demo to show how to fetch values from database without page refresh in JQUERY / PHP

Minimal data is provided in the database , since this is just a  demo.

1. Create our database -- ('onselect') [My database name] {You can use your name}
2. Create our first table -- ('country') (id,name)
3. Create our second table states -- ('state') (id,country_id,state) [country_id in this case is the foreign key]
4. Create our third table city -- ('city') (id,state_id,city) [state_id is this case is the foreign key]

And Then add some demo values to all the tables....and you are almost done..

//////////////////////// sql for country table
-- phpMyAdmin SQL Dump
-- version 4.0.4
-- http://www.phpmyadmin.net
--
-- Host: localhost
-- Generation Time: Mar 15, 2014 at 08:56 AM
-- Server version: 5.1.30-community
-- PHP Version: 5.4.16

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;

--
-- Database: `onselect`
--

-- --------------------------------------------------------

--
-- Table structure for table `country`
--

CREATE TABLE IF NOT EXISTS `country` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(20) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;

--
-- Dumping data for table `country`
--

INSERT INTO `country` (`id`, `name`) VALUES
(1, 'India'),
(2, 'Bangladesh'),
(3, 'Pakistan'),
(4, 'China');

///////////////////// sql for our states table

-- phpMyAdmin SQL Dump
-- version 4.0.4
-- http://www.phpmyadmin.net
--
-- Host: localhost
-- Generation Time: Mar 15, 2014 at 09:01 AM
-- Server version: 5.1.30-community
-- PHP Version: 5.4.16

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;

--
-- Database: `onselect`
--

-- --------------------------------------------------------

--
-- Table structure for table `state`
--

CREATE TABLE IF NOT EXISTS `state` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `country_id` int(11) NOT NULL,
  `state` varchar(20) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=11 ;

--
-- Dumping data for table `state`
--

INSERT INTO `state` (`id`, `country_id`, `state`) VALUES
(1, 1, 'West Bengal'),
(2, 1, 'Maharastra'),
(3, 2, 'Chitagong'),
(5, 2, 'Dhaka'),
(6, 2, 'Sylhet'),
(7, 3, 'Balochistan'),
(8, 3, 'Khyber-Pakhtunkhwa'),
(9, 4, 'Beijing'),
(10, 4, 'Shanxi Province');


////////////////////////////////// sql for city table

-- phpMyAdmin SQL Dump
-- version 4.0.4
-- http://www.phpmyadmin.net
--
-- Host: localhost
-- Generation Time: Mar 15, 2014 at 09:03 AM
-- Server version: 5.1.30-community
-- PHP Version: 5.4.16

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;

--
-- Database: `onselect`
--

-- --------------------------------------------------------

--
-- Table structure for table `city`
--

CREATE TABLE IF NOT EXISTS `city` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `state_id` int(11) NOT NULL,
  `city` varchar(20) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=22 ;

--
-- Dumping data for table `city`
--

INSERT INTO `city` (`id`, `state_id`, `city`) VALUES
(1, 1, 'Kolkata'),
(2, 1, 'Medinipur'),
(3, 5, 'Rajshahi'),
(4, 5, 'Gazipur'),
(5, 6, 'Sunamganj'),
(6, 6, 'Angajur'),
(7, 2, 'Mumbai'),
(8, 2, 'Pune'),
(9, 2, 'Nagour'),
(10, 2, 'Thane'),
(11, 1, 'Asansol'),
(12, 1, 'Kharagpur'),
(13, 7, 'Quetta'),
(14, 7, 'Khuzdar'),
(15, 8, 'Peshawar'),
(16, 8, 'Abbottabad'),
(17, 8, 'Mingora'),
(18, 9, 'Dongcheng District'),
(19, 9, 'Xicheng District'),
(20, 10, 'Xinghualing District'),
(21, 10, 'Chengqu District');
------------------------------------------------------------------------------------------------------

Now lets start coding for our PHP

This is our index.php page

<?php
  require_once 'conn.php';
  include 'nav_func.php';
  $errors=array();
  if(isset($_POST['ADD']))
{
 $par = addslashes(trim($_POST['par']));
 //// checking for only alphbets in php
  if(!empty($par))
  {

   if(only_alpha($par) == true)

    {
      if(min_length($par) == true)
{
     $errors[]=insert_par(0,$par);
}
else{
 $errors[]="<font color='red'>Sorry!! Menu should be atleast 4 characters long</font>";
}
   }
  else{
     $errors[] ="<font color='red'>Only characters are allowed</font>";
   }
 
  }
else{
  $errors[] ="<font color='red'>Enter your desired menu name</font>";
}
 }


 if(isset($_POST['Sub']))
{

  $parent  = $_POST['cat_id'];
  $sub_cat = addslashes(trim($_POST['sub_cat']));

if(!empty($sub_cat))
  {

   if(only_alpha($sub_cat) == true)

    {
  if(min_length($sub_cat) == true)
{
    $errors[]=insert_par($parent,$sub_cat);
}
else{
$errors[]="<font color='red'>Sorry!! Menu should be atleast 4 characters long</font>";
   }
    }
  else{
    $errors[] ="<font color='red'>Only characters are allowed for subcategory</font>";
   }
 
  }
else{
  $errors[] ="<font color='red'>Enter your desired subcategory name</font>";
}

}
?>
<!doctype>
<html>
  <head>
  <title>
     Dynamic Nav Menu From Database
  </title>
<script language="Javascript" type="text/javascript">

        function onlyAlphabets(e, t) {
            try {
                if (window.event) {
                    var charCode = window.event.keyCode;
                }
                else if (e) {
                    var charCode = e.which;
                }
                else { return true; }
                if ((charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123))
                    return true;
                else
                    return false;
            }
            catch (err) {
                alert(err.Description);
            }
        }

    </script>
  <style>
   body {
  font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  padding: 20px 50px 150px;
  font-size: 13px;
  text-align: center;
  background: #E3CAA1;
}

ul {
  text-align: left;
  display: inline;
  margin: 0;
  padding: 15px 4px 17px 0;
  list-style: none;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
ul li {
  font: bold 12px/18px sans-serif;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  background: #fff;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
ul li:hover {
  background: #555;
  color: #fff;
}
ul li ul {
  padding: 0;
  position: absolute;
  top: 48px;
  left: 0;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
ul li ul li {
  background: #555;
  display: block;
  color: #fff;
  text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover { background: #666; }
ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}
h3{
font-family:Baskerville;
  font-size:16px;
  margin-bottom:20px;
  background-color:red;
  color:#fff;
}
header{
  font-family:Baskerville;
  font-size:40px;
  margin-bottom:20px;
  background-color:red;
  color:#fff;
}
footer{

  font-family:Baskerville;
  font-size:18px;
  margin-top:100px;
  background-color:red;
  color:#fff;
}
.links{
  width:800px;
  margin-top:80px;
  margin-bottom:60px;
}
#top{
float:left;
width:100%;

}
#left{
margin-top:50px;
float:left;
width:300px;

}
#right{
width:200px;
margin-top:50px;
border-left:2px solid green;
}
.selection{
float:left;
margin-top:20px;
font-family:baskervile;
font-size:16px;
 width:800px;

  display:none;
}
.bold{
  color:green;
  font-weight:bold;
}
  </style>
  <script language="Javascript" type="text/javascript">

        function onlyAlphabets(e, t) {
            try {
                if (window.event) {
                    var charCode = window.event.keyCode;
                }
                else if (e) {
                    var charCode = e.which;
                }
                else { return true; }
                if ((charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123))
                    return true;
                else
                    return false;
            }
            catch (err) {
                alert(err.Description);
            }
        }

    </script>

  </head>
  <body>
  <header>On change query the database using JQUERY</header>
  <center>
<div class='links'>
<center><h3>On Change query database using Jquery</h3></center>

<table id='top'>
<tr><th  align='left'>Select Country:- <?php get_country(); ?></th>
<th  align='left'>Select State:- <select name='state' id='state' disabled><option>Select</option></select></th>
<th  align='left'>Select City:-  <select name='city'  id='city' disabled><option>Select</option></select></th>
</tr>


</table>

<div class='selection'>
You Selection &raquo;
<span class='con'></span>
<span class='sta'></span>
<span class='cit'></span>
</div>

<div class='mid'>
<br/>
<br/>
<br/>

</center>
</div>
<footer>&copy - 2014 .php4allu.blogspot.com production</footer>
<script src='http://code.jquery.com/jquery-1.11.0.min.js'></script>
<script src='myjs.js'></script>
</body>

</html><?php
  require_once 'conn.php';
  include 'nav_func.php';
  $errors=array();
  if(isset($_POST['ADD']))
{
 $par = addslashes(trim($_POST['par']));
 //// checking for only alphbets in php
  if(!empty($par))
  {

   if(only_alpha($par) == true)

    {
      if(min_length($par) == true)
{
     $errors[]=insert_par(0,$par);
}
else{
 $errors[]="<font color='red'>Sorry!! Menu should be atleast 4 characters long</font>";
}
   }
  else{
     $errors[] ="<font color='red'>Only characters are allowed</font>";
   }
 
  }
else{
  $errors[] ="<font color='red'>Enter your desired menu name</font>";
}
 }


 if(isset($_POST['Sub']))
{

  $parent  = $_POST['cat_id'];
  $sub_cat = addslashes(trim($_POST['sub_cat']));

if(!empty($sub_cat))
  {

   if(only_alpha($sub_cat) == true)

    {
  if(min_length($sub_cat) == true)
{
    $errors[]=insert_par($parent,$sub_cat);
}
else{
$errors[]="<font color='red'>Sorry!! Menu should be atleast 4 characters long</font>";
   }
    }
  else{
    $errors[] ="<font color='red'>Only characters are allowed for subcategory</font>";
   }
 
  }
else{
  $errors[] ="<font color='red'>Enter your desired subcategory name</font>";
}

}
?>
<!doctype>
<html>
  <head>
  <title>
     Dynamic Nav Menu From Database
  </title>
<script language="Javascript" type="text/javascript">

        function onlyAlphabets(e, t) {
            try {
                if (window.event) {
                    var charCode = window.event.keyCode;
                }
                else if (e) {
                    var charCode = e.which;
                }
                else { return true; }
                if ((charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123))
                    return true;
                else
                    return false;
            }
            catch (err) {
                alert(err.Description);
            }
        }

    </script>
  <style>
   body {
  font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  padding: 20px 50px 150px;
  font-size: 13px;
  text-align: center;
  background: #E3CAA1;
}

ul {
  text-align: left;
  display: inline;
  margin: 0;
  padding: 15px 4px 17px 0;
  list-style: none;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
ul li {
  font: bold 12px/18px sans-serif;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  background: #fff;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
ul li:hover {
  background: #555;
  color: #fff;
}
ul li ul {
  padding: 0;
  position: absolute;
  top: 48px;
  left: 0;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
ul li ul li {
  background: #555;
  display: block;
  color: #fff;
  text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover { background: #666; }
ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}
h3{
font-family:Baskerville;
  font-size:16px;
  margin-bottom:20px;
  background-color:red;
  color:#fff;
}
header{
  font-family:Baskerville;
  font-size:40px;
  margin-bottom:20px;
  background-color:red;
  color:#fff;
}
footer{

  font-family:Baskerville;
  font-size:18px;
  margin-top:100px;
  background-color:red;
  color:#fff;
}
.links{
  width:800px;
  margin-top:80px;
  margin-bottom:60px;
}
#top{
float:left;
width:100%;

}
#left{
margin-top:50px;
float:left;
width:300px;

}
#right{
width:200px;
margin-top:50px;
border-left:2px solid green;
}
.selection{
float:left;
margin-top:20px;
font-family:baskervile;
font-size:16px;
 width:800px;

  display:none;
}
.bold{
  color:green;
  font-weight:bold;
}
  </style>
  <script language="Javascript" type="text/javascript">

        function onlyAlphabets(e, t) {
            try {
                if (window.event) {
                    var charCode = window.event.keyCode;
                }
                else if (e) {
                    var charCode = e.which;
                }
                else { return true; }
                if ((charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123))
                    return true;
                else
                    return false;
            }
            catch (err) {
                alert(err.Description);
            }
        }

    </script>

  </head>
  <body>
  <header>On change query the database using JQUERY</header>
  <center>
<div class='links'>
<center><h3>On Change query database using Jquery</h3></center>

<table id='top'>
<tr><th  align='left'>Select Country:- <?php get_country(); ?></th>
<th  align='left'>Select State:- <select name='state' id='state' disabled><option>Select</option></select></th>
<th  align='left'>Select City:-  <select name='city'  id='city' disabled><option>Select</option></select></th>
</tr>


</table>

<div class='selection'>
You Selection &raquo;
<span class='con'></span>
<span class='sta'></span>
<span class='cit'></span>
</div>

<div class='mid'>
<br/>
<br/>
<br/>

</center>
</div>
<footer>&copy - 2014 .php4allu.blogspot.com production</footer>
<script src='http://code.jquery.com/jquery-1.11.0.min.js'></script>
<script src='myjs.js'></script>
</body>
</html>

-----------------------------------------------------------------------------------------------
And now the last php code our fetch_data.php

<?php
   if(isset($_POST['country_id']))
   {
      $con_id = (int)($_POST['country_id']);
 include 'conn.php';
 $fetch_state = "select * from state where country_id='".$con_id."' order by state";
 $result      = mysql_query($fetch_state)
 or die(mysql_query());
 $numrows = mysql_num_rows($result);
 if($numrows > 0)
 {
    //echo $numrows;
echo "<option selected disabled>Select</option>";
   while($row=mysql_fetch_array($result))
{
 
   echo "<option data='".$row['state']."' value='".$row['id']."'>".$row['state']."</option>";
}
 }
 else{
    echo "<option selected disabled>No state found under this country</option>";
 }
   }
 
   if(isset($_POST['state_id']))
   {
      $sta_id = (int)($_POST['state_id']);
 include 'conn.php';
 $fetch_state = "select * from city where state_id='".$sta_id."' order by city";
 $result      = mysql_query($fetch_state)
 or die(mysql_query());
 $numrows = mysql_num_rows($result);
 if($numrows > 0)
 {
    echo "<option selected disabled>Select</option>";
   while($row=mysql_fetch_array($result))
{
 
   echo "<option data='".$row['city']."' value='".$row['id']."'>".$row['city']."</option>";
}
 }
 else{
    echo "<option selected disabled>No city found under this country</option>";
 }
   }

?>

////////////////////////////////////  An the JS File for the onchnage event of the select box


$(document).ready(function(){

  $('#country_id').change(function(){
     $('#city').attr('disabled',true);
$('#state').attr('disabled',true);
$('.cit').html('');
$('.sta').html('');
     var country_id   = $(this).val();
var country_name = $('#country_id option:selected').attr('data');

if(country_id > 0)
{
   //alert(country_id);
$('.selection').show('slow');
$('.con').html(country_name).addClass('bold');
   $.post('fetch_data.php',{country_id:country_id},function(data){
  //alert(data);  /// for testing purposes
  $('#state').removeAttr('disabled');
  $('#state').html(data);
});
}

  });

  $('#state').change(function(){
     $('.cit').html('');
     var state_id   = $(this).val();
var state_name = $('#state option:selected').attr('data');

if(state_id > 0)
{
   //alert(country_id);
$('.selection').show('slow');
$('.sta').html(" &raquo; "+state_name).addClass('bold');
   $.post('fetch_data.php',{state_id:state_id},function(data){
  //alert(data);  /// for testing purposes
  $('#city').removeAttr('disabled');
  $('#city').html(data);
});
}
  });

  $('#city').change(function(){
     var city   = $(this).val();
var city = $('#city option:selected').attr('data');

$('.selection').show('slow');
$('.cit').show('slow');
     $('.cit').html(" &raquo; "+city).addClass('bold');
  });


});

-------------------------------------------------------------------------------------------

And last the function page

<?php
  function get_country(){
     $query = "select * from country order by name";
$result = mysql_query($query)
or die(mysql_error());
$numrows = mysql_num_rows($result);
if($numrows > 0)
{
   echo "<select name='country_id' id='country_id'><option selected disabled>Select</option>";
   while($row=mysql_fetch_array($result))
{
  echo "<option data='".$row['name']."' value='".$row['id']."'>".$row['name']."</option>";
}
echo "</select>";
}
   }
?>


And thst's it we are done guys....

If anybod want the zip file just comment with your email i will send it to you guys

Enjoy!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!


LIVE DEMO

Login Form With JQUERY Shake Function - - Like wordpress

1. Our login_shake.html

<html>
<head>
<title>the title</title>
<link rel='stylesheet' type='text/css' href='css/style.css'>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script src='js/myjs.js'></script>
</head>
<body>
   <center>

   <!--<button id="button"> Shake </button>-->

   <!--<div class="target">
 
   </div>-->
      <div class='errors1'></div>
   
 <br/>
      <div id="container">
         
            <label for="username">Username:</label>
            <input type="text" id="username" name="username">
            <label for="password">Password:</label>
            <input type="password" id="password" name="password">
            <div id="lower">
           
             <input type="submit" id='button' class='button' value="Login">
            </div><!--/ lower-->
     
    </div>
 
  </center>
</body>
</html>

2. Our style.css

body {
  font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  font-size: 13px;
  text-align: center;
  background: #E3CAA1;
}
#container {
    position: absolute;
    width: 340px;
    height: 280px;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -170px;
background: #fff;
    border-radius: 3px;
    border: 1px solid #ccc;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1);

}
form {
    margin: 0 auto;
    margin-top: 20px;
}
label {
    color: #555;
    display: inline-block;
    margin-left: 18px;
    padding-top: 10px;
    font-size: 14px;
}
p a {
    font-size: 11px;
    color: #aaa;
    float: right;
    margin-top: -13px;
    margin-right: 20px;
 -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    transition: all .4s ease;
}
p a:hover {
    color: #555;
}
input {
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 12px;
    outline: none;
}
input[type=text],
input[type=password] {
    color: #777;
    padding-left: 10px;
    margin: 10px;
    margin-top: 12px;
    margin-left: 18px;
    width: 290px;
    height: 35px;
border: 1px solid #c7d0d2;
    border-radius: 2px;
    box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #f5f7f8;
-webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    transition: all .4s ease;
}
input[type=text]:hover,
input[type=password]:hover {
    border: 1px solid #b6bfc0;
    box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .7), 0 0 0 5px #f5f7f8;
}
input[type=text]:focus,
input[type=password]:focus {
    border: 1px solid #a8c9e4;
    box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #e6f2f9;
}
#lower {
    background: #ecf2f5;
    width: 100%;
    height: 69px;
    margin-top: 20px;
 box-shadow: inset 0 1px 1px #fff;
    border-top: 1px solid #ccc;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}
input[type=checkbox] {
    margin-left: 20px;
    margin-top: 30px;
}
.check {
    margin-left: 3px;
font-size: 11px;
    color: #444;
    text-shadow: 0 1px 0 #fff;
}
input[type=submit] {
    float: right;
    margin-right: 20px;
    margin-top: 20px;
    width: 80px;
    height: 30px;
font-size: 14px;
    font-weight: bold;
    color: #fff;
    background-color: #acd6ef; /*IE fallback*/
    background-image: -webkit-gradient(linear, left top, left bottom, from(#acd6ef), to(#6ec2e8));
    background-image: -moz-linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%);
    background-image: linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%);
    border-radius: 30px;
    border: 1px solid #66add6;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .5);
    cursor: pointer;
}
input[type=submit]:hover {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#b6e2ff), to(#6ec2e8));
    background-image: -moz-linear-gradient(top left 90deg, #b6e2ff 0%, #6ec2e8 100%);
    background-image: linear-gradient(top left 90deg, #b6e2ff 0%, #6ec2e8 100%);
}
input[type=submit]:active {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#6ec2e8), to(#b6e2ff));
    background-image: -moz-linear-gradient(top left 90deg, #6ec2e8 0%, #b6e2ff 100%);
    background-image: linear-gradient(top left 90deg, #6ec2e8 0%, #b6e2ff 100%);
}

.errors1{
border:2px solid #B22222;
  float:left;
  margin-top:150px;
  margin-left:330px;
  background-color:#FF3030;
  font-family:Baskerville;
  width:325px;
  font-weight:normal;
  display:none;
  font-size:20px;
  text-align:left;
  padding:5px;
}

.red{
  background-color:#FF3030;
}
.green{
  border:2px solid #8FBC8F;
  float:left;
  margin-top:150px;
  margin-left:330px;
  background-color:#228B22;
  font-family:Baskerville;
  width:325px;
  font-weight:normal;
  display:none;
  font-size:20px;
  text-align:left;
  padding:5px;
  color:#fff;

}

3. myjs.js

$(document).ready(function() {

      $(".button").click(function(){
     var uname = $('#username').val();
 var pass  = $('#password').val();
 if(uname == "" && pass == "")
 {
   $('.errors1').text('Both Fields Are Mandatory').fadeIn(1000);
   /*$('.errors1').text('Both Fields Are Mandatory').fadeIn(1000).delay(5000).fadeOut(1000);*/

$("#container").effect( "shake", 
            {times:3}, 100 );
$('#username').addClass('red');
$('#password').addClass('red');
setTimeout(function(){$('.errors1').fadeOut(1000)}, 5000);
 }
 else if(uname == "")
 {
  
   $('.errors1').text('Enter username to login').fadeIn(1000);

$("#container").effect( "shake", 
            {times:3}, 100 );
$('#username').addClass('red');
$('#password').removeClass('red');
setTimeout(function(){$('.errors1').fadeOut(1000)}, 5000);
 }
 
 
 else if(pass == "")
 {
   
   $('.errors1').text('Enter password to login').fadeIn(1000);
$("#container").effect( "shake", 
            {times:3}, 100 );
$('#password').addClass('red');
$('#username').removeClass('red');
setTimeout(function(){$('.errors1').fadeOut(1000)}, 5000);
 }
 else{
   $('.errors1').fadeOut(1000);
   
$('#username').removeClass('red');
   $('#password').removeClass('red');

 }
          
      });


   });

LIVE DEMO

Dynamic Navigation Menubar From Database Using PHP

Simple application to demonstrate dynamic site navigation bar from database in PHP in a very easy and simple way.

This can be done in many ways but this is the most simple way to do this using one table to store all the values

Just follow the codes and create your connection file first

Create the database of your desired name and paste this sql code there


SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";

CREATE TABLE `menus` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `parent_id` int(11) NOT NULL,
  `name` varchar(20) NOT NULL,
  `visible` tinyint(1) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=87 ;

--
-- Dumping data for table `menus`
--

INSERT INTO `menus` VALUES(1, 0, 'Home', 1);
INSERT INTO `menus` VALUES(2, 0, 'About', 1);
INSERT INTO `menus` VALUES(3, 0, 'Portfolio', 1);
INSERT INTO `menus` VALUES(11, 0, 'Mission', 1);
INSERT INTO `menus` VALUES(10, 3, 'Development', 1);
INSERT INTO `menus` VALUES(9, 0, 'Contact', 1);
INSERT INTO `menus` VALUES(84, 0, 'ramesh', 1);
INSERT INTO `menus` VALUES(85, 84, 'kumar', 1);
INSERT INTO `menus` VALUES(86, 3, 'hello', 1);
INSERT INTO `menus` VALUES(83, 2, 'llpp', 1);
INSERT INTO `menus` VALUES(82, 0, 'uuuuu', 1);

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

 1. Create your own conn.php

<?php
  $server = "localhost";

  $user   =  "root"  //// you username
  $pass    =  "";       ///// your password
  $db_name = "your_databse_name";  //// put your database name here

   $con = mysql_connect($server,$user,$pass)
or die("Server not reachable");
$db = mysql_select_db($db_name,$con);
?>


Our Index.php

<?php
 require_once 'conn.php';
include 'nav_func.php';
 $errors=array();
  if(isset($_POST['ADD']))
{
 $par = addslashes(trim($_POST['par']));
 //// checking for only alphbets in php
  if(!empty($par))
  {

   if(only_alpha($par) == true)

    {
    $errors[]=insert_par(0,$par);
   }
  else{
  $errors[] ="<font color='red'>Only characters are allowed</font>";
   }
 
  }
else{
  $errors[] ="<font color='red'>Enter your desired menu name</font>";
}
 }


 if(isset($_POST['Sub']))
{

  $parent  = $_POST['cat_id'];
  $sub_cat = addslashes(trim($_POST['sub_cat']));

if(!empty($sub_cat))
  {

   if(only_alpha($sub_cat) == true)

    {
    $errors[]=insert_par($parent,$sub_cat);
    }
  else{
    $errors[] ="<font color='red'>Only characters are allowed for subcategory</font>";
   }
 
  }
else{
  $errors[] ="<font color='red'>Enter your desired subcategory name</font>";
}

}
?>
<!doctype>
<html>
  <head>
  <title>
     Dynamic Nav Menu From Database
  </title>
<script language="Javascript" type="text/javascript">

        function onlyAlphabets(e, t) {
            try {
                if (window.event) {
                    var charCode = window.event.keyCode;
                }
                else if (e) {
                    var charCode = e.which;
                }
                else { return true; }
                if ((charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123))
                    return true;
                else
                    return false;
            }
            catch (err) {
                alert(err.Description);
            }
        }

    </script>
  <style>
   body {
  font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  padding: 20px 50px 150px;
  font-size: 13px;
  text-align: center;
  background: #E3CAA1;
}

ul {
  text-align: left;
  display: inline;
  margin: 0;
  padding: 15px 4px 17px 0;
  list-style: none;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
ul li {
  font: bold 12px/18px sans-serif;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  background: #fff;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
ul li:hover {
  background: #555;
  color: #fff;
}
ul li ul {
  padding: 0;
  position: absolute;
  top: 48px;
  left: 0;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
ul li ul li {
  background: #555;
  display: block;
  color: #fff;
  text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover { background: #666; }
ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}
header{
  font-family:Baskerville;
  font-size:40px;
  margin-bottom:20px;
  background-color:red;
  color:#fff;
}
footer{

  font-family:Baskerville;
  font-size:18px;
  margin-top:100px;
  background-color:red;
  color:#fff;
}
.links{
width:600px;
  margin-top:200px;
  margin-bottom:60px;
}
#left{
float:left;
width:300px;

}
#right{
border-left:2px solid green;
}
  </style>
  </head>
  <body>
  <header>Dynamic Navigation Menubar From Database Using PHP</header>

<ul>
 
   <?php echo get_nav(); ?>
</ul>
<center>
<div class='links'>
<form method='post'>
<table id='left'>
<tr><th colspan='2' align='left'>Insert Parent Category</th></tr>
<tr><td colspan='2'><?php foreach($errors as $err){echo $err;}?></td></tr>
 <tr><td>Insert Parent Nav</td><td><input type='text' name='par' required maxlength='8' onkeypress="return onlyAlphabets(event,this);"></td></tr>
  <tr><td><input type='submit' name='ADD' value='Add Parent'></td></tr>
</table>
</form>
<form method='post'>
<table id='right'>
<tr><th colspan='2' align='left'>Insert Sub-Category</th></tr>

<?php
  echo create_nav_option();

?>

<tr>
   <td>Insert Sub Menu</td>
   <td><input type='text' name='sub_cat' required maxlength='15' onkeypress="return onlyAlphabets(event,this);"></td>
</tr>
<tr>
    <td><input type='submit' name='Sub' value='Add Sub Category'></td>
</tr>
</table>
</form>
</center>
</div>
<footer>&copy - 2014 .php4allu.blogspot.com production</footer>
</body>
</html>

2. Our nav_func.php

<?php
   function get_nav(){
      $query = "select * from menus where parent_id='0' and visible='1'";
 $result = mysql_query($query)
 or die(mysql_error());
 while($row=mysql_fetch_array($result))
 {

     echo "<li>".$row['name'];
 /////get child menu nif exists
 $get_child = "select name from menus where parent_id='".$row['id']."' and visible='1'";
 $res       = mysql_query($get_child)
 or die(mysql_error());
 $numrows = mysql_num_rows($res);
 if($numrows > 0)
 {
   echo "<ul>";
while($row=mysql_fetch_array($res))
{
    echo "<li>".$row['name']."</li>";
}
echo "</ul></li>";
 }
 else{
   echo "</li>";
 }
 }
   }

   function create_nav_option(){
      $query = "select * from menus where parent_id='0' and visible='1' and id!='1'";
      $result = mysql_query($query);
    $output = "<tr><td>Select Category</td><td><select name='cat_id'>";
     while($row=mysql_fetch_array($result))
{
     $output .="<option value='".$row['id']."'>".$row['name']."</option>";
}
$output .="</select></td>";
return $output;
   }
function insert_par($parent_id,$name){
$insert = "insert into menus (parent_id,name,visible) values('$parent_id','$name','1')";
$result = mysql_query($insert);
   if($result)
     {
     return "<font color='green'>Parent menu inserted successfully</font>";
     }
   else{
     return "<font color='red'>Something went wrong</font>";
     }
}

function only_alpha($menu){
  if(ctype_alpha($menu))
{
  return true;
}
else{
  false;
}
}


?>


LIVE DEMO

Jquery Auto Tabs (Simple And Easy)

You have a form for allowing users to register a product online, and you require the
user to enter a serial number printed on the installation discs. This number is 16 digits
long and separated across four input fields. Ideally, to speed the user along in their data
entry, as each input field is filled up, you’d like to automatically focus the next input
field until they’re finished typing the number:

<fieldset class="autotab">
<legend>Product Serial Number</legend>
<input type="text" maxlength="4" />
<input type="text" maxlength="4" />
<input type="text" maxlength="4" />
<input type="text" maxlength="4" />
</fieldset>



Inside <fieldset class="autotab">, find all the <input> elements. Use
jQuery’s .bind() method to listen for the keydown and keyup events. We exit the bound
function for a handful of keys that we want to ignore, because they aren’t meaningful
for automatically tabbing forward or backward. When an <input> element is full, based
on the maxlength attribute, we .focus() the next <input> element. Conversely, when
using the Backspace key, if an <input> element is made empty, we .focus() the previous
<input> element:


$('fieldset.autotab input').bind('keydown keyup',function(event){
// the keycode for the key evoking the event
var keyCode = event.which;
// we want to ignore the following keys:
// 9 Tab, 16 Shift, 17 Ctrl, 18 Alt, 19 Pause Break, 20 Caps Lock
// 27 Esc, 33 Page Up, 34 Page Down, 35 End, 36 Home
// 37 Left Arrow, 38 Up Arrow, 39 Right Arrow, 40 Down Arrow
// 45 Insert, 46 Forward Delete, 144 Num Lock, 145 Scroll Lock
var ignoreKeyCodes =
',9,16,17,18,19,20,27,33,34,35,36,37,38,39,40,45,46,144,145,';
if ( ignoreKeyCodes.indexOf(',' + keyCode + ',') > −1 ) { return; }
// we want to ignore the backspace on keydown only
// let it do its job, but otherwise don't change focus
if ( keyCode == 8 && event.type == 'keydown' ) { return; }
var $this = $(this);
var currentLength = $this.val().length;
var maximumLength = $this.attr('maxlength');
// if backspace key and there are no more characters, go back
if ( keyCode == 8 && currentLength == 0 ) {
$this.prev().focus();
}
// if we've filled up this input, go to the next
if ( currentLength == maximumLength ) {
$this.next().focus();
}
});

LIVE DEMO

Simple application using appendto() function in JQUERY

Simple application using appendto() function in JQUERY

<!doctype>
<html>
  <head>
    <title>Jquery Select All</title>
<script src='http://code.jquery.com/jquery-1.11.0.min.js'></script>
<script>
$(document).ready(function(){

$('#add').click(function(event){
event.preventDefault();
var optionName = $('#newColorName').val();
var optionValue = $('#newColorValue').val();
$('<option/>').attr('value',optionValue).text(optionName).appendTo('#colors');
});

$('#remove').click(function(event){
event.preventDefault();
var $select = $('#colors');
$('option:selected',$select).remove();
});

});
</script>
</head>
<body>
<label for="colors">Colors</label>
<select id="colors" multiple="multiple">
<option>Black</option>
<option>Blue</option>
<option>Brown</option>
</select>
<button id="remove">Remove Selected Color(s)</button>
<br/>
<label for="newColorName">New Color Name</label>
<input id="newColorName" type="text" /><br/>
<label for="newColorValue">New Color Value</label>
<input id="newColorValue" type="text" /><br/>
<button id="add">Add New Color</button>


 </body>
</html>


Discussion
I use the .attr() and .text() methods to populate the <option> element:
$('<option/>').attr("value",optionValue).text(optionName).appendTo('#colors');
However, the same line could be rewritten so that the <option> element is built in one
step, without using the methods:
$('<option value="'+optionValue+'">'+optionName+'</option>').appendTo('#colors');
Concatenating all the <option> data like that would be a fraction of a millisecond faster,
but not in any way noticeable by a human. I prefer using the .attr() and .text()
methods to populate the <option> element because I think that it is more readable and
easier to debug and maintain. With the performance issue being negligible, using one
approach or the other is the developer’s preference.
What would happen with JavaScript disabled? You would need to provide a server-side
alternative that processes the button clicks, and the user would have to wait for the
resulting page reloads.

LIVE DEMO

Simple Select / Deselect checkbox in JQUERY

Simple Select / Deselect checkbox in JQUERY

Only Few Lines of codes

<!doctype>
<html>
  <head>
    Jquery Select All
  </head>
  <body>
<fieldset>
<legend>Reasons to be happy</legend>
<a class="selectAll" href="#">Select All</a>
<a class="deselectAll" href="#">Deselect All</a>
<input name="reasons" id="iwokeup" type="checkbox" value="iwokeup" />
<label for="iwokeup">I woke up</label>
<input name="reasons" id="health" type="checkbox" value="health" />
<label for="health">My health</label>
<input name="reasons" id="family" type="checkbox" value="family" />
<label for="family">My family</label>
<input name="reasons" id="sunshine" type="checkbox" value="sunshine" />
<label for="sunshine">The sun is shining</label>
</fieldset>

<script src='http://code.jquery.com/jquery-1.11.0.min.js'></script>
<script>
$('fieldset .selectAll').click(function(event){
event.preventDefault();
// find all the checkboxes and select them
$(this).siblings('input:checkbox').attr('checked','checked');
});
// find the "Deselect All" link in a fieldset and list for the click event
$('fieldset .deselectAll').click(function(event){
event.preventDefault();
// find all the checkboxes and deselect them
$(this).siblings('input:checkbox').removeAttr('checked');
});
</script>
 </body>
</html>

LIVE DEMO

PHP stripslashes() Function

Definition and Usage

The stripslashes() function removes backslashes added by the addslashes() function.

Tip: This function can be used to clean up data retrieved from a database or from an HTML form.

<?phpfunction stripslashes_deep($value)
{
    $value = is_array($value) ?
                array_map('stripslashes_deep', $value) :
                stripslashes($value);

    return $value;
}
// Example$array = array("f\\'oo", "b\\'ar", array("fo\\'o", "b\\'ar"));$array = stripslashes_deep($array);
// Outputprint_r($array);?>

Returns:--

Array
(
    [0] => f'oo
    [1] => b'ar
    [2] => Array
        (
            [0] => fo'o
            [1] => b'ar
        )

)

PHP addslashes()

Definition and Usage

The addslashes() function returns a string with backslashes in front of predefined characters.

The predefined characters are:

• single quote (')
• double quote (")
• backslash (\)
• NULL

Tip: This function can be used to prepare a string for storage in a database and database queries.

Note: PHP runs addslashes() on all GET, POST, and COOKIE data by default. Therefore you should not use addslashes() on strings that have already been escaped, this will cause double escaping. The function get_magic_quotes_gpc() can be used to check this.

TEST CASE:-

<?php 
$str = addslashes('What does "yolo" mean?');
echo($str); 
?>

 Returns:--   What does \"yolo\" mean?

<?php
$str = "Who's Peter Griffin?";
echo $str . " This is not safe in a database query.<br>";
echo addslashes($str) . " This is safe in a database query.";
?>

Returns --- Who's Peter Griffin? This is not safe in a database query.

                        Who\'s Peter Griffin? This is safe in a database query.

Simple Live Preview Application on keyup in Jquery

form.html

<!doctype>
<html>
  <head>
     <title>Live Preview In Jquery</title>
<style>
body{
  font-family:tahoma,arial;
  font-size:16px;
}
  .total{
    width:800px;
margin:20px auto;
border:1px solid green;
  }
  .left{
    margin-left:5px;
padding-left:5px;
    float:left;
width:370px;
border:1px solid red;
  }
   .right{
margin-left:5px;
padding-left:5px;
    float:left;
width:370px;
border:1px solid red;
background:#c1c1c1;
  }
  .hidden{
   display:none;
   }
.red{
color:red;
}
.footer{
 width:100%;
 float:left;
 background-color:#c1c1c1;
}
.header{
 width:100%;
 float:left;
 background-color:#c1c1c1;
 color:#fff;
 font-size:20px;
 padding:5px;
}
</style>
  </head>
  <body>
<center><p class='header'>Simple Live Preview System In Jquery On KeyupEvent</center>

    <div class='left'>
<h3>Fill the form</h3>
 <form method='post' autocomplete='off' id='frm'>
 <table>
    <tr><td>Name:</td><td><input type='text' name='name' id='name' required maxlength='20'></td></tr>
<tr><td>Email:</td><td><input type='email' name='email' id='email' required></td></tr>
<tr><td>Mobile:</td><td><input type='text' name='mobile' id='mobile' required maxlength='10'></td></tr>
<tr><td>City:</td><td><input type='text' name='city' id='city' required maxlength='30'></td></tr>
<tr><td>State:</td><td><input type='text' name='state' id='state' required maxlength='20'></td></tr>
<tr><td>Pincode:</td><td><input type='text' name='pincode' id='pincode' required maxlength='6'></td></tr>
<tr><td>Area:</td><td><input type='text' name='area' id='area' required></td></tr>
<tr><td><input type='submit' name='Submit' value='Add Details'></td></tr>
</table>
 </form>
</div>
<div class='right'>
 <div class='prev'>
  <h3>Live Preview</h3>
  <p class='area_name hidden'>Name:- <span id='name_preview'></span></p>
  <p class='area_email hidden'>Email:- <span id='email_preview'></span></p>
  <p class='area_mobile hidden'>Mobile:- <span id='mobile_preview'></span></p>
  <p class='area_city hidden'>City:- <span id='city_preview'></span></p>
  <p class='area_state hidden'>State:- <span id='state_preview'></span></p>
  <p class='area_pincode hidden'>Pincode:- <span id='pincode_preview'></span></p>
  <p class='area_area hidden'>Area:- <span id='area_preview'></span></p>
 </div>
<div class='confirmation hidden'>
  <p>Form Submiited Successfully</p>
</div>
</div>

<script src='http://code.jquery.com/jquery-1.11.0.min.js'></script>
<script src='preview.js'></script>
<center><p class='footer'>&copy; - 2014.&nbsp; <font color='red'>Dhrubojyoti Das</font> production</p></center>
  </body>

</html>

And this is our jquery file
preview.js

$(document).ready(function(){
  //alert("Jquery Loaded");
  $('#name').keyup(function(){
    var name = $(this).val();
if(name != "")
{
$('.area_name').show();
     $('#name_preview').html(name);
}
else{
  $('.area_name').hide();
}
  });
  
  $('#email').keyup(function(){
    var email = $(this).val();
if(email != "")
{
$('.area_email').show();
     $('#email_preview').html(email);
}
else{
  $('.area_email').hide();
}
  });
  
  $('#mobile').keyup(function(){
    var mobile = $(this).val();
if(mobile != "")
{
$('.area_mobile').show();
     $('#mobile_preview').html(mobile);
}
else{
  $('.area_mobile').hide();
}
  });
  
  $('#city').keyup(function(){
    var city = $(this).val();
if(city != "")
{
$('.area_city').show();
     $('#city_preview').html(city);
}
else{
  $('.area_city').hide();
}
  });
  
  $('#state').keyup(function(){
    var state = $(this).val();
if(state != "")
{
$('.area_state').show();
     $('#state_preview').html(state);
}
else{
  $('.area_state').hide();
}
  });
  
  $('#pincode').keyup(function(){
    var pincode = $(this).val();
if(pincode != "")
{
$('.area_pincode').show();
     $('#pincode_preview').html(pincode);
}
else{
  $('.area_pincode').hide();
}
  });
  
  $('#area').keyup(function(){
    var area = $(this).val();
if(area != "")
{
$('.area_area').show();
     $('#area_preview').html(area);
}
else{
  $('.area_area').hide();
}
  });
  
  $('#frm').submit(function(){
     alert("Form submitted successfully");
 
  });
  


});

Live Demo