Category: Jquery

Drag and drop is a simple way to allow the users to upload their files by dropping to the container. Nowadays most websites allow uploading using both drag and drop and the file browse e.g. PushBullet, Facebook, SlideShare, etc.

I am using AJAX to save the file to the server which triggers when the file dropped on the target container.

In this tutorial, I show how you can implement the similar type of feature in your project and which show thumbnail when the file successfully uploaded.

Drag and drop file upload with jQuery and AJAX

Read More Drag and drop file upload with jQuery and AJAX


Like unlike functionality used in many websites to know the user response on their content or article.

In this tutorial, we are going to learn how to add like and unlike button within the post using jQuery, AJAX, and PHP.

What in the demonstration ?

I will show the list of posts within this posts they have like and unlike button. It also has a label which shows how many like and unlike get by a post. Whenever user clicked on a button the value of label gets changed.

Like unlike using AJAX, jQuery and PHP

Read More Like unlike using AJAX, jQuery and PHP


In this tutorial, we’re going to learn how you can integrate Google reCAPTCHA to your website using PHP.

Recaptcha generally used to protect the website from spammers. It is best and easy way to show CAPTCHA within your website.

How does it work?

When the user clicks on I’m not a Robot Checkbox  then it shows different types of images on the screen. Now user needs to select images based on asked question in reCAPTCHA. For example, it may ask the user to select all images which have Street number, select all house images, etc.

Read More Integrate Google reCAPTCHA using PHP

Jquery PHP

Autocomplete search element show suggestion based on user input e.g. listing all products which start with character ‘a’.

For implementing this in the program you need to send AJAX when a keyup event triggers on an input element.

What in the demonstration?

Show an input box for searching users and show the list of the result based on input. When the users select any of the items from the suggestion list then fetch details of the selected value and display it on the screen.

Make Autocomplete search with jQuery AJAX

Read More Make Autocomplete search with jQuery AJAX


Sometimes, we have a requirement to make another element dependent on another element selection.

For example, when you go for the Registration to the website when you select a country according to that State Dropdown is filled.

You can do this with only PHP but it required you to submit every time on selection.

This solves your problem but it is little frustrating because it submits every time even if the selection is right or wrong and this is not every user-friendly.

For making it better you can use AJAX with jQuery it loads new data and removes old one on each selection.

What in the Demonstration ?

Creating a Department drop-down list and based on the option selection show all existing users of that department on another Dropdown.

How to Auto populate dropdown with jQuery AJAX

Read More How to Auto populate dropdown with jQuery AJAX


In Previous tutorial, we have learned that how to implement Login script using PHP. In this tutorial, we’ll be creating an AJAX Login form using jQuery and PHP. What we going to…

Read More Login using AJAX Tutorial


In this tutorial, I show you How to use AJAX for uploading an Image file. That lets users upload their image and see their image preview after uploading.

This type of functionality you have already seen on many websites.

When does it use?

You can use it when you don’t want to disturb user experience and show a preview of an image after file uploaded successfully.

How to upload Image file using AJAX and jQuery

Read More How to upload Image file using AJAX and jQuery


Using Pagination you can divide the huge list of data in multiple parts or pages. The user only able to see specific numbers of records and need to navigate for viewing another list of records.

In the demonstration, I am creating a table structure which shows the list of records. Adding AJAX pagination which has a previous and next button for navigation.

Ajax Pagination with jQuery and PHP

Read More AJAX Pagination with jQuery and PHP


You have already seen in many websites while Registration they allow the user to enter its username. While entering username they instantly show that username is available or not.

When is it require?

Instead of showing the message to the user that this username is already taken by someone after form gets submits. By this way, the user needs to again fill the form and press Register button.

Why not show it before, it save users time and reduce the frustration of filling the form again and again.

When you instantly show the status without pressing the button then it looks more user-friendly.

Read More Check username is available or not using AJAX


In this tutorial, I am going to show to How you can create tabs using HTML,CSS, and jQuery. When did it use? Tabs are a type of container layout this you…

Read More Tabs using HTML,CSS and jQuery