PHP / jQuery - Instant Editable Fields

**cancer10** · 12-10-2009, 05:19 PM

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

**JShor** · 12-10-2009, 09:00 PM

Does it HAVE to be jquery? It can be done with simple ajax, it's much faster and cleaner this way.

The ajax script:

Code:

<script type="text/javascript">
function chgVals(obj, name) {
var url = "exechgs.php"; // name of php file to execute changes
var params = "field=" + name + "&value=" + obj.getElementsByTagName(0).value + '"&id=' + obj.id;

http.open("POST", url + "?" + params, true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", params.length);
http.setRequestHeader("Connection", "close");
http.send(params);
obj.innerHTML = obj.value;
}

function chgType(obj, name) {
var originalHTML = obj.innerHTML;
obj.innerHTML = '<input type="text" name="' + name + '" value="' + originalHTML + '">';
}
</script>

The form, which needs to have the fields populated from the db.

PHP Code:


<?php

$q = mysql_query("SELECT * FROM user_db") or die(mysql_error());

while($r = mysql_fetch_array( $q )) {
echo <<<EOF
<table>
  <tr>
    <td>Name:</td>
    <td><span id="field$r[id]" onmouseover="chgType(this, 'fullName')" onblur="chgVals(this, 'fullName')">$r[name]</span></td>
  </tr>
  <tr>
    <td>Email:</td>
    <td><span id="field$r[id]" onmouseover="chgType(this, 'email')" onblur="chgVals(this, 'email')">$r[email]</span></td>
  </tr>
</table>

EOF;

}

?>

The php to execute:

PHP Code:


<?php

$sql = "UPDATE `user_db` SET $_GET[field]='$_GET[value]' WHERE id='$_GET[id]'";

mysql_query($sql);

?>

Please be aware, for purposes of this script, I automatically named the db "user_db" but you need to change that to the ACTUAL name of your existing db.

Yes, I wrote all that for you. You're welcome

**djr33** · 12-10-2009, 09:49 PM

One major issue here is security. $_GET['value'] must be escaped (mysql_real_escape_string() would work), and the ajax must use security to make sure no one else can edit your information:
Include the same login check/etc on the ajax requested php page as on the main php page. This can be done using sessions, and simply use exit() if they are not valid. If you do not do this, serious consequences (such as at least random input and spam to deleted databases by hackers) could occur.
The rest of that looks like a good start.

**JShor** · 12-10-2009, 11:38 PM

Agreed. I didn't think of that, but you should have an authentication validation BEFORE any data is changed in mysql.

**jscheuer1** · 12-11-2009, 01:13 AM

I don't know much about the server side for this, or even what you might want the form to do when it submits, but I imagine that could all be pretty much the standard stuff. Here's a jQuery solution for the text to text input thing:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
span.switch {
	display: none;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
document.write('<style type="text/css">span.switch {display: inline;}input.switch {display: none;}<\/style>');
jQuery(function($){
	var spanRE = /span/;
	$('span.switch').bind('click', function(){
		this.style.display = 'none';
		var i = $('.switch[name=' + this.id.replace(spanRE, '') + ']').css('display', 'inline')[0];
		i.focus();
		i.value = this.innerHTML;
	});
});
</script>
</head>
<body>
<form action="#">
<div>
Name: <span class="switch" id="spanname">John Q Public</span>
<input class="switch" type="text" name="name"><br>
Email: <span class="switch" id="spanemail">johnq@some.com</span>
<input class="switch" type="text" name="email"><br>
</div>
</form>
</body>
</html>

Non-javascript enabled browsers will just see the inputs.

Thread: PHP / jQuery - Instant Editable Fields

Thread Tools

Search Thread

PHP / jQuery - Instant Editable Fields

Bookmarks

Bookmarks

Posting Permissions