PHP / jQuery - Instant Editable Fields - Computer Programmers, Programming Forum

cancer10 · #1 12-10-2009

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

vento · #2 12-10-2009

PHP is definitely not able to do this. You have to use JavaSript for this. It's a pretty simple one:

Code:

<html>
<body>
<div id="name"></div>
<form>
	<input type="text" id="nameField" onkeypress="updateName(this.value)"/>
</form>

<script type="text/javascript">
function updateName(sName)
{
	document.getElementById('name').innerHTML = sName;
}
</script>
</body>
</html>

I wrote it with all the HTML tags so you can copy-paste on your localhost and test it. But I believe that's exactly what you want. Isn't it?

There is another option to use onChange instead of onkeypress. This would give you an effect that the name field is updated when the focus is lost. Let's say that the user goes onto the next field.

---
I've got an idea that you might need this function for more than one input field. Here is what I would suggest:

Code:

<html>
<body>
<div id="name"></div>
<form>
	<input type="text" id="nameField" onkeypress="update(this.value, 'name')"/>
</form>

<script type="text/javascript">
function update(sName, element)
{
	if( typeof(element) == 'string' )
		element = document.getElementById(element);
	if( element == null )
		return;
	element.innerHTML = sName;
}
</script>
</body>
</html>

That checking can be removed if you won't forget to add quotes or send another element variable. I just prefer to check it before using. That causes less problems.