HTML5 Inline Editing with PHP, MYSQL & jQuery Ajax

This tutorial help to understand HTML5 inline editing with PHP and MYSQL,in Previous tutorial HTML inline editing,We have learn how to create any HTML control inline editable using contenteditable attribute.Inline Editable will work on only HTML5 supported browser.

There are a lot of jQuery plugin which also provide inline editable functionality but using HTML5 you can do very easily without any overhead of jquery library.You just need some ajax jquery coding to update data into MySQL database to update record.This will help on single column updated instead of whole form data.

html5 inline editing with php demo

How will Work inline Editing with HTML5,PHP and Mysql

We will create listing all records into table.We will add contenteditable attribute on all 'td's (

) of table where i need provide inline editable functionality.

Whenever user will change TD data, i will capture event 'focusout' using jQuery and get updated data of td, finally call php function to updated data into mysql using changed td data.

Following files will participate in this example

  1. connection.php : This file used to create connection with mysql
  2. index.php : This file used to display records into table and inline editing option
  3. server.php : This file will call on ajax request and update data into mysql

Also checkout other related tutorials,

Step 1: include bootstrap css file and jQuery library into head section of page.

Step 2: Created Connection file connection.php for database connection with php.

Step 3: Get records from mysql and store in variable,put below code into index.php file.

Here i am featching data from mysql for display data into HTML table.You need to replace table name 'employee' with your table name.

Step 3: Create html table and iterate records into row.

Here i am using step-2 $queryRecords variable and iterate on tr using php foreach() function to display table data,You can see i have added hard coded col-index='*' attribute on each table td for identification of column name.I have also addaed oldVal='*' attribute to store old valve of table, if the new and old value is same we will not send server request.
i am also adding data-row-id="" attribute on on each tr of table to indentify row-id of data.This 'id' will be primary key of employee table.This tells for which row of column we are updating.

Step 4: Created AjAX jquery request to update data into mysql using server side php script.

Here You can see i am attaching event 'focusout' on each td of table and send request if the value of td changed, first I am getting changed value td and then get row-id of data tuple with column-id.Aggregate all params and send to server for update column value.

Step 5: Now update data into mysql using server.php.

This is a simple code php code , i haven’t added sql injection prevent code and not combined all validate conditions into complex php code.

Conclusion

I have explain how to implement HTML5 inline editing with PHP,MYSQL and jQuery AJAX.You can easily integrate inline editing with in your application using HTML5 contenteditable attribute.

Download Code and Demo Link

34 thoughts on “HTML5 Inline Editing with PHP, MYSQL & jQuery Ajax

  1. Can you help me? Only the first column is editable, when I try any other column the change reflect in the first one.

    • The reason was ‘$sql = “UPDATE employee SET “.$columns[$colIndex].” = ‘”.$colVal.”‘ WHERE id='”.$rowId.”‘”;’, i am not sending updated colindex which want to update.

  2. hy, thanks the script before but in there i have a question :
    how to make other coumn can be editable. and when iam try to edit the other column the reflect is in first column.

      • No it’s not working, the error handling logic is broken. While $colVal gets the value from $_POST[‘val’] correctly, it changes $error to false. And for that reason $colIndex never get’s the value of $_POST[‘index’] (so it puts the new updated values to the first column whose id is 0), and the $error is changed back to true, which makes the updated row correct again.

  3. Hi, I’m running the script on local Ubuntu/Xammp. Per row only the first field updates fine, second and third overwrite the first and don’t change. To create mySQL table I used following:

    SET SQL_MODE=”NO_AUTO_VALUE_ON_ZERO”;
    CREATE TABLE IF NOT EXISTS employee (
    id int(11) NOT NULL AUTO_INCREMENT,
    employee_name varchar(50) NOT NULL,
    employee_salary varchar(50) NOT NULL,
    employee_age varchar(50) NOT NULL,
    PRIMARY KEY (id)
    ) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;

    INSERT INTO employee (id, employee_name, employee_salary, employee_age) VALUES
    (1, ‘John’, ‘1000’, ’22’),
    (2, ‘Judy’, ‘1000’, ’24’),
    (3, ‘Claire’, ‘1000’, ’26’),
    (4, ‘Mike’, ‘1200’, ’28’);

    To see all values in index.php I changed line 4 from:

    $sql = “SELECT * FROM employee limit 1,10 “;

    to:

    $sql = “SELECT * FROM employee limit 0,10 “;

    I have been fiddeling quite a while on this and will keep on, because it’s very nice rocket technology. Some help can be helpful. Thx 😉

  4. Hi thank you for this post. it’s really helped.
    And I wondering if I can update the (inline-input-data) with a button to each row, if possible?
    Could you please help me where can I define to follow the button click event?

  5. Hi, Thank you so much for the post! It’s very helpful.

    I am facing a problem. The data is not loading into the table. I have created an “emplyoee” table in my database with the exact fields and entered the connection details. It would be grate of you could help me out.

    Thanks in advance!

  6. make sure dbname, username and password updated in connnection.php file, the table name should be employee and connection file included into server.php file.

    • Thanks for sending me the files. Yes. My browser supports HTML5. And I have also tested your files by cloning the ’employee’ table to my database. There turns nothing for the table on the webpage if I post the files to the Linux server. However, it works perfect on my local computer. Do you think if there is any environment issues?
      Thanks!

  7. I have all the code working just fine … however If I enter some text in a Textarea, including some line breaks …. it does not maintain the line breaks and puts all the text on the same line …

    So the line breaks are not making there way to the database and when the page is updated it is one long line of text all mashed together.

    How can I maintain the line breaks when written to the database ?

  8. Thanks for this post – very clear and helpful in explaining this. I have set it up though I keep getting the error – Failed! updation in mysql when i try to test making a change. Can you give an idea what the problem might be?

  9. I do have one question. It seems that if we are using this on a big table with many rows, it does not work until the page is fully loaded, so if a user loads the table and starts trying to edit right away, those edits are not saved. Do you know of a good way around this? Perhaps preventing the contenteditable from working until the page is fully loaded?

  10. Hello! Great tip! Thank you.
    I’m wondering to build a simple invoice for myself :-).
    So after the head of the invoice (myself recipient + customer recipient details) I’m going to add the rows for the items, typically
    Quantity, description, price, VAT, rowtotal

    This will be a grid of data and for a new invoice it will be empty and with just one row (which fields are empty)

    So basically I need the cells of this grid to initially be input fields.

    With javascript I know how to add/append the additional subsequent lines.

    I’m a bit stuck in how to open/begin this 🙂 since we are not editing existing rows (this will happen, eventually, later), instead I’m creating these records from scratch for this new invoice.

    The final result will be that I have the grid made of the items rows and these must be saved into the DB related to this invoice.

    Can you kindly hint on how to setup this job and so if the code you have kindly provided could be the right base where to start from?
    Thank you

Leave a Reply

Your email address will not be published. Required fields are marked *