Can div with contenteditable=true be passed through form?

Question

Can <div contenteditable="true"><a href="page.html">Some</a> Text</div> be used instead of texarea and then passed trough form somehow?

Ideally without JS

Answer 1

Using HTML5, how do I use contenteditable fields in a form submission?

Content Editable does not work as a form element. Only javascript can allow it to work.

EDIT: In response to your comment... This should work.

<script>
    function getContent(){
        document.getElementById("my-textarea").value = document.getElementById("my-content").innerHTML;
    }
</script>


<div id="my-content" contenteditable="true"><a href="page.html">Some</a> Text</div>

<form action="some-page.php" onsubmit="return getContent()">
    <textarea id="my-textarea" style="display:none"></textarea>
    <input type="submit" />
</form>

I have tested and verified that this does work in FF and IE9.

Answer 2

You could better use:

<script>
    function getContent(){
        document.getElementById("my-textarea").value = document.getElementById("my-content").innerText;
    }
</script>

NOTE: I changed innerHTML to innerText. This way you don't get HTML elements and text but only text.

Example: I submited "text", innerHTML gives the value: "\r\n text". It filters out "text" but it's longer then 4 characters. innerText gives the value "text".

This is useful if you want to count the characters.

Answer 3

Try out this

document.getElementById('formtextarea').value=document.getElementById('editable_div').innerHTML;

a full example:-

<script>
    function getContent() {
        var div_val = document.getElementById("editablediv").innerHTML;
        document.getElementById("formtextarea").value = div_val;
        if (div_val == '') {
            //alert("option alert or show error message")
            return false;
            //empty form will not be submitted. You can also alert this message like this.
        }
    }
</script>

`

<div id="editablediv" contenteditable="true">
<a href="page.html">Some</a> Text</div>
<form id="form" action="action.php" onsubmit="return getContent()">
    <textarea id="formtextarea" style="display:none"></textarea>
    <input type="submit" />
</form>

`

Instead of this, you can use JQuery (if there is boundation to use JQuery for auto-resizing textarea or any WYSIWYG text editor)

Answer 4

Without JS it doesn't seem possible unfortunately. If anyone is interested I patched up a solution with VueJS for a similar problem. In my case I have:

<h2 @focusout="updateMainMessage" v-html="mainMessage" contenteditable="true"></h2>
<textarea class="d-none" name="gift[main_message]" :value="mainMessage"></textarea>

In "data" you can set a default value for mainMessage, and in methods I have:

methods: {
  updateMainMessage: function(e) {
    this.mainMessage = e.target.innerText;
  }
}

"d-none" is a Boostrap 4 class for display none. Simple as that, and then you can get the value of the contenteditable field inside "gift[main_message]" during a normal form submit for example. I'm not interested in formatting, therefore "innerText" works better than "innerHTML" for me.