HTML5 Inline Edit with PHP, MYSQL & jQuery Ajax

Last modified on by Karthikeyan K

Now a days, We are always looking for easiest way for people to interact with our Web Applications ie. HTML5 Inline Edit with PHP. I am going to tell you about In-Place Editing or Inline Editing.  Popular websites like facebook wants their user to edit their profile information without having to navigate to different form.

We normally implement this feature by tracking text regions for clicks & replacing those regions with text fields. Those fields send the changed text back to the server via Ajax. Previously I had published Advanced HTML5 tutorials on ClientSide, Offline & Geolocation

HTML5 Inline Editing with PHP, MYSQL & jQuery

But HTML5’s new attribute called contenteditable , It takes care of inline editing automatically. We should write little jQuery code to send the data back to the server, so we can save it. Biggest advantage is we don’t need to create and toggle hidden forms.

Contenteditable attribute that is available on almost every element. Simply adding this attribute turns any element into an editable field.

Some versions of IE don’t support this feature. But we can handle it with modifying our script a bit. We want to hide the link to the edit page and enable the Ajax support only If we have support for editable content.

HTML Table

HTML5 Inline Edit with PHP

<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td>1</td>
<td id="first_name:1" contenteditable="true">Karthikeyan</td>
<td id="last_name:1" contenteditable="true">K</td>
<td id="city:1" contenteditable="true">Chennai</td>
</tr>
<tr>
<td>2</td>
<td id="first_name:2" contenteditable="true">Facebook</td>
<td id="last_name:2" contenteditable="true">Inc</td>
<td id="city:2" contenteditable="true">California</td>
</tr>
<tr class="odd">
<td>3</td>
<td id="first_name:3" contenteditable="true">W3lessons</td>
<td id="last_name:3" contenteditable="true">Blog</td>
<td id="city:3" contenteditable="true">Chennai, India</td>
</tr>
</tbody>
</table>

Please look at this code first_name:1, Here first_name is the table field name where as 1 is the primary_key of the table, used to update the record

How to Persist the data?

Although the users can change the data, their changes will be lost If they refresh the page or navigate away. We need a way to submit those changes to our back end & we can do that easily with jQuery.

$(function(){
//acknowledgement message
var message_status = $("#status");
$("td[contenteditable=true]").blur(function(){
var field_userid = $(this).attr("id") ;
var value = $(this).text() ;
$.post('ajax.php' , field_userid + "=" + value, function(data){
if(data != '')
{
message_status.show();
message_status.text(data);
//hide the message
setTimeout(function(){message_status.hide()},3000);
}
});
});
});

We have added a event listenter to every td on the table that has contenteditable attribute set to true.

The Above jquery code will send the request to server whenever someone clicked the td region on the table

table_design

MYSQL Code to Update the Table Record

if(!empty($_POST))
{
//database settings
include "db_config.php";
foreach($_POST as $field_name => $val)
{
//clean post values
$field_userid = strip_tags(trim($field_name));
$val = strip_tags(trim(mysql_real_escape_string($val)));

//from the fieldname:user_id we need to get user_id
$split_data = explode(':', $field_userid);
$user_id = $split_data[1];
$field_name = $split_data[0];
if(!empty($user_id) && !empty($field_name) && !empty($val))
{
//update the values
mysql_query("UPDATE user_details SET $field_name = '$val' WHERE user_id = $user_id") or mysql_error();
echo "Updated";
} else {
echo "Invalid Requests";
}
}
} else {
echo "Invalid Requests";
}

Please don’t forget to share and subscribe to latest updates of the blog. Comments and feedbacks are always welcome!

Thanks!

You May Also Like

106 Responses

  1. elyoukey says:

    hopefully you are aware that your code is subject to mysql injection, XSS and that with such a code any hacker could break your website within minutes.

  2. Hackdeals Gurgaon says:

    HTML5 Hot Product. A Great Information.

  3. andy says:

    anyone finding that updating the second or third rows’ values updates to the wrong column in the table? for example, I put “London” in the second record’s city column, but “London” appears in the “first name” column for the second record…

    • andy says:

      simply fixed by changing the “<td id=" to the appropriate names. seems they were left duplicated in the downloaded code

  4. Sagar Shinde says:

    Thanks for the above 🙂
    If in case in wanted to insert data ..what will b the design technique should i use in same???

  5. Александр says:

    I can’t download the script.

  6. loik says:

    I waited 12 hours, I downloaded the file, I configured the config.php file, I put on my website and…. it doesn’t work !

  7. shastonian says:

    This worked first time for me. Thank you very much for sharing.

  8. Mashtullah Shavalullah says:

    Can this be modified to save the form data locally when there is no connection then when the connection comes back all the data is sent to the php file for saving to the db?
    Am looking at a scenarion where the html and javascript file are on a mobile device then the php file is on a web server.

  9. HGuti says:

    Awesome! I would add a pencil icon or something like that on hover in the fields just to let the user know they are editable. At first glance, is not very intuitive.

  10. Edy says:

    Awesome! Thanks

  11. Surojit Seal says:

    I registered my email 2 days ago, however I cannot download, it says my email is not registered yet. But when I try to register again, it says already registered. I am baffled. Please help.

  12. download link not working.

  13. Guest says:

    Download not working…

  14. Druskj Lidheszind says:

    Download not working…

    Download not working…

    Download not working…

    etc.

    FeedBurner is not a tool, is a “virus”: leaves it!

  15. Wade says:

    Please update the subscriber db. I would like to download

  16. chaitanya says:

    All The best Nice Templates

  17. stephen aryee says:

    i have subscribed with my email: how can i download the ”
    HTML5 Inline Edit with jQuery Ajax, PHP & MYSQL”

  18. vtech says:

    i have subscribed with my email yesterday, but until now don’t appear may email
    error: Email does not exist in our database. Please use below form to subscribe

  19. David Beach says:

    Nice work i like this code, its simple does the job and zero bloat 🙂 plus its simplistic enough that you can add on your own customizations without bloating it plus it is great for someone getting into web design to experiment with to learn how you achieved this.

  20. Louis Roll says:

    I have subscribed with my email, too.
    More than 10h later, it is still no download. Please fix this FeedBurner stuff. It is embarrassing to write here asking for download instead of discussing your good work.

  21. RML says:

    Hi Karthi, I have just subscribed to this. Hope I can download the code soon. Thanks a lot for sharing your knowledge with the IT community. =)

  22. Cris Rieder says:

    hi Karthikeyan
    thanks for sharing this interesting material
    problems with downloading the files
    please help
    after a day of waiting i still get the message:
    “Email does not exist in our database. Please use below form to subscribe”
    although i am obviously logged in right now ; )
    you can also just send me the files to cris.r@sezanm.cz, if that is less complicated
    anyway, i’d be grateful
    regards
    cris

  23. Dom says:

    I signed up more than 10 hrs ago, but it says I am not registered

  24. Anthony says:

    Please Can you update your database ? I signed up more than 10. Thanks 🙂

  25. denny says:

    i have subscribed with my email: how can i download the ”
    HTML5 Inline Edit with jQuery Ajax, PHP & MYSQL”

  26. em says:

    subscribed with my email. pls update Subscribers list

  27. merseybeat101 says:

    Yes this idiot is just an email hacker! Do not entertain the prick!

  28. Simon Flatres says:

    Thank you for the excellent tutorial. Please could you update your subscribers list so that I can download the demo. Simon

  29. lhutchison says:

    Please update subscriber database so I may download. Thanks.

  30. sgs says:

    Please could you update your subscribers list so that I can download the demo. Thank you!

  31. test says:

    pls updated

  32. devi says:

    can you please update

  33. Thor says:

    It seems your system must not be working too well since I recieved a newsletter after 24hrs but after 30hrs it still informs me that my email does not exist in your database.

  34. Omar Alejandro Leal Lopez says:

    can you update your database, please?

  35. Radu says:

    could you update the database please

  36. Penguin Ninja says:

    please update database
    thank you

  37. Sasori says:

    please update DB

  38. Update DB please, this is so helpfull

  39. T. says:

    please update database
    thank you 🙂

  40. sterlion says:

    Thanks sir thanks for good work….

  41. Peter says:

    please update db.

  42. Art says:

    Please update DB svp

  43. Anand Krishnan says:

    Hi , I am trying to do this on a dynamically generated table, Could you help me out with that ?

  44. Andy Jones says:

    cant download your subscribe doesnt work i subscribed days ago but when i try to download it says my email is not found if your such a master in php fix it !!!!!

  45. Andy Jones says:

    i think your just fishing for emails because your downloads are fake!!!!!!!

  46. Lorkin says:

    Don’t forget about subscribers database 😉

  47. XIInator says:

    Trying to get the download. I hit subscribe and confirmed; however I’m still not able to download

  48. Starr says:

    Did not receive download… this is probably a fishing scam. FYI

  49. Ranjith says:

    HTML:
    <td data-id = "” contenteditable=”true” >

    JQuery :

    $(“td”).blur(function(){
    var val = $(this).index();
    var tdvalue = $(this).text();
    $.ajax({
    url:’updateUrl.php?val=’+val+’&tdvalue=’+tdvalue,
    success:function(data)
    {
    alert(data)

    }
    });

    });

    PHP
    $value = $_REQUEST[“tdvalue”];
    $sno = $_REQUEST[“sno”];
    if($_REQUEST[“val”] == 0)
    {
    mysql_query(‘update table_name set hours=”‘.$value.'” where sno=”‘.$sno.'” limit 1’,$con);
    echo mysql_affected_rows();
    }

  50. Jiman Ji says:

    Subscribed. message: “New subscribers email data will be updated every 10 hours.” LOL?

  51. Slavek says:

    Please update DB thx

  52. Slavek says:

    Still no change, do u watch it here sometimes ?:) update please

  53. Kim says:

    Please update DB Thanks! Just subscribed.

  54. Gerald says:

    Please update DB Thanks! Just subscribed.

  55. Zois Pag says:

    Please update DB! I subscribed yesterday! Thanks

  56. Narender says:

    Please update DB!! 2 days back I did scbsceibe..please help

  57. David Nevels says:

    Please update DB! I subscribed yesterday.

  58. sachin dhotre says:

    it edit all table td at a time or display massage for multiple table at same time how can i solve this problem
    I going to show massage and edit for only one table …please help me…….thanks ….

  59. bird0001 says:

    please update database

  60. Subhendu Roy says:

    Thanks a lot dude.The stuff was of graet help.

  61. shashank says:

    please update db!

  62. BuilderBoy says:

    Any chance you’re ever going to update the DB

  63. Petr Liška says:

    please update DB

  64. Joe Gullo says:

    I’m stumped, is there a way to make this work with checkboxes and select-dropdowns? Checkbox returns nothing in “$val” and the select-dropdown returns ALL values in the list with a n in front of them?

  65. Guisel G. says:

    update DB

  66. karoolpl says:

    can you update databse ? thx in advice

  67. Lost in Malta says:

    “New subscribers email data will be updated every 10 hours.!!!!!”

    Why do you need to update the database every 10 hours?
    Stop fishing for emails.
    Just make the download available.

  68. LoreeKitson5 says:

    Nice comments , I learned a lot from the specifics – Does someone know where I would be able to get a blank a form form to edit ?

  69. DanTherrien says:

    Can you please update the DB

  70. EliasOrozko says:

    can you please update the Database?

  71. Parimal Rathod says:

    How can we update Mysql table through PHP like we do in Excel. After updating data in table clicking on
    submit / update button … ?

  72. Kraine says:

    Hi.. I would be grateful if you could update the DB, I really need this now.. Thanks

  73. Lynn says:

    Hi
    I joined the subscriber list to download this code. And I already confirm my account via email link. But still when I click the download button, it’s showing the email address is not in the database…
    Please fix that issues, thanks
    (Thanks for codes, posts, too)

  74. Ricna says:

    Can’t download :/

  75. Anders says:

    waited and tried over 24 hours, no luck ;(

  76. Geek445 says:

    May you please update the subscribers database? We need this it is very useful. Thanks in advance

  77. Sai Ram says:

    HI Karthikeyan,

    I have some repetitive data to be downloaded from a website on a daily basis onto excel – i now found that i can this by way of an
    import – but the site i am using has a login id and password. I am unable to go beyond this as there is a JSON error when I enter the password , would you be aware of the solution to this issue.

    Thanks for your time in advance.

  78. Lokman Boukhoulda says:

    Very useful and simply explained! Thank you Karthikeyan!

  79. Suganya says:

    please update the database. unable to download.

  80. Gunjan says:

    Can’t download..

  81. kanchan says:

    which Jequery you have used for this

  82. Shrinath SG says:

    why do this nonsense? I went by your statement in order to download the so called jQuery plug-in, and subscribed but realized its just a article which is fake after reading all the below comments!!

Leave a Reply

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