HTML5 Inline Edit with PHP, MYSQL & jQuery Ajax

by
Post Views: 28,635

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.

Contents

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";

}
View Live Demo

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

Never Miss Any Web Tutorials, Guides, Tips and Free eBooks

Join Our Community Of 50,000+ Web Lovers and get a weekly newsletter in your inbox

 

I hate spam too. Unsubscribe at any time.

106 thoughts on “HTML5 Inline Edit with PHP, MYSQL & jQuery Ajax”

  2. 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!!

    Reply

  7. 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.

    Reply

  11. 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)

    Reply

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

    Reply

  16. 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 ?

    Reply

  17. “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.

    Reply

  20. 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?

    Reply

  26. 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 ….

    Reply

  35. 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();
    }

    Reply

  40. 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 !!!!!

    Reply

  51. 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.

    Reply

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

    Reply

  62. 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

    Reply

  63. 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. =)

    Reply

  64. 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.

    Reply

  65. 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.

    Reply

  66. 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

    Reply

  70. Download not working…

    Download not working…

    Download not working…

    etc.

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

    Reply

  73. 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.

    Reply

  75. 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.

    Reply

  76. 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.

    Reply

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

    Reply

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

    Reply

  81. 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…

    Reply

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

      Reply

  83. 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.

    Reply

Leave a Comment