How do I process a <div> as a form <input>

Question

What I've done is:

HTML

<form>
    <div id="textBox" contenteditable="true" name="textBox"><?php echo $storyText; ?>
    </div>
    <textarea id="hiddeninput" name="hiddeninput"></textarea>
    <input type="submit" id="save" name="save" value="Submit"/>
</form>

Javascript

$('#save').click(function () {
    var mysave = $('#textBox').html();
    $('#hiddeninput').val(mysave);
    $("form:first").submit();
    $('#hiddeninput').append(mysave);
    alert($('#hiddeninput').val());
});

So both the alert and the append display the correct information, but it won't save #hiddeninput as a php variable when I submit. Originally I had this as an hidden input method, but I'm trying to show that it won't post no matter what I do,

Answer 1

Your code is working almost as it is. But I'd rather use normal <input type="hidden"> and you don't need to trigger submit for your form in your case just put the value in a hidden field.

Given your markup, with slight modifications

<form action="showrequest.php">
<div id="textBox" contenteditable="true" name="textBox" style="width:300px;height:100px;">
</div>
<textarea id="hiddeninput" name="hiddeninput"></textarea>
<input type="submit" id="save" name="save" value="Submit"/>
</form>

js

$(function(){
    $('#save').click(function () {
        var mysave = $('#textBox').html();
        $('#hiddeninput').val(mysave);
    });
});

var_dump($_REQUEST) on php side gives

array(2) {
  ["hiddeninput"]=>
  string(4) "test"
  ["save"]=>
  string(6) "Submit"
}

Answer 2

Try binding the submit event instead of the click event. What might be happending is the form is submitting before the value of your textarea is set.

$('form').submit(function(){
    var mysave = $('#textBox').html();
    $('#hiddeninput').val(mysave);
});

I tested this example with method="get" and got the html from the div to show up in the URL.

Answer 3

I believe your form is being submitted before your js code has a chance to run. Since you're submitting manually from jQuery, try preventing the default event of the button (which also submits the form):

$('#save').click(function(e) {
    e.preventDefault();
    var mysave = $('#textBox').html();
    $('#hiddeninput').val(mysave);
    $("form:first").submit();
});