Make editable div that sends post data on enter

Hi there, to make editable div element we’re using jQuery for this tutorial.


HTML Markup

Lets create a div element

<form method="POST">
 <div id="edit" name="edit" ></div>

It is a basic form with a div that holds the id of edit and name of edit.


Before using jQuery don’t forget to include jQuery library.
Below code makes a div editable:

 $(this).prop("contentEditable", true);

Submit form on enter

We’ve created a editable div. Now we need to send the data in this div field on press of enter key.


$( "#edit" ).keypress(function( event ) {
	if ( event.which == 13 && event.shiftKey != 1) {
		var txt = $("#edit").html();

We’re actually getting the inner html of the div with the id of edit and appending a new hidden text input to the form and the submitting the form so now the post array will have a new variable with the name of edit.

Showing the result

you can use php echo to export the post variable

if (isset($_POST['edit'])) {
 echo $_POST['edit'];

You’re done. Now little tweak with CSS will give you a nice output. See you in next post.


Anand Roshan

Author: Anand Roshan

An entrepreneur, programmer and a passionate artist who loves to work independently. Get social: Twitter | Google + | Artist Page

Leave a Reply

Your email address will not be published. Required fields are marked *