How to save and retrieve contenteditable data

Use a client-side language, such as JavaScript (or best, jQuery), to manage whether the input boxes could be edited.

Use AJAX to grab the field data and fire it off to a PHP file, which would stick the data in your database.

Here is a very simplified example of using jQuery to manage enabling/disabling the input fields:

jsFiddle Demo

$('.editable').prop('disabled',true);$('.editbutt').click(function(){    var num = $(this).attr('id').split('-')[1];    $('#edit-'+num).prop('disabled',false).focus();});$('.editable').blur(function(){    var myTxt = $(this).val();    $.ajax({        type: 'post',        url:  'some_php_file.php',        data: 'varname=' +myTxt+ '&anothervar=' +moreTxt    });});

PHP file: some_php_file.php

<?php     $myVar = $_POST['varname'];    $secondVar = $_POST['anothervar'];    //Now, do what you want with the data in the vars

Using AJAX is quite easy. I gave a very brief example of what it would look like. Don't look in the HTML or jQuery for the moreTxt variable -- I added that to show how you would add a second var of data to the ajax.

Here are some basic examples to bring you up to speed on ajax:

AJAX request callback using jQuery

There is no short path to learning jQuery or AJAX. Read the examples and experiment.

You can find some excellent, free jQuery tutorials here:

http://thenewboston.com

http://phpacademy.org

UPDATE EDIT:

To respond to your comment inquiry:

To send data from a DIV to a PHP file, first you need an event that triggers the code. As you mentioned, on an input field, this can be the blur() event, which triggers when you leave a field. On a <select>, it can be the change() event, which triggers when you choose a selection. But on a DIV... well, the user cannot interact with a div, right? The trigger must be something that the user does, such as clicking a button.

So, the user clicks a button -- you can get the content of the DIV using the .html() command. (On input boxes and select controls, you would use .val(), but on DIVs and table cells you must use .html(). Code would look like this:

How to send DIV content after a button clicked:

HTML:

<div class='big_wrapper' contenteditable>    PAGE CONTENT</div><input id="mybutt" type="button" value="Send Data" />

jQuery:

$('#mybutt').click(function(){    var myTxt = $('.big_wrapper').html();    $.ajax({        type: 'post',        url:  'some_php_file.php',        data: 'varname=' +myTxt+ '&anothervar=' +moreTxt    });});

You could save the whole page clientside with this:

    <script>function saveAs(filename, allHtml) {allHtml =  document.documentElement.outerHTML; var blob = new Blob([allHtml], {type: 'text/csv'});if(window.navigator.msSaveOrOpenBlob) {window.navigator.msSaveBlob(blob, filename);}else{var elem = window.document.createElement('a');elem.href = window.URL.createObjectURL(blob);elem.download = filename;        document.body.appendChild(elem);elem.click();        document.body.removeChild(elem);}}    </script> 

hth