Updating database with inline text editing

I'm trying to make it easier to edit the title and description in a gallery, and what to try inline editing.

I can get it to edit on screen and change onblur, but is not updating to my database. Can you look at the code and see what I'm missing?

I got this from a tutorial and not sure about the data:$('form').serialize(), in the JS area (what is form used for?). Any help would be appreciated. Thanks!

HTML / PHP

<div onclick="editTitle(`ctitle`,this)" onblur="saveTitle(`ctitle`,this)" class="child black-txt p24-txt pb-25 w7 allcaps"><?php echo escape($g->title); ?></div>

<div onclick="editDesc(`cdesc`,this)" onblur="saveDesc(`cdesc`,this)"class="child black-txt p24-txt pb-25 w3"><?php echo escape($g->description); ?></div>

<div id="message"></div>

JS

<script>
function editTitle(ctitle,div){
  /*var div = document.class("ctitle");*/
  div.style.border = "1px solid #000000";
  div.style.padding ="20px";
  div.contentEditable = true;

}
function saveTitle(ctitle,div){
  div.style.border = "none";
  div.style.padding ="0px";
  div.contentEditable = false;
  event.preventDefault();
  $.ajax({
    url:"update-gallery-text.php",
    method:"post",
    data:$('form').serialize(),
    dataType:"text",
    success:function(strMessage){
      $('#message').text(strMessage)
    }
  })
}
</script>


<script>
function editDesc(cdesc,div){
  /*var div = document.class("ctitle");*/
  div.style.border = "1px solid #000000";
  div.style.padding ="20px";
  div.contentEditable = true;

}
function saveDesc(cdesc,div){
  div.style.border = "none";
  div.style.padding ="0px";
  div.contentEditable = false;
  event.preventDefault();
  $.ajax({
    url:"update-gallery-text.php",
    method:"post",
    data:$('form').serialize(),
    dataType:"text",
    success:function(strMessage){
      $('#message').text(strMessage)
    }
  })
}
</script>

update-gallery-text.php

<?php
include($_SERVER['DOCUMENT_ROOT'] . "/core/init.php");

$id         = $_POST['id'];
$title      = $_POST['title'];
$description = $_POST['description'];


$updategallery = DB::getInstance()->update('gallery', $id, array(
    'title'    => $title,
    'description' => $description,


));

if (mysql_query($updategallery)) {
    echo "Updated Successfully...!!!";
} else {
    echo mysql_error();
    }

You missing a form element in your code,

Replace this:

<div onclick="editTitle(`ctitle`,this)" onblur="saveTitle(`ctitle`,this)" class="child black-txt p24-txt pb-25 w7 allcaps"><?php echo escape($g->title); ?></div>
<div onclick="editDesc(`cdesc`,this)" onblur="saveDesc(`cdesc`,this)"class="child black-txt p24-txt pb-25 w3"><?php echo escape($g->description); ?></div>

With:

<input type="hidden" id="GalleryId" value="THE ID OF THE GALLERY" />
<div id="GalleryTitle" onclick="editTitle(`ctitle`,this)" onblur="saveTitle(`ctitle`,this)" class="child black-txt p24-txt pb-25 w7 allcaps"><?php echo escape($g->title); ?></div>
<div id="GalleryDescription" onclick="editDesc(`cdesc`,this)" onblur="saveDesc(`cdesc`,this)"class="child black-txt p24-txt pb-25 w3"><?php echo escape($g->description); ?></div>

And This:

data:$('form').serialize(),

With:

data: {
    id: $("#GalleryId").val(),
    title: $("#GalleryTitle").html(),
    description: $("#GalleryDescription").html()
    },