Using HTML5, How to Use Contenteditable Fields in a Form Submission

Using HTML5, how do I use contenteditable fields in a form submission?

You have to use javascript one way or the other, it won't work as a "standard" form element as it would with a textarea or the like. If you like, you could make a hidden textarea within your form, and in the form's onsubmit function copy the innerHTML of the contenteditable to the textarea's value. Alternatively you could use ajax/xmlHttpRqeuest to submit the stuff a bit more manually.

function copyContent () {
    document.getElementById("hiddenTextarea").value =  
        document.getElementById("myContentEditable").innerHTML;
    return true;
}


<form action='whatever' onsubmit='return copyContent()'>...

Passing a contenteditable element through form?

No need to live update (and you shouldn't, for performance reasons) your input fields. Use a submit listener on the form and update the input values:

var $form = $('form');
$form.submit(function(e) {
    var title = $('#title').text(),
        message = $('#message').text();

    $form.find('input[name="title"]').val(title);
    $form.find('textarea[name="message"]').val(message);
});

JSFiddle

How do I pass contenteditable text to the server without using JavaScript?

You will have to use a textarea, there is no way you will find that submits anything to the server that is not part of a form. If you want to use something other than standard form elements you will need to use JavaScript. This is how forms work.

I want to make editable element as input form field

As far as I know, only <input> tags are sent in the form data. However, ou could use invisible <input> tags which have data copied into them, like this:

<form action="" method="post">
    <div id="name" contentEditable="true" onchange="copyToHidden('name', 'nameInput')">You Favorite Movie</div>
    <input type="hidden" name="name" id="nameInput">
    <p id="comment" contentEditable="true">Your Comment</p>
    <input type="hidden" name="Comment" id="commentInput" onchange="copyToHidden('comment', 'commentInput')">
    <button>Submit</button>
<form>

then have this JavaScript somewhere in a script tag

function copyToHidden(elementId, inputId) {
    document.getElementById(inputId).value = document.getElementById(elementId).textContent;
}

How to create a HTML5 single line contentEditable tab which listens to Enter and Esc

Here is the HTML markup:

<span contenteditable="false"></span>

Here is the jQuery/javascript:

$(document).ready(function() {
    $('[contenteditable]').dblclick(function() {
        $(this).attr('contenteditable', 'true');
        clearSelection();
        $(this).trigger('focus');
    });

    $('[contenteditable]').live('focus', function() {
        before = $(this).text();
        if($(this).attr('contenteditable') == "true") { $(this).css('border', '1px solid #ffd646'); }
    //}).live('blur paste', function() {
    }).live('blur', function() {
        $(this).attr('contenteditable', 'false');
        $(this).css('border', '1px solid #fafafa');
        $(this).text($(this).text().replace(/(\r\n|\n|\r)/gm,""));

        if (before != $(this).text()) { $(this).trigger('change'); }
    }).live('keyup', function(event) {
        // ESC=27, Enter=13
        if (event.which == 27) {
            $(this).text(before);
            $(this).trigger('blur');
        } else if (event.which == 13) {
            $(this).trigger('blur');
        }
    });

    $('[contenteditable]').live('change', function() {
        var $thisText = $(this).text();
        //Do something with the new value.
    });
});

function clearSelection() {
    if ( document.selection ) {
        document.selection.empty();
    } else if ( window.getSelection ) {
        window.getSelection().removeAllRanges();
    }
}

Hope this helps someone!!!

Editable divisions instead of Textarea. input is not getting submitted ! PHP

Only the values of input elements get submitted with a form.

Use a script on the client to put the contents of the div into a hidden field when the form is submitted.

For example:

<form action="/blah.php" method="post" onsubmit="prepForm()">
    <div contentEditable="true" id="editor"></div>
    <input type="hidden" name="content" id="content">
</form>

...

<script>
function prepForm() {
    document.getElementById('content').value = document.getElementById('editor').innerHTML;
}
</script>

HTML5's contenteditable and oninput with Apache Wicket

Since a div is not a form element, it doesn't get submitted when you post a form. So you have two options:

• in onInput fill a hidden form element with the content and submit that using a form
• send the content to the server using Ajax

Both require you to do some magic using a (Ajax)Behavior.

You can use Wicket's HiddenField to create the hidden field, and in onInput perform the update of the HiddenField's value.

You can encapsulate this by creating your own ContentEditableFormComponent by using FormComponentPanel as a starting point.

---

Related Topics