Make editable div that sends post data on enter

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

make-editable-div-that-sends-post-data-on-enter

HTML Markup

Lets create a div element

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

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

JQuery

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


$("#edit").click(function(){
 $(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.

jQuery


$( "#edit" ).keypress(function( event ) {
	if ( event.which == 13 && event.shiftKey != 1) {
		event.preventDefault();
		var txt = $("#edit").html();
		$('form').append(""); 	
		$('form').submit();
	}
});

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

<?php
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 *