Can Div with Contenteditable=True Be Passed Through Form

Save content of a div contenteditable= true to my db through a form in Rails

You are setting the value the wrong way. You want to set the "post_content" value to the "content" innerHTML.

document.getElemenetById('post_content') = document.getElementById('content').innerHTML;

Also, you should use a hidden input instead of a textarea with display:none.

And lastly, make sure the function is being triggered. I don't think the "onsubmit" callback is properly fireing since form_with intercepts the form submission and does an ajax request.

Personally I'd listen to the input event on the contenteditable element so you don't depend on the form submission:

document.getElementById('content').addEventListener('input', function(ev){
  document.getElementById('post_content').value = ev.target.innerHTML;
})

Now everytime you change the contenteditable content you get the input updated instantly.

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

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()'>...

Div with contentEditable wont post into form using Javascript

It looks like the submit event is not triggered when triggering the submit() method, therefore the onsubmit handler is not called. See another question for more info.

So you can try removing the onsubmit handler and trigger the getContent function from the onclick's one:

onclick='submitForm(id)'

function submitForm(id){
    getContent(id);

    document.forms(id).submit();
}

submit text from div contenteditable

If you want to get the data inside the #text div you could use jQuery to get the data from the div:

function sbmt() {
  var param = '';

  // jQuery
  param = $('#text').text();

  // or you could use pure javascript
  param = document.getElementById('text').innerHTML;

  // Now that you have these values you should add them to your form as an input
  // input fields are how you send data through forms to wherever you are posting them
  // build the input field
  param = "<input type='text' name'param1' value='" + param + "'/>";

  // append it to the form
  $('#searchform').append(param);

  // finally submit the form.
  document.getElementById("searchform").submit();
}

Then you will be able to access your submited parameter based on the name you assigned it in the input field (in this case param1)

Have a play-around with this jsfiddle if you want to workout what is happening.

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.

How to prevent contenteditable from being passed down to children

Try putting content editable false on your children:

<div contenteditable="true">
    <p>You can edit me</p>
</div>

<div contenteditable="true">
    <p contenteditable="false">You can't edit me</p>
</div>

submit appended form containing a contenteditable div on press of enter key

this will do what you want:

$(document).keyup(function(e){
    if(e.keyCode== 13 || e.which== 13) { //if enter key is pressed
        var contentEditableValue=$('#input_msg').text(); //get the div value
        $('.send').append('<input type="hidden" value="'+contentEditableValue+'" id="valueToSend">'); //add a dummy input to the form to send the value
        $('.send').submit(); //submit the form
    }
});