Smart Tutorials - PHP, MySQL, Jquery, JavaScriptSmart Tutorials - PHP, MySQL, Jquery, JavaScript

Smart Tutorials Demo Page

muni — Mon, 17 Jun 2013 18:09:11 +0000

In this tutorial we are going to see how to make demo page like one in my blog. Having special demo page for all the post you had written, esp. helps your site users to see all your work in one place. That greatly improves your site users interest that inturn generates greater traffic to your site. Nearlye half of traffic to my site generated through my demo page.

This is very small php application that you can do it yourself, all you have to need is just follow this tutorial step by step. If you have felt any difficulty while implementing this leave your comment in the comment box.

Front End Demo

Back End Demo

Smart Tutorials Demo Page

Step 1:

Create a demo table with the following SQL query.

CREATE TABLE IF NOT EXISTS `demo` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `post_title` varchar(150) NOT NULL,
  `post_url` varchar(150) NOT NULL,
  `post_demo` varchar(100) NOT NULL,
  `download_link` varchar(100) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=17 ;

Download

Step 2:

Now insert following sample data’s in the demo table.

INSERT INTO `demo` (`id`, `post_title`, `post_url`, `post_demo`, `download_link`) VALUES
(1, 'Multi Stage HTML5 Form Using jQuery and CSS3', 'http://www.smarttutorials.net/multi-stage-html5-form-using-jquery-and-css3/', 'http://demo.smarttutorials.net/multi_form/', 'http://www.smarttutorials.net/subscribers.php?id=7'),
(2, 'jQuery Script to Disable Right Click And Control Save on your Site', 'http://www.smarttutorials.net/jquery-script-to-disable-right-click-and-control-save-on-your-site/', 'http://demo.smarttutorials.net/jquery_preventer/sample.html', 'http://demo.smarttutorials.net/jquery_preventer/sample.html'),
(3, 'Live Preview In jQuery', 'http://www.smarttutorials.net/live-preview-in-jquery/', 'http://smarttutorials.net/demo/live_preview.html', 'http://www.smarttutorials.net/subscribers.php?id=5'),
(4, 'Google URL Shortener API Service PHP Script', 'http://www.smarttutorials.net/google-url-shortener-api-service-php-script/', 'http://www.smarttutorials.net/demo/google_url_shortener.php', 'http://www.smarttutorials.net/subscribers.php?id=4'),
(5, 'Google Maps Reverse Geocoding API in PHP', 'http://www.smarttutorials.net/google-maps-reverse-geocoding-php/', 'http://www.smarttutorials.net/demo/reverse_geocode_api_google_maps.php', 'http://www.smarttutorials.net/subscribers.php?id=3'),
(6, 'Google maps Geocoding API using PHP', 'http://www.smarttutorials.net/google-maps-geocoding-api-using-php/', 'http://smarttutorials.net/demo/geocode.php', 'http://www.smarttutorials.net/subscribers.php?id=1'),
(7, 'Send Email with File Attachment (PDF, word files and images etc..) in PHP', 'http://www.smarttutorials.net/send-mail-with-file-attachemnt-php/', 'http://demo.smarttutorials.net/demo_mail/', 'http://www.smarttutorials.net/subscribers.php?id=6'),
(8, 'Send an E-Mail with Attachment Using jQuery, Ajax and PHP without Refrshing a Page', 'http://www.smarttutorials.net/send-an-e-mail-with-attachment-using-jquery-ajax-and-php-without-refrshing-a-page/', 'http://demo.smarttutorials.net/demo_ajax_mail/', 'http://www.smarttutorials.net/subscribers.php?id=9'),
(9, 'Multi Stage HTML5 Form Using jQuery, Ajax and CSS3 – PART 2', 'http://www.smarttutorials.net/multi-stage-html5-form-using-jquery-ajax-and-css3-part-2/', 'http://demo.smarttutorials.net/multi_form_part2/', 'http://www.smarttutorials.net/subscribers.php?id=8'),
(10, 'Autocomplete Using jQuery, Ajax, PHP and MySQL', 'http://www.smarttutorials.net/autocomplete-using-jquery-ajax-php-and-mysql/', 'http://demo.smarttutorials.net/auto_complete/', 'http://www.smarttutorials.net/subscribers.php?id=10'),
(11, 'Quiz application Using PHP, jQuery, Ajax, MySQL and HTML5', 'http://www.smarttutorials.net/quiz-application-using-php-jquery-ajax-mysql-and-html5/', 'http://demo.smarttutorials.net/Quiz/', 'http://www.smarttutorials.net/subscribers.php?id=12'),
(12, 'Dynamically Add and Remove Textbox Using jQuery', 'http://www.smarttutorials.net/dynamically-add-and-remove-textbox-using-jquery/', 'http://demo.smarttutorials.net/dynamic_textbox/', 'http://www.smarttutorials.net/subscribers.php?id=13'),
(13, 'Multi-Step SignUp Form Using jQuery, Ajax, PHP, HTML5 and CSS3', 'http://www.smarttutorials.net/multi-step-signup-form-using-jquery-ajax-php-html5-and-css3/', 'http://demo.smarttutorials.net/signup_form/', 'http://www.smarttutorials.net/subscribers.php?id=15'),
(14, 'Unique jQuery Validation Success Message Using jQuery Validation Plugin', 'http://www.smarttutorials.net/unique-jquery-validation-success-message-using-jquery-validation-plugin/', 'http://demo.smarttutorials.net/unique_success/', 'http://www.smarttutorials.net/subscribers.php?id=16'),
(15, 'Unique Email Validation Based on Checkbox Using jQuery Validation Plugin Custom Methods, Ajax and PHP', 'http://www.smarttutorials.net/unique-email-validation-based-on-checkbox-using-jquery-validation-plugin-custom-methods-ajax-and-php/', 'http://demo.smarttutorials.net/remote_validation/', 'http://www.smarttutorials.net/subscribers.php?id=17'),
(16, 'Dynamically Add or Remove Table Row Using jQuery', 'http://www.smarttutorials.net/dynamically-add-or-remove-table-row-using-jquery/', 'http://demo.smarttutorials.net/table/', 'http://www.smarttutorials.net/subscribers.php?id=18');

Step 3:

Now create config.php file to keep database connection in a separate file, that prevents repetition of database connection codes.

Step 4:

Now create post.php file, that gets your input data and stores in a database table. Create a form with the following fields.

Post ADD

Post Add Page

Data Updated Successfully!
We will be in touch soon.

Step 5:

Now add following css style and jQuery validation script to post.php file.

jQuery Script :

Step 6:

Now create show.php file, which gets the posted data and updates the database table.

Step 7:

Finally front end development, now create index.php file with the following table structure.





     Post Demo Page
     
     
     



    
	 Back Home !
	
    Post Demo Page
    
       
           
              Post Title
              Demo
              Download Link
           
           
           
              ' target="_blank">
              ' target="_blank">Demo
              ' target="_blank">Download Link

Post Title	Demo	Download Link
' target="_blank">	' target="_blank">Demo	' target="_blank">Download Link

Dynamically Add or Remove Table Row Using jQuery

muni — Sun, 09 Jun 2013 05:19:14 +0000

Dynamically Add or Remove Table Row Using jQuery is very helpful in number of places where teachers wants to update students marks details or admin wants to update their Users details. This is very simple to make it yourself just follow this tutorial step by step. If you came across any difficulty implementing this just leave your comments in the comment box.

Demo

Dynamically Add or Remove Table Row Using jQuery

Step 1:

Create index.php file with following html skelton structure.

 


	jquery add remove table row dynamically with checkbox functionality

Download

Step 2:

Now add a html form in the body section, and inside form create a table like in the below html.



		
		  
			
			S. No
			First Name
			Last Name
			Tamil
			English
			Computer
			Total
		  
		  
			
			1.

Step 3:

Now add the following CSS stylling in the head section of the index.php file.

Step 4:

Now add jQuery library file in the head section or bottom of html file wherever you like.

Step 5:

Here is the jQuery script that will add/append new table row when user clicked on addMore button.

Step 6:

Following jQuery script will deletes/removes the selected table rows from the table when user clicked on Delete button. When clicked on delete button following script will check for slected table rows and finally deletes the selected table rows.

Step 7:

Following jQuery script helps you to select all the table rows in the table.

Feel free to refer one of my previous tutorial on Dynamically Add and Remove Textbox Using jQuery.

Unique Email Validation Based on Checkbox Using jQuery Validation Plugin Custom Methods, Ajax and PHP

muni — Mon, 03 Jun 2013 18:02:13 +0000

There is sometime we have requirement like this based on the User (Premium User or Guest User) We want to check Email or Username uniqueness. This is done with the help of jQuery Validation Plugin Custom Methods, Ajax and PHP. This tutorial is continuation of my previous tutorial on Live Username and Email Availability Checking using PHP, jQuery and Ajax.

Demo

Unique Email Validation Based on Checkbox Using jQuery Validation Plugin Custom Methods, Ajax and PHP

Step 1:

Create sample MySQL table using following sql query.

CREATE TABLE IF NOT EXISTS `test` ( 
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `email` varchar(50) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

Now add some sample data’s in the table using following SQL Query.

INSERT INTO `test` (`id`, `email`) VALUES
(1, 'muni2explore@gmail.com'),
(2, 'sasi@gmail.com');

Download

Step 2:

Create config.php file to keep databse connection information in a separate file, so that we can use same file multiple times without rewriting the same information again and again.

Step 3:

Now create index.php file and add HTML form with radios buttons and textboxes using following html code.

Unique Email Validation Based on Checkbox Using jQuery Validation Plugin Custom Methods, Ajax and PHP

Following Email : muni2explore@gmail.com is already exists in database. Enter this email in the textbox to check.

Step 4:

Add the following CSS styles in the head section of the index.php file.

Step 4:

Here jQuery validation script, this script only checks the user entered email is in the right format or not. If it is not in right format then it will asks user to enter right formatted Email.

Step 5:

Now I am going write jQuery Validation Plugin custom method with ajax call to check email uniqueness. The script will get information about radiobox selected and email entered in the textbox and sends those information to PHP file through jQuery .ajax() method. Where it will checks against emails in the database.

jQuery.validator.addMethod("uniqueEmail", function(value, element) {
    var response;
	var email_chk;
	if ($('#email_chk').is(':checked')) {
		email_chk=$('#email_chk').val();
	}else{
	    email_chk='No';
	}

	var email=$('#email').val();
    $.ajax({
        type: "POST",
        url: "unique_email.php",
        data:{email_chk:email_chk,email:email},
        async:false,
        success:function(data){
            response = data;
        }
    });
    if(response == 'true')
    {
        return true;
    }
    else
    {
        return false;
    }

}, "Email is Already Taken");

Step 7:

Finally create unique_email.php file that will gets email entered by the user and compares this email with the emails in the database and finally returns results to the jQuery .ajax() call.

0){
		  echo 'false';
	   }
	   else{
		 echo 'true';
	   }
}
else{
    echo 'true';
}

?>

If Email already in the database then PHP file return false as response to jQuery .ajax() call , so jQuery won’t allows your form to submit.

Unique jQuery Validation Success Message Using jQuery Validation Plugin

muni — Sat, 01 Jun 2013 18:23:33 +0000

Imagine moments like this, when we are doing something in our life, there is someone who appreciates every work we do. This type of appreciation always boost our energy and happiness. This tutorial on Unique jQuery Validation Success Message Using jQuery Validation Plugin is some type appreciation you are giving to your visitors when they entering their information in your site.

Just follow this tutorial step by step to implement this. In this tutorial I am using same interface I have used in my previous tutorial on Send an E-Mail with Attachment Using jQuery, Ajax and PHP without Refrshing a Page. I had clearly explained HTML and css part implementation on this tutorial (Send an E-Mail with Attachment Using jQuery, Ajax and PHP without Refrshing a Page) . Please refer those part in my previous tutorial.

We are going to see in this tutorial only Unique jQuery Validation Success Message implementation part.

Demo

Unique jQuery Validation Success Message Using jQuery Validation Plugin

Step 1:

Add the following jQuery libary files in your index.php file.

Download

Step 2:

Here is the jQuery validation script.

$("#mailForm").validate({
			     rules: {
					name: {
					   required: true,
					   minlength : 3
					},
					email:{ 
					   required: true,
					   email: true
					},
					phone: { 
					  required : true,
					  number:true,	
					  minlength : 10,
				      maxlength : 11
					},
					image: "required",
					message: "required",
					femail:{ 
					   required: true,
					   email: true
					}
			     },
			     messages: {
						name: {
						   required:"Please enter your name",
						   minlength: "Please enter a valid name"
						},
						email:{ 
						   required: "Please enter your email",
						   minlength: "Please enter a valid email address",
						},
						phone: { 
						   required: "Please enter your phone number",
						   minlength: "Please enter your valid phone number",
						   maxlength: "Please enter your valid phone number"
						},
						image: "Please Choose your image",
						message: "Please enter your message",
						femail: { 
						   required: "Please enter your email",
						   minlength: "Please enter a valid email address",
						}
			     },
			     debug: true,
				 errorElement: "em",
				 errorContainer: $("#warning, #summary"),
				 errorPlacement: function(error, element) {
					error.appendTo( element.parent("td").next("td") );
				 },

				 success: function(label) {
					var messages = new Array(
						"That's Great!",
						"Looks good!",
						"You got it!",
						"Great Job!",
						"Smart!",
						"That's it!"
                    );
					var num = Math.floor(Math.random()*6); 

					label.text(messages[num]).addClass("success");

				}

			 });

Here i have selected the form that we are going validate now with it’s unique id $(“#mailForm”) name in jQuery and then selected each fields in the form with it’s unique id’s and applied validation in the rules section and in the message i have specified error unique messages.

Step 3:

Here comes hero part.

When users entered correct information in the form fields following unique success messages will be displayed that boost your users interest in your site.

success: function(label) {
       var messages = new Array(
			"That's Great!",
			"Looks good!",
			"You got it!",
			"Great Job!",
			"Smart!",
			"That's it!"
       );
var num = Math.floor(Math.random()*6); 					
label.text(messages[num]).addClass("success");					
}

Based random number genereated using Math random() method, messages in the messages array will be displayed.

var num = Math.floor(Math.random()*6);

Multi-Step SignUp Form Using jQuery, Ajax, PHP, HTML5 and CSS3

muni — Sat, 25 May 2013 18:29:33 +0000

This type of form always improve user interaction on your site comparing very long form like this. Now we are going to see how to convert this very long form into multi-step signup using jQuery, Ajax,PHP, HTML5 and CSS3.

Making of this Multi-Step SignUp Form is very very easy.

Demo

Multi-Step Signup Form using jQuery Ajax PHP HTML5 and css3

Please refer my previous tutorial on multi-step SignUp

Multi Stage HTML5 Form Using jQuery, Ajax and CSS3 – Part2

Multi Stage HTML5 Form Using jQuery and CSS3

Step 1:

Create index.php file and adding numbers fieldset tags within form tag in the body section of html file. Where fieldsets indicates numbers signup form steps.

Download




    Multi-Step SignUp Form Using jQuery Ajax PHP HTML5 and CSS3

   
       
	      Step 1
	   
	   
	      Step 2
	   
	   
	      Step 3
	   
	   
	      Step 4

Step 2:

Now add following input fields between each fieldsets.



You are just minutes away from approval.
Amount
				
			
			
			
				First Name
				
			
			
			
				Last Name
				
			
			
			
				Email Address
				
			
			
			
				Cell Phone
				
			
			



Required Secure Information


When were you born?




Please enter your Social Security Number




What is your DL number?




Which state issued your DL?

				

			
			



Tell us about your job.


Your employer's company name.




Employer's Phone Number




What's your title at work?




How many months have you been employed?
				
			
			
			
			Are you ACTIVE status in the military?
				
				yes


				no

			

			
			



Almost Done...
How much do you make a month?
				
			
			
			Where does you income come from?
				
			
			
			How often are you paid?
				
			
			
			
			When is your next pay date?
			
			
			
			
			When is your 2nd pay date from now?
			
			
			



Congrats, it's the last step!

Bank Name



Routing Number




Account Number




What type of account do you have?
				
			
			
			Do you have direct deposit?
				
				yes


				no

Step 3:

Now add following css styles in the head section of index.php page.

* {background-color: #16a085;margin: 0;padding: 0;}
		@font-face{font-family: Lobster;src: url('Lobster.otf');}
		h2{font-family: Lobster;font-size: 30px;}
        body { font-family:Lucida Sans, Arial, Helvetica, Sans-Serif; font-size:13px; margin:20px; width:100%;}
        #main { width:960px; margin: 0px auto; border:solid 1px #b2b3b5; -moz-border-radius:10px; padding:20px; background-color:#f6f6f6;}
        #header { text-align:center; border-bottom:solid 1px #b2b3b5; margin: 0 0 20px 0; }
        fieldset { border:none; width:320px;}
        legend { font-size:18px; margin:0px; padding:10px 0px; color:#b0232a; font-weight:bold;}
        label { display:block; margin:15px 0 5px;}
        input[type=text], input[type=password] { width:300px; padding:5px; border:solid 1px #fff;}
        .prev, .next { background-color:#b0232a; margin:20px 0;padding:5px 10px; color:#fff; text-decoration:none;}
        .prev:hover, .next:hover { background-color:#000; text-decoration:none;}
        .prev { float:left;}
        .next { float:right;}
        #steps { list-style:none; width:100%; overflow:hidden; margin:0px; padding:0px;}
        #steps li {font-size:24px; float:left; padding:10px; color:#b0b1b3;}
        #steps li span {font-size:11px; display:block;}
        #steps li.current { color:#000;}
        #makeWizard { background-color:#b0232a; color:#fff; padding:5px 10px; text-decoration:none; font-size:18px;}
        #makeWizard:hover { background-color:#000;}
		.sub{float:right;background-color:#b0232a;color:#fff;border:solid 1px #b0232a;margin: -40px 0 0 -100px;height:25px;}
		.error_msg{color:red;}
		.wrapper{width:400px; margin: 0 auto;}
		.border{border:1px solid white;width:310px;}
		.title{color:white;}

		#message{display:none;	margin-top: 100px;color: #fff; width: 400px;height: 100px;border: 2px solid #fff;border-radius: 10px;position: relative;}
		#message h2, #message p{text-align: center;}
		#message #checkmark{margin-left: 170px;}
		#close{position: absolute;right: -8px;top: -10px;}
		.hide{display: none;}

Step 4:

Now include following jQuery library files .

Step 5:

Now add following two lines jQuery script that will convert very long form into multi-step signup form.

Now you had accomplished the goal of converting very long HTML Form into multi-step signup form. Next we are going to add validation each input field in the Multi-Step Signup Form.

If want to customize this formtowizard plugin according to your need please go through following link Turn any webform into a powerful wizard with jQuery

Step 6:

Normally we will add jQuery validation to all the fields in the HTML Form. But in this tutorial we can’t do the validation like normally we do. We only add jQuery validation to input fields only in the first fieldset. Only successfull validation of all the fields in the step one then only we will add validation to step two. then three and four.

Here is the full jQuery validation script.

(function($) {
    $.fn.formToWizard = function(options) {
        options = $.extend({  
            submitButton: "" 
        }, options); 

		$('#submit_app').on('click',function(){
	       if($("#myform").valid()){
		     $.ajax({
			    type: "POST", 
	    	    url: "show.php",  
	    	    data: $('#myform').serialize(),  
	    	    success: function(msg) {  
					  alert(msg);
					  $("#myform").addClass("hide");
	    		      $("#message").show();
	    	   } 
			 });
			 $('#close').click(function(){ 
				  $('#message').hide();
				  $("#myform").removeClass("hide");
				  $('input[type=text],input[type=email]').val('');
				  location.reload();
			  });
		   }
	   });

        var element = this;

        var steps = $(element).find("fieldset");
        var count = steps.size();
        var submmitButtonName = "#" + options.submitButton;
        $(submmitButtonName).hide();

        // 2
        $(element).before("");

        steps.each(function(i) {
            $(this).wrap("");
            $(this).append("");

            // 2
            var name = $(this).find("legend").html();
            $("#steps").append("");

            if (i == 0) {
                createNextButton(i);
                selectStep(i);
            }
            else if (i == count - 1) {
                $("#step" + i).hide();
                createPrevButton(i);
            }
            else {
                $("#step" + i).hide();
                createPrevButton(i);
                createNextButton(i);
            }
        });

        function createPrevButton(i) {
            var stepName = "step" + i;
            $("#" + stepName + "commands").append("< Back");

            $("#" + stepName + "Prev").on("click", function(e) {
			  ///if($('form').valid()){
                $("#" + stepName).hide();
                $("#step" + (i - 1)).show();
                $(submmitButtonName).hide();
                selectStep(i - 1);				
			  //}	
            });
        }

        function createNextButton(i) {
            var stepName = "step" + i;
            $("#" + stepName + "commands").append("Next >");

            $("#" + stepName + "Next").on("click", function(e) {
			if($("#myform").valid()){
                $("#" + stepName).hide();
                $("#step" + (i + 1)).show();
                if (i + 2 == count)
                    $(submmitButtonName).show();
                selectStep(i + 1);

				var q="step" + (i+1);
				if(q=='step1'){

				$("#birth_date").rules("add", {
				 required: true,
				 date: true,
				 messages: {
				   required: "Please enter your Birth Date",
				   date: "Please Enter Valid Date of Birth(dd/mm/yyyy)"
				 }
				});

				$("#drivers_license_number").rules("add", {
				 required: true,
				 license_us: true,
				 messages: {
				   required: "Please enter your License Number",
				   license_us: "Please Enter your Valid License Number"
				 }
				});

				$("#ssn").rules("add", {
				 required: true,
				 ssn_us: true,
				 messages: {
				   required: "Please enter your ssn Number",
				   ssn_us: "Please Enter your Valid ssn Number"
				 }
				});

				$("#drivers_license_state").rules("add", {
				 required: true,
				 messages: {
				   required: "Please enter your driving license state"
				 }
				});

			    }

				if(q=='step2'){

				   $("#employer").rules("add", {
					 required: true,
					 minlength: 10,
					 maxlength: 128,
					 messages: {
					   required: "Please enter Employer's Company Name",
					   minlength: "Please Enter minimum 10 characters"
					 }
					});

					$("#employer_phone").rules("add", {
					 required: true,
					 phoneUS: true,
					 messages: {
					   required: "Please enter Employer's Phone Number",
					   phoneUS: "Please Enter valid phone number"
					 }
					});

					$("#job_title").rules("add", {
					 required: true,
					 minlength: 2,
					 maxlength: 128,
					 messages: {
					   required: "Please enter your job title",
					   minlength: "Please Enter minimum 2 characters",
					   maxlength: "Please Enter only 128 characters only"
					 }
					});

				    $("#employer_months").rules("add", {
					 required: true,
					 messages: {
					   required: "Please enter your experience"
					 }
					});

					$(".active_military").rules("add", {
					 required: true,
					 messages: {
					   required: "Please select your option"
					 }
					});

					/*var original=$('.active_military').attr('class')
					$('.active_military').attr('class','required '+ original);*/
			    }

				if(q=='step3'){

				   $("#monthly_income").rules("add", {
					 required: true,
					 messages: {
					   required: "Please select your monthly income"
					 }
					});
					$("#income_source").rules("add", {
					 required: true,
					 messages: {
					   required: "Please select your income source"
					 }
					});
					$("#payment_frequency").rules("add", {
					 required: true,
					 messages: {
					   required: "Please select your payment frequency"
					 }
					});

				   $("#pay_date1").rules("add", {
					 required: true,
					 date: true,
					 messages: {
					   required: "Please enter your next pay date",
					   date: "Please Enter valid pay date (dd/mm/yyyy)"
					 }
					});

					$("#pay_date2").rules("add", {
					 required: true,
					 date: true,
					 messages: {
					   required: "Please enter your 2nd pay date",
					   date: "Please Enter valid pay date (dd/mm/yyyy)"
					 }
					});

			    }

				if(q=='step4'){
				    //alert("last step");

				   $("#bank_name").rules("add", {
					 required: true,
					 minlength: 2,
					 maxlength: 128,
					 messages: {
					   required: "Please enter your bank name",
					   minlength: "Please Enter minimum 2 characters",
					   maxlength: "Please Enter max 128 characters"
					 }
					});

					$("#bank_aba").rules("add", {
					 required: true,
					 number: true,
					 maxlength: 9,
					 messages: {
					   required: "Please enter your Routing Number",
					   number: "Please Enter valid Routing Number",
					   maxlength: "Please Enter max 9 Numbers"
					 }
					});

					$("#bank_account").rules("add", {
					 required: true,
					 number: true,
					 minlength: 4,
					 maxlength: 30,
					 messages: {
					   required: "Please enter your bank account Number",
					   number: "Please Enter valid bank account Number",
					   minlength: "Please Enter minimum 4 characters",
					   maxlength: "Please Enter max 30 characters"
					 }
					});

					$("#bank_type").rules("add", {
					 required: true,
					 messages: {
					   required: "Please select your account type"
					 }
					});

					$(".direct_deposit").rules("add", {
					 required: true,
					 messages: {
					   required: "Please select your option"
					 }
					});
			    }

			 }	
            });
        }

        function selectStep(i) {
            $("#steps li").removeClass("current");
            $("#stepDesc" + i).addClass("current");
        }

    }
})(jQuery);

Live Username and Email Availability Checking using PHP, jQuery and Ajax

muni — Mon, 20 May 2013 18:15:43 +0000

In this tutorial we are going to see how to check user name and email availability using PHP, jQuery and Ajax. This task is easily done with the help of jQuery validation plugin remote() method.

When user enters their name or email in the textbox, remote() method of jQuery validation plugin will send the entered value to the backend (PHP File). PHP file compares the entered user name or email with user name or email in the database. If user name or email already exists in the database then it will return ‘false’ string as response. If user name or email not exists already in the database then it will return ‘true’ string as response.

Check unique Username and Email Availability using PHP, jQuery and Ajax

Demo

Step 1:

Create index.php file and add following html code in it.

jQuery Validation Plugin Remote Method Example

Download

Step 2:

Now add following css style in the head of the html file.

Step 3:

Create dummy table using the following SQL query.

CREATE TABLE IF NOT EXISTS `users` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(100) NOT NULL,
  `email` varchar(100) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

then insert some dummy data’s into the table using following SQL query.

INSERT INTO `users` (`id`, `username`, `email`) VALUES
(1, 'muni', 'muni2explore@gmail.com'),
(2, 'sasi', 'sasi@gmail.com');

Step 4:

Create config.php file to database connection information separtely.

Step 5:

Now add the following jQuery validation script to add validation to user name email fields in the html form.

where remote() will call ajax_unique.php and send user entered information to PHP file during blur() jQuery event.

Step 6:

Here is PHP script that will receive ajax request and compares the users entered information with values in the database. Finally it sends response as ‘true’ or ‘false’ string.

0){
		  echo 'false';
	   }
	   else{
		 echo 'true';
	   }

}	
function unique_email($email=''){
	  $query="select count(email) from user where email='$email'";
	   $response=mysql_query($query);
	   $result=mysql_fetch_array($response);
	   if($result[0]>0){
		  echo 'false';
	   }
	   else{
		 echo 'true';
	   }

}
?>

Dynamically Add and Remove Textbox Using jQuery

muni — Sun, 19 May 2013 17:56:51 +0000

Dynamically add and delete textboxes using jQuery may you require in some projects or you like to do this to learn some interesting jQuery stuffs. Now we are going to make this stuff by going through step by step, so that you can make it yourself as well learn the logics and some basic of jQuery selectors and events.

Dynamically Add and Remove Textboxes using jQuery

Demo

step 1:
Create index.html and add jQuery libary, textbox and an image(addition).

Dynamic Textbox addition and Deletion using jQuery

Dynamically Add and Delete Textbox using jQuery

Download

Step 2:

Now add below css styles in the head section to add a beauty.

Step 3:
Now we come into party of jQuery. First task is when we clicked on plus image it will dynamically add textboxes into the form.

var id=2,txt_box;
	$('#button_pro').on('click','.add',function(){
		  $(this).remove();
		  txt_box='';
		  $("#button_pro").append(txt_box);
		  id++;
	});

when we clicked on the add image it will append textbox, plus image (addition) and minus image(Delete), as well we remove plus image next to the first textboxes.

Step 4:

Now add following script to do operation when we clicked on the minus image(Delete).

$('#button_pro').on('click','.remove',function(){
	        var parent=$(this).parent().prev().attr("id");
			var parent_im=$(this).parent().attr("id");
			$("#"+parent_im).slideUp('medium',function(){
				$("#"+parent_im).remove();
				if($('.add').length<1){
					$("#"+parent).append(' ');
				}
	        });
   });

This will get the current parent id of the textbox and hide textbox.

var parent_im=$(this).parent().attr("id");
$("#"+parent_im).slideUp('medium');

Following script gets the current textbox previous container id.

var parent=$(this).parent().prev().attr("id");

Following script checks if there is no add image it’ll add image to the form.

if($('.add').length<1){
  $("#"+parent).append(' ');
}

Please refer one of my interesting tutorial using jQuery– Dynamically Add or Remove Table Row Using jQuery

Quiz application Using PHP, jQuery, Ajax, MySQL and HTML5

muni — Mon, 29 Apr 2013 18:45:18 +0000

Everyone likes to make some hello world application, here is that type application you can make it youself.
I am going to make Quiz application using PHP, MySQL, HTML5, jQuery, Ajax and CSS3. Just follow this tutorial to make it this appliaction youself. At the end of this tutorial you are going to have nice working your Quiz Application.

Demo

Quiz Application using PHP, MySQL,jQuery, Ajax, html5 and css3

Here is the folder structure of the application.

Step 1:

Create a table for your Quiz application using following SQL Queries.

CREATE TABLE IF NOT EXISTS `questions` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `question_name` text NOT NULL,
  `answer1` varchar(50) NOT NULL,
  `answer2` varchar(50) NOT NULL,
  `answer3` varchar(50) NOT NULL,
  `answer4` varchar(50) NOT NULL,
  `answer` varchar(50) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;

Now insert some sample data’s in it.

INSERT INTO `questions` (`id`, `question_name`, `answer1`, `answer2`, `answer3`, `answer4`, `answer`) VALUES
(1, 'What does PHP stand for?', 'Personal Home Page', 'Personal Hypertext Processor', 'Private Home Page', 'PHP: Hypertext Preprocessor', '4'),
(2, 'How do you write "Hello World" in PHP', 'Document.Write("Hello World");', 'echo "Hello World";', '"Hello World";', '"Hello World";', '2'),
(3, 'The PHP syntax is most similar to:', 'VBScript', 'JavaScript', 'Perl and C', 'Perl and C', '3'),
(4, 'How do you get information from a form that is submitted using the "get" method?', 'Request.Form;', '$_GET[];', 'Request.QueryString;', 'Request.QueryString;', '2');

Download

Step 2:

Create config.php file to write database connection at one place.

Step 3:
Now create index.php file, and include config.php file at the first.

now html part. I added stylesheet in the head section and h1 tag in the body.




Demo Gird





Quiz using PHP, jQuery, Ajax and MySQL

Next query through the database to get questions and answers from the database.

Using that data’s we are going to dynamically generate form fields for all questions.






' name=''>
' for='1'>


' name=''>
' for='1'>


' name=''>
' for='1'>


' name=''>
' for='1'>
' name=''>



' value='Next!' name='question' class='butt'/>

Step 4:

now using jQuery i will show only one questions at a time.Here is jQuery script.

At the end final question I am posting all the answers to ajax.php file using ajax to validate right, wrong and unanswered questions.

$.ajax({
			type: "POST",
			url: "ajax.php",
			data: $('form').serialize(),
			success: function(msg) {
			  $("#quiz_form,#demo1").addClass("hide");
			  $('#result').show();
			  $('#result').append(msg);
			}
	     });

Step 5:

Finally create ajax.php file that’s going to validate your answers.

";
	 echo " Right Answer  : ". $right_answer."
";

	 echo " Wrong Answer  : ". $wrong_answer."
";

	 echo " Unanswered Question  : ". $unanswered."
";
	 echo "";
?>

jQuery Plugin to Disable Copy and Paste on Your Site

muni — Sat, 20 Apr 2013 11:09:07 +0000

This jQuery plugin helps you to prevent copy and paste of your post content from your blog. This mainly helps you to avoid someone from copying the your quality content.

Here is the demo page you can test it right now.

Demo

jQuery script to Disable Selection

This is very simple to add this in your blog. Just follow few steps to add it.

Step 1:

Add following jQuery plugins in the head ( )section of the html home page.

Note:

If your are a blogger, go to html editing page. Find tag and add above plugins before tag.

Download

Step2:

Now add following script just below that.

Note: Add this jQuery library only if you never add it before in your page.

If you felt any difficulty implementing this please leave the comments.

Autocomplete Using jQuery, Ajax, PHP and MySQL

muni — Thu, 11 Apr 2013 18:11:25 +0000

In this tutorial we are going to see autocomplete using jQuery, Ajax,PHP and MySQL.

Demo

AutoComplete Using jQuery, Ajax, PHP and MySQL

Follow each steps carefully to create this autocomplete function by yourself.

Step 1:

create this below table using the below query.

CREATE TABLE IF NOT EXISTS `auto` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `data` varchar(75) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=9 ;

Download

Step 2:

Create index.php file and add the following html codes to create autocomplete text box.

AutoComplete Using jQuery, Ajax, PHP and MySQL

Type Something:

Step 3:

Add the following css to add styles to our html we just created.

* {
   background-color: #16a085;
   margin: 0;
   padding: 0;
   color: white;
}
@font-face{
font-family: Lobster;
src: url('Lobster.otf');
}
h1{
font-family: Lobster;
text-align: center;
color: white;
margin-top: 50px;
font-size: 3em;
}

.ui-autocomplete-input{
 color: white;
}

.ui-widget {
    color: white;
    font-family: 'Lobster';
    font-size: 2em;
    text-align: center;
	margin-top: 130px;
}
#tags{

    background: none repeat scroll 0 0 white;
    height: 35px;
    width: 300px;
	color: blue;
	text-align: center;
	border: 2px solid white;
	border-radius: 5px;

}

Step 4:

Add following jQuery library files in the index.php file.

Step 5:

Now in the keyup() event of the autocomplete textbox, I am getting the user entered values.

Now using $.ajax() function, I am making ajax request to the php file that’s going to provide autocompletion values.

Step 6:

Create ajax.php file that gets the ajax request. It process the request data and provides auto completion values.

It gets post data, and using that post data we are going query the database. Result will be saved in array, finally the result is converted into json values and send it back to index.php file.