PHP / jQuery - Instant Editable Fields

Hi,

I was looking for a solution (using php/jquery) similar to the one as shown in the screen shot.

I have a user database with 3 fields:

id (auto number)
name (varchar)
email (varchar)

the user lists gets populated in a grid (html table), clicking on either the name or the email address would convert the label into an editable text box and after editing once i remove the cursor from the textbox, the data gets saved in the database.

Any help with a code snippet will be highly appreciated.

Thanks

 

Try this:

<style>
  input{border:none}
  input:focus{border:1px solid black}
</style>
<input name="e1" value="test name" onblur="senddata(this)">

Code (markup):

 

You'll probably also want something like this (pseudocode):

function fieldswitch(this)
{
      this.innerHTML = '<input name="e1" value="test name" onblur="senddata(this)">';
}

<div id="input_name" onclick="fieldswitch(this)">John Smith</div>

HTML:

 

Thanks for the help