Ajax autosave multiple fields - php

Question

I have a page that has fields editable via contenteditable. I am autosaving the fields via ajax after the user edits the field. The problem is, I have multiple fields on the same page and when I try to autosave more than one field, either one field won't work or gets overwritten with the same content as the other field.
This is the code that I am using to update the database and it works exactly how I want it to for the "name" field.
$('.editname').keyup(function() {
delay(function(){
var name= $('.editname').text();
$.ajax({
type:"post",
url:"update.php",
data:"name="+name,
success:function(data){
console.log('success!');
}
});
}, 500 );
});
var delay = (function(){
var timer = 0;
return function(callback, ms){
clearTimeout (timer);
timer = setTimeout(callback, ms);
};
})();
However if I try to edit it like the following or duplicate it and give it a different name, it will not work properly to update another field along with the first field.
$('.editname').keyup(function() {
delay(function(){
var name= $('.editname').text();
$.ajax({
type:"post",
url:"update.php",
data:"name="+name,
success:function(data){
console.log('success!');
}
});
}, 500 );
});
$('.editsummary').keyup(function() {
delay(function(){
var summary= $('.editsummary').text();
$.ajax({
type:"post",
url:"update.php",
data:"summary="+summary,
success:function(data){
console.log('success!');
}
});
}, 500 );
});
var delay = (function(){
var timer = 0;
return function(callback, ms){
clearTimeout (timer);
timer = setTimeout(callback, ms);
};
})();
What am I doing wrong in the above block of code?

Answer 1

Looks like a usual error developers get into when they copy and paste code.
var name= $('.editsummary').text();
This should read:
var summary = $('.editsummary').text();
EDIT
This is how you do it properly. Have one generic auto-save handler and re-use it.
For example (html/js):
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
// When Page Loads
$(document).ready(function()
{
// Handle Auto Save
$('.autosaveEdit').keyup(function() {
var fieldName = $(this).attr('name');
var fieldValue = $(this).val();
delay(function() {
$.ajax({
type: "post",
url: "update.php",
data: { fName: fieldName, fValue: fieldValue },
success: function(data) {
console.log('success!');
}
});
}, 500 );
});
});
var delay = (function() {
var timer = 0;
return function(callback, ms) {
clearTimeout (timer);
timer = setTimeout(callback, ms);
};
})();
</script>
Firstname: <input type="text" class="autosaveEdit" name="firstname" />
<br />
Lastname: <input type="text" class="autosaveEdit" name="lastname" />
Now, on your update.php
<?php
// Get the post data
$fieldName = isset($_POST['fName']) ? $_POST['fName'] : '';
$fieldValue = isset($_POST['fValue']) ? $_POST['fValue'] : '';
// Now save the $fieldValue against $fieldName in your db (if neither is empty)
So, in my example form, if I start editing the "firstname" input field, the auto-save will post the following to update.php:
print_r($_POST)
Array
(
[fName] => firstname
[fValue] => hello
)

Answer 2

I've tweaked your example a little to get it to work with JS Fiddle:
http://jsfiddle.net/eHz4t/
<div class="editname" contenteditable="true">my name</div>
<div class="editsummary"contenteditable>my summary</div>
It works properly. You can open the network console and see the traffic being sent.