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>
</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("<input type='text' name='edit' value='"+txt+"' style=' display:none;'>");
$('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.
.png)
0 comments :