Trying to save the contents of a contenteditable div to MySQL database

Question

Alright, so I want to be able to submit the contents of a contenteditable div into a MySQL database. I've got a (contenteditable='true') div populated with HTML code from a MySQL database. It's something like this:

$page = $_GET['page'];

$getpage = mysql_query("SELECT * FROM pages WHERE title = '$page'") or die(mysql_query());
$row = mysql_fetch_assoc($getpage);
$pagecode = $row['pagecode'];

<div class="editable" contenteditable="true">
<?php echo $pagecode; ?>
</div>

And I want to control this with a regular link:

<a href="#" onclick="somefunction()">Save</a>

Maybe this could work with a hidden form that's controlled with Javascript, but I really have no clue.

The goal is to have something like an HTML editor, which displays the HTML code from the database inside the editable div and allows the user to edit it and save it back in the database. Any help is greatly appreciated.

Thanks,

Gill.

Answer 1

In your AJAX code, make a new AJAX request to a processor. Assign an id='id_name_here to your div and pass the id_name_here.innerHTML to the url. Then you can do something with it from your processor.

// JS
function somefunction() {
    var updated_div_info = document.getElementById('id_name_here').innerHTML;
    // POST TO AJAX ...
}


// PHP
<?php

$updated_div_info = $_POST['updated_div_info'];

// INSERT THIS INTO THE DB

Answer 2

try this

function somefunction(){
    var html = encodeURIComponent($(".editable").html());
    $.ajax({
       url: "save.php",
       data: "content="+html
    })
}