Home / Ajax / Live edit from a dropdown list using jQuery, Ajax and PHP

Live edit from a dropdown list using jQuery, Ajax and PHP

In this tutorial let us see how to design a live edit option from a dropdown list. This approach is similar to Live Table Edit but with a dropdown list sliding with available options from the database. I have designed this task especially for my readers who wanted me to post a tutorial on the mentioned topic. Remember we are not going to use table in this tutorial!

We will be following a very straight forward approach to achieve this. I’ve used Bootstrap for the design and jQuery Library for transitions. Before going to the design let us set up the table and connection to DB

Database Table

Having the table created dump records into the table

In the Mark up I have fetched the brand whose status is 1 using PHP snippet inside a DIV tag. This is to show the default brand so do not confuse yourselves.

Mark Up

I’ve used Bootstrap classes to make the design responsive and clean. Simply assign classes as shown below with required HTML elements

That’s pretty much the HTML! Let us add some cosmetics to it…

The CSS

If you want to have custom classes then make sure to change the classes in the script as well.

The jQuery Script

Ajax call to fetch the list of brands from the database.

Ajax call to update the selected brand into the database.

The above script is very simple yet so powerful that it can be integrated into various web applications and mini projects. This can be implemented in several ways but I personally prefer this robust method. Now we have set up the data transfer method using jQuery ajax call. You should ask yourself two questions!

1. How does the dropdown populate records from the database?
2. How does the brand get updated?

Well you will find the answer in the PHP code which is very easy to understand.

The PHP

In the following code you will find header(‘content-type: application/json; charset=utf-8’). Here we command the page to output data only in JSON format and nothing else! This is optional but I prefer to use only JSON in all of my projects, even in major Web Applications like social networks, Airline Ticket Booking and other projects of similar standards.

The other important thing to be noted is header(“access-control-allow-origin: *”). The * symbol in the CORS (Cross Origin Resource Sharing) setting denotes that the output from this page can be shared to any domain and IP address. To restrict the data access to a specific IP or domain just use this header(“access-control-allow-origin: www.jqueryajaxphp.com”). This lets only www.jqueryajaxphp.com to read data from the PHP page. You can learn more about CORS and tweaks at W3 CORS.

Having set up the Headers and setting up the connection to the database let us first see how to fetch brands from the database via ajax call. Remember we have written two ajax calls one for fetching brands and the other for updating the selected brand.

Fetch Brands

Update Brand

That’s it! Having this logic uderstood you can play with design, transitions and extend the implementation based on your project requirement.

Download   Preview

About Ashik

I am a Full Stack Developer and love to work on APIs and Apps. Hardcore lover of Ionic and Laravel <3

Check Also

Weather forecast API using jQuery, Ajax and PHP

Weather forecast API is widely used as widgets in small blogs to huge news website …

  • Seller Veditsolutions

    How can I implement this wordpress. I am looking for a plugin like this for wordpres.

  • divyanshu bhushan

    How can I change the url? Somehow like this:- when I select the ferrari, in the url it is something/id=ferrari and when I select BMW, in the url, it is something/id=BMW ?
    It would be great, if you help me with this query.I want all this through ajax.

  • webwakko

    the code generates multiple times the same choicepart when clicking very fast 🙁

  • uma

    hi
    i need script for dropdownlist based editing pls share that script

Do you wan't to get notified?

I will not spam your inbox. I will only send email whenever I publish a new article or to share information about technology

You have Successfully Subscribed!