---
description: https://www.phpflow.com/php/html5-inline-editing-php-mysql-jquery-ajax/
---

# HTML5 Inline Editing With PHP, MYSQL & JQuery Ajax

## HTML5 Inline Editing With PHP, MYSQL & JQuery Ajax

Last Updated On: [December 28, 2015](https://www.phpflow.com/php/html5-inline-editing-php-mysql-jquery-ajax/)| By: [Parvez](https://www.phpflow.com/author/admin/)

This tutorial help to understand HTML5 inline editing with PHP and MYSQL,in Previous tutorial [HTML inline editing](https://www.phpflow.com/html5/simple-example-of-editable-table-in-html5/),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](https://www.phpflow.com/wp-content/uploads/2015/11/html5_inline_editing_with_php_demo.png)

### 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,

* [Simple Example of Editable Table in HTML5](https://www.phpflow.com/html5/simple-example-of-editable-table-in-html5/)
* [X-editable – In-place Editing with Bootstrap and jQuery](https://www.phpflow.com/jquery-plugin-2/x-editable-in-place-editing-with-twitter-bootstrap-jquery-ui-or-pure-jquery/)

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

| 12 | \<script type="text/javascript" src="jquery-1.11.1.min.js">\</script>\<link rel="stylesheet" type="text/css" href="bootstrap.min.css"/> |
| -- | --------------------------------------------------------------------------------------------------------------------------------------- |

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

| 12345678910111213141516 | \<?php/\* Database connection start \*/$servername = "localhost";$username = "root";$password = "";$dbname = "test"; $conn = mysqli\_connect($servername, $username, $password, $dbname) or die("Connection failed: " . mysqli\_connect\_error()); /\* check connection \*/if (mysqli\_connect\_errno()) {    printf("Connect failed: %s\n", mysqli\_connect\_error());    exit();} ?> |
| ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

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

| 123456 | \<?php//include connection fileinclude\_once("connection.php");$sql = "SELECT \* FROM \`employee\`";$queryRecords = mysqli\_query($conn, $sql) or die("error to fetch employees data");?> |
| ------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

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.

| 123456789101112131415161718 | \<table id="employee\_grid" class="table table-condensed table-hover table-striped bootgrid-table" width="60%" cellspacing="0">   \<thead>      \<tr>         \<th>Name\</th>         \<th>Salary\</th>         \<th>Age\</th>      \</tr>   \</thead>   \<tbody id="\_editable\_table">      \<?php foreach($queryRecords as $res) :?>      \<tr data-row-id="\<?php echo $res\['id'];?>">         \<td class="editable-col" contenteditable="true" col-index='0' oldVal ="\<?php echo $res\['employee\_name'];?>">\<?php echo $res\['employee\_name'];?>\</td>         \<td class="editable-col" contenteditable="true" col-index='1' oldVal ="\<?php echo $res\['employee\_salary'];?>">\<?php echo $res\['employee\_salary'];?>\</td>         \<td class="editable-col" contenteditable="true" col-index='2' oldVal ="\<?php echo $res\['employee\_age'];?>">\<?php echo $res\['employee\_age'];?>\</td>      \</tr>    \<?php endforeach;?>   \</tbody>\</table> |
| --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

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.

| 123456789101112131415161718192021222324252627282930313233 | \<script type="text/javascript">$(document).ready(function(){  $('td.editable-col').on('focusout', function() {    data = {};    data\['val'] = $(this).text();    data\['id'] = $(this).parent('tr').attr('data-row-id');    data\['index'] = $(this).attr('col-index');      if($(this).attr('oldVal') === data\['val'])    return false;        $.ajax({                      type: "POST",            url: "server.php",            cache:false,            data: data,          dataType: "json",                success: function(response)            {              //$("#loading").hide();            if(response.status) {              $("#msg").removeClass('alert-danger');              $("#msg").addClass('alert-success').html(response.msg);            } else {              $("#msg").removeClass('alert-success');              $("#msg").addClass('alert-danger').html(response.msg);            }          }          });  });}); \</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`.

| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748 | \<?php  //include connection file  include\_once("connection.php");    //define index of column  $columns = array(    0 =>'employee\_name',    1 => 'employee\_salary',    2 => 'employee\_age'  );  $error = true;  $colVal = '';  $colIndex = $rowId = 0;    $msg = array('status' => !$error, 'msg' => 'Failed! updation in mysql');   if(isset($\_POST)){    if(isset($\_POST\['val']) && !empty($\_POST\['val']) && $error) {      $colVal = $\_POST\['val'];      $error = false;          } else {      $error = true;    }    if(isset($\_POST\['index']) && $\_POST\['index'] >= 0 &&  $error) {      $colIndex = $\_POST\['index'];      $error = false;    } else {      $error = true;    }    if(isset($\_POST\['id']) && $\_POST\['id'] > 0 && $error) {      $rowId = $\_POST\['id'];      $error = false;    } else {      $error = true;    }      if(!$error) {        $sql = "UPDATE employee SET ".$columns\[$colIndex]." = '".$colVal."' WHERE id='".$rowId."'";        $status = mysqli\_query($conn, $sql) or die("database error:". mysqli\_error($conn));        $msg = array('status' => !$error, 'msg' => 'Success! updation in mysql');    }  }    // send data as json format  echo json\_encode($msg);  ?> |
| --------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

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

[  Live Demo](https://www.phpflow.com/demo/html5_inline_editing_with_php_demo/)

[ Download Source Code](https://www.phpflow.com/source_code/html5_inline_editing_with_php_code/html5_inline_editing_with_php_code.zip)\
