PHP/HTML/SQL allow contenteditable cell to write back to SQL database

[lordterrin]

I have a table that has a cell that I've made editable:

echo "<td contenteditable='true'>" . $row['Comments'] . "</td>";

Which is cool I guess, but it doesn't go anywhere from there.  I'd like to make it so that upon changing, it links back to an SQL UPDATE query that I define.  Is this possible through some sort of onChange function?

[requinix]

onchange only applies to form elements, but blur should work.

[lordterrin]

2 for 2.  thanks

 

Reading up on blur, it seems like it takes focus away from something - I'm not sure how that enables me to do what I'm looking to do.  I'm still in the learning phase of web development, so I'm not entirely sure how I would utilize this to accomplish what I'm looking to do.  From the w3schools page on blur, there is a portion that (in theory) does exactly what I'm looking for:

<input type="button" onclick="getfocus()" value="Get focus">

so when the button is clicked, it calls the function "getfocus()".  If I could write something that could automatically call a function when I change the contents of the table cell, that would be perfect as I could put the code I want to execute inside that function.  Is that possible?

Edited September 3, 2014 by lordterrin

[Jacques1]

The input event.

[lordterrin]

So I've done a bit of reading, and it seems that I may be able to assign an id inside of a <tr>, then use javascript's addEventListener to do something.  

 There is an example of something similar here:  http://jsfiddle.net/CcqU7/222/

 

 

so my code starts here:

 

echo "<td id='PMCUpdate' style='width:70' contenteditable='true' id='PMC'>" . $row['Comments'] . " </td>";

 

Then in the header section, I have this:

 

<script language="javascript1.2">     
 
var SQLPMC = document.getElementById("PMCUpdate"),
 
SQLPMC.getElementById("PMCUpdate").addEventListener("input", function() {
    alert("input event fired");
}, false);
 
  </script> 

 

Reading through this, it seems to make sense... but nothing happens.  I'd like for each cell in the comments column of my table to be editable, which they are, but when someone types something into that cell I want it to take whatever the new contents of that cell are and update it back into my database.  Right now, I'm using alert("input event fired"); just to test, but I'm doing something wrong.

[Jacques1]

Did you actually read that code?

 

What's the comma at the end of the line doing there? What is SQLPMC.getElementById() supposed to do? SQLPMC already is the element you're looking for.

 

I suggest you take your time and carefully write the code line by line. You also need to get familiar with the JavaScript console of your browser (just Google for it). This will show you the exact errors so that you can fix them.  

Edited September 3, 2014 by Jacques1