Passing a contenteditable element through form?

Question

I've been working weeks at trying to figure out a way to pass a contenteditable element through a form on 'submit'.

Yes I know I can pass data through input/textarea but I can't due to design reasons (and no it can't be solved with simple css)

Now I'm trying to assign the value of the contenteditable elements to the value of the hidden inputs so that when submit button is clicked it will pass along the data copied from the contenteditable into the input.

The problem is that when typing in the contenteditable element, the hidden input fields are not auto-updating live.

JS

    jQuery(function($) {
            var input = $('#title'),
                preview = $('form-title');

            var input = $('#message'),
                preview = $('form-message');

            input.keyup(function(e) {
                preview.text(input.val());
            });
        });
/* I tried this and it didn't work:  function getContent(){
        document.getElementById("title").value = document.getElementById("form-title").innerHTML;
    } */

HTML

<h1 contenteditable="true" id="title">Type your title here</h1>
<p contenteditable="true" id="message">messages</p>

<form id="form" method="post">
    <input type="text" name="title" id="form-title" style="display:none;"></input>
    <textarea name="message" id="form-message" style="display:none;"></textarea>
    <input type="submit" id="theSubmit" style="display:none;" value="submit"></input>
</form>

Any suggestions? Please test your answers before posting :) Thank you!

possible duplicate of [Using HTML5, how do I use contenteditable fields in a form submission?](http://stackoverflow.com/questions/6247702/using-html5-how-do-i-use-contenteditable-fields-in-a-form-submission) — HPierce, Sep 04 '15 at 17:39
@HPierce it's not a duplicate because if you try the answer to that question in regards to my specific problem (which I wouldn't be asking if SO had the answer), you'll see that the solution does not work. But good job Pierce, keep it up :) — Steve Gates, Sep 04 '15 at 17:43
You're question doesn't seem to explain why that solution doesn't work - nor is there evidence from your question suggesting you've even tried it. (Hence why @Sam is giving you an answer similar to the accepted answer on the dupe) — HPierce, Sep 04 '15 at 17:52
The question clearly explains @HPierce if you read the comment in the javascript code you'll see that it's the exact same code as the one from the answer in your link. Sam's code is different in that it actually gets the value of your element and puts it inside the input live. I'll not argue further with you. — Steve Gates, Sep 04 '15 at 17:58

score 3 · Accepted Answer · answered Sep 04 '15 at 17:38

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

Passing a contenteditable element through form?

1 Answers1