Home / jQuery / Live text edit from select field using jQuery Ajax and PHP

Live text edit from select field using jQuery Ajax and PHP

Live text edit is becoming trendy in modern web development and after a very strong support and request from you followers I’m writing a tutorial on the mentioned topic. This tutorial is very similar to Live table edit in methodology but has a different approach in the data processing. We will be using X-Editable to achieve this.

Now lets us add few brand names to the table,

The database is now ready to use. Next grab the copies of X-Editable and Bootstrap’s CSS & JS Library and put them somewhere into your project folder. I always use assets folder to place the css and js files.


Simply add an anchor tag <a> with a required attribute data-type=”select”. This will show a select box in the pop up.

The PHP code   echo $fetch[‘brand’]; will display the active brand while the page loads.

Request to Server

We will write only one request code block that will perform two operations,

  1. Fetch items to be display in the select field
  2. Update brand when the users confirms

Note: The update request will be a POST request sent to the server


Lets write a config file to connect to the database


– fetch all brands available in the database


– update brand to active state

First change the status of all brands to inactive and then change status of chosen brand to active

That’s it! You are ready to test the project. Any suggestions will be really appreciated.

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 …

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!