JQuery Archives - Page 39 of 40

Make Autocomplete Search with jQuery AJAX

Last updated on December 22, 2022 by Yogesh Singh

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

It makes easier for the user to search for an item from the list and select it from the suggestion list.

Require jQuery AJAX for implementing this.

Whenever the user enters a character send an AJAX request to fetch records with PHP and display the result.

In the demonstration, I show a textbox to search users. When an item selected from the suggestion list then fetch details of the selected users and display on the screen.

How to Auto populate dropdown with jQuery AJAX

Last updated on December 12, 2022 by Yogesh Singh

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

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

This solves the problem but it is a 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 which loads new data and removes the 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.

Login page with jQuery and AJAX

Last updated on October 12, 2020 by Yogesh Singh

A Login page is one of the basic requirements 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 a user-friendly login page.

With AJAX you can directly check the entered username and password are correct or not in MySQL database without reloading the whole page.

If the user is registered then redirect the user to a home page otherwise display an error.

A Step-by-Step Guide to File Upload with PHP AJAX and jQuery

Last updated on March 14, 2023 by Yogesh Singh

Uploading the files to a server is a common task in web development.

In PHP you can easily upload any type of file on the server using the move_uploaded_file() method. But it requires a form to be submitted for uploading the selected file.

You can make this process smoother with jQuery AJAX, it also improves user experience. You can directly display the image or file preview after it is been uploaded or alert an error if file is not validated without reloading the page.

For this FormData object is use to pass the selected file to the server using AJAX.

In this tutorial, you’ll learn step-by-step how to use PHP jQuery, and AJAX to upload files with validation and display its preview.