Can a contenteditable-div be used instead of texarea and then passed through form?

Hello,

I like to use a contenteditable-div in a form, because I want wo offer the opportunity to copy and past a screenshot.

So I use a custom field and put in the html for the div:

<div 
style="cursor: text;border: 1px solid #ccc;font: medium -moz-fixed;font: -webkit-small-control;width: 97%;height: 500px;overflow: auto;padding: 2px;resize: both;-moz-box-shadow: inset 0px 1px 2px #ccc;-webkit-box-shadow: inset 0px 1px 2px #ccc;box-shadow: inset 0px 1px 2px #ccc;margin: 10px auto;" 
class="editablediv" 
id="ed" contenteditable>
</div>

With this javascript on page load it works perfect:

if(document.addEventListener) {
	document.addEventListener('paste', onPasteTriggered, false);
}

/*Called whenever a paste event has occured*/
function onPasteTriggered(e) {
	if(typeof e.clipboardData != 'undefined') {
		var copiedData = e.clipboardData.items[0]; //Get the clipboard data

		/*If the clipboard data is of type image, read the data*/
		if(copiedData.type.indexOf("image") == 0) {
			var imageFile = copiedData.getAsFile(); 

			/*We will use HTML5 FileReader API to read the image file*/
			var reader = new FileReader();
			
			reader.onload = function (evt) {
				var result = evt.target.result; //base64 encoded image

				/*Create an image element and append it to the content editable div*/
				var img = document.createElement("img");
				img.src = result;
				document.getElementById("ed").appendChild(img);
		    };

		    /*Read the image file*/
		    reader.readAsDataURL(imageFile);
		}
	}
}

Now I want to attache the content of the contenteditable-div to an email.

I realized that it is not possible to handle a contenteditable-div with a form. There for I insert a textarea-field and I want to copy the content of the contenteditable-div to this textarea-field when I submit the form. There for I load this html code when submitting:

document.getElementById("ht").value = document.getElementById("ed").innerHTML;

I found this idea here: http://stackoverflow.com/questions/7355583/can-div-with-contenteditable-true-be-passed-through-form

Unfortunately this did not work for me together with Chronoforms.

What is my mistake? Thank you very much for any hint.

Astrid

Hi Astrid,

I got this to work - though I'm not sure it will accept a screenshot.

In the Designer tab:

+ add a Custom Element with this HTML

<div class="editablediv" id="ed" contenteditable='true' ></div>

+ add a Hidden input with the name and id content_copy

In the Setup tab:

+ add a Load CSS action with the CSS for the editable div
+ add a Load JavaScript action with this code

function copyContent() {
  jQuery('#content_copy').val( jQuery('#ed').html() );
}

+ in the HTML (render form) action add this to the Form tag attachment box

data-gvalidate_success='copyContent'

This should copy the content of the editable div into the hidden input when the form submits and the validation checks succeed.

Bob

Hi Bob.
Thank you very much for your help.
I tried to build the form like you advised me, but I wasn’t even able to copy text from the contenteditable to the text area.
Perhaps I made a silly mistake. It would be great if you could have a look over my backup of the form.
Thanks in advance
Astrid

Hi Astrid,

Please put the Load JavaScript action in the On Load event so that it is loaded when the form loads and move that and the Load CSS action up before the HTML (Render form) action.

Bob

Hello Bob.
Thank you very much, but it did not work either.
I would be glad, if you have another idea of how I can send a screenshot with a form.
Regards
Astrid

Hi Astrid,

I restored you second version here and it is working OK.

Maybe there is a JavaScript error on your page?

Bob

Hello Bob.
Thank you again.
Perhaps I have an error in reasoning, but I tried your link. I wrote the word „Test“ in the contenteditable-div and then I submitted the form.
I expected, that in the debug I see the word “Test” after [content_copy], because this should be copied there. Are I am wrong?
Astrid

Hi Astrid,

Sorry, I hadn't looked closely enough to notice that the content_copy input wasn't hidden :-(

You need to add one required input so that the form validation code runs, then I think it works.

Bob

Hi Bob,

I want to say Thank you for helping.
Now I realized it to past a Screenshot into a form and send it with the help of a Chronoform V5 via email as an PNG. And this works in Firefox, Chrome and IE.
Perhaps someone else looks for an similar workaround.