Send value of div on form submit

Question

I am trying to submit a form with a couple of different inputs, which all work fine. However, one of the inputs is a textarea (sort of). I had to alter it into a content editable div, mainly because I created my own bold, italic and underline buttons which wouldn't work with normal textareas. The problem is that the form on submit is not sending the text to the php and i was wondering what i could do to get the value of the div in the php.

Here is the "textarea":

<div id="dash_new_shout_textarea" name="dash_new_shout_textarea" 
     class="dash_new_shout_textarea" contenteditable="true" 
     placeholder="Write your shout..." name="dash_new_shout_textarea" 
     value="<?php echo isset($_POST['dash_new_shout_textarea']) ?
     $_POST['dash_new_shout_textarea'] : '' ?>"></div>

The form is just a normal form with method=post.

Here is the php:

$newShoutTextarea = $_POST['dash_new_shout_textarea'];

Thanks for the help

Answer 1

I would suggest that you follow the other answers and use jQuery, but since there is no jQuery tag in your question I suppose that I should provide a good non-jQuery solution for you.

HTML

<form onsubmit="prepareDiv()">
    <div id="dash_new_shout_textarea" class="dash_new_shout_textarea" contenteditable="true" placeholder="Write your shout..." name="dash_new_shout_textarea" value="<?php echo isset($_POST['dash_new_shout_textarea']) ? $_POST['dash_new_shout_textarea'] : '' ?>"></div>
    <input type="hidden" id="dash_new_shout_textarea_hidden" name="dash_new_shout_textarea" />
</form>

Javascript

function prepareDiv() {
    document.getElementById("dash_new_shout_textarea_hidden").value = document.getElementById("dash_new_shout_textarea").innerHTML;
}

Your PHP remains the same.