Passing content through a form?

Question

I have been working for weeks trying to figure out a way to submit a content element through a form to 'submit'.

• Yes, I know that I can transfer data through input / textarea, but I can’t because of design reasons (and no, this cannot be solved with simple css).

Now I'm trying to assign the value of the elements contained in the content to the values ​​of the hidden inputs, so when the submit button is pressed, it will go through the data copied from the content available on the input.

The problem is that when entering into a content element, hidden input fields are not updated automatically.

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 check your answers before posting :) Thank you!

Answer 1

( , ) . :

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