Category: Jquery

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.

In the tutorial, 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

AJAX Jquery 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.

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

AJAX Jquery PHP

Sometimes it requires to auto populate data on the element based on selection on another element e.g. City names based on a state.

You can do this with the 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.

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

In the demonstration, I am 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

AJAX Jquery PHP

A Login page is one of the basic requirement when creating a registration based website where the user can register to the website and sign in to its account to manage.

In this case, you can use AJAX to create an user-friendly login page.

Which checks the entered username and password in the MySQL database table without reloading the web page. If the user is not available then show an error message on the screen otherwise redirect the user to a new page.

Login page with jQuery and AJAX

AJAX Jquery PHP

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

AJAX Jquery PHP

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

AJAX Jquery PHP

If you allowing the user to login with their username and password then you have to make sure that every user has the unique username.

When the user goes for registration on your site check username either after form submitting or check it with AJAX while entering.

In this tutorial, I am using Jquery AJAX to check username is available or not.

Check username availability with jQuery and AJAX

AJAX Jquery PHP

Tab content area occupies less space and can handle a lot of information within the web page. It displays multiple sections in a neat way.

This makes easier for the user to quickly switch from one section to the other.

In this tutorial, I am creating a simple Tab layout with HTML, CSS, and jQuery.

Simple Tab content area with HTML, CSS and jQuery

Jquery

In this tutorial, creating the accordion using HTML, CSS, and jQuery.

The accordion is a vertically stacked list of items. Each item can be “expanded” or “collapsed” to reveal the content associated with that item. There can be zero expanded items, exactly one, or more than one item expanded at a time, depending on the configuration.

Accordions are popular because they allow developers to force large amounts of content into tiny spaces on the page.

How to make Accordion with HTML, CSS and jQuery

Jquery