TrinityTuts

Make Div Editable and save data to MySql using JQuery

Aneh Thakur

Last updated on January 8th, 2020 at 09:57 pm

Contenteditable attribute is very lesser known HTML attributes by most of webdeveloper. It help you change the read only property of tag to rich-text editor. In this i will explain how to create content editable field and change the save data of the field in database using php and ajax.

Contenteditable Attribute

Replace me with your text!!!….

You can make any div editable by adding contenteditable attribute and set property to true. You can try above example to check what is contenteditable. This attribute has three possible values: true,  false, and inherit for google chrome you also use plaintext-only. You also define tabindex for your contenteditable so you can focus on field when user press on tab key.

<div contenteditable="true" tabindex="1">
     Replace me with your text!!!….
</div>

 Enable contenteditable using javascript:

You also make your div contenteditable using javascript

var editor = document.getElementById('editor');
editor.isContentEditable;
editor.contentEditable = true;

and html code is like this

<button id="editorBtn" type="button">Enable Editing</button>
<div id="editor">
  ...
</div>

Make Entire webpage editable use this code

If you want to make entire web page editable you can use designMode property and turn designMode on to edit

document.designMode = 'on';

Save contenteditable field data using ajax and php

You also save Content editable fields data to server with help of ajax. Here is a simple example and code you try

HTML Code : index.php

<html>
	<head>
		<title>Make Div Contnet Editable</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	</head>
	<body>
		<div contenteditable="plaintext-only" id="editor">
			Helo
		</div>
		<button id="save">Click to Save</button>
		<script type="text/javascript">
			$(document).ready(function(argument) {
				$('#save').click(function(){
					// Get edit field value
					$edit = $('#editor').html();
					$.ajax({
						url: 'get.php',
						type: 'post',
						data: {data: $edit},
						datatype: 'html',
						success: function(rsp){
								alert(rsp);
							}
					});
				});
			});
		</script>
	</body>
</html>

Now after send data to server we can get that data same we can get from form.

PHP Code : get.php

<?php
$editData = $_POST['data'];

// Add your validation and save data to database

echo $editData;
?>

i simply get data from requested page and echo it you can save it to your database and perform any action.

Browser Support for contenteditable

All most every browser support this tag.

Since then, contenteditable has been standardized by the WHATWG.

IE FIREFOX CHROME SAFARI OPERA
5.5+ 3.5+ 4.0+ 3.1+ 9.0+

Google also use Contenteditable for Gmail Compose Message and also use in Share status in Google Plus.