Member Avatar for 54uydf

I added an editor from this site
http://dhtmlx.com/docs/products/dhtmlxEditor/index.shtml
it works when I add words but when I click submit the text doesn't go through the POST
how do I do this?

I added a textarea like in one of the examples on that site, and another button that when clicked it passes the text from the editor to the textarea and THEN when I hit submit (another button) the text goes through the textarea to my function that handles the POST of the form..
so this is the code for the editor, button and textarea

<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
        <div id="editorObj" style="width: 100%; height: 300px; border: #909090 1px solid;" onfocus="document.getElementById('content').value = editor.getContent()"></div>

<script>
	var editor;
	dhtmlx.image_path = "textEditor/dhtmlxEditor/codebase/imgs/";
	function doOnLoad() {
		editor = new dhtmlXEditor("editorObj");
	}
</script>					
         <input type="button" value="show html content" onclick="document.getElementById('content').value = editor.getContent()">
					
	<textarea style="height: 100px;" cols="85" id="content" name="content"></textarea>					
	<input type="submit" name="submit" value="submit" />						
</form>

so of course I don't want to have the 2nd button and I don't really want to have the 2nd textarea, I might change it to a hidden input but still I can't figure out how to pass the data with out clicking the button..I tried to changing the editor by adding this (but it doesn't work)

<div id="editorObj" style="width: 100%; height: 300px; border: #909090 1px solid;" [B]onfocus[/B]="document.getElementById('content').value = editor.getContent()"></div>
<div id="editorObj" style="width: 100%; height: 300px; border: #909090 1px solid;" [B]onchange[/B]="document.getElementById('content').value = editor.getContent()"></div>
Edited by 54uydf because: n/a
  • 3 Contributors
  • 2 Replies
  • 335 Views
  • 3 Weeks Discussion Span
  • Latest Post Latest Post by AlexandraKl

Dani AI

Generated

Short answer: the editor lives in a DIV (not a form control), so the browser won't include its HTML in the POST. Copy the editor content into a real form field just before submit. already proved this works with a manual button; is correct that doing the copy in the form submit handler is the right way, and 's suggestion to switch editors is an alternative but not required.

A minimal, robust pattern:

<form id="myForm" method="post" action="...">
  <div id="editorObj"></div>
  <input type="hidden" name="content" id="contentField" />
  <input type="submit" value="Submit" />
</form>

<script>
  // initialise editor, then attach submit sync
  var editor;
  function init() {
    editor = new dhtmlXEditor('editorObj');   // your init code
    document.getElementById('myForm').addEventListener('submit', function () {
      document.getElementById('contentField').value = editor.getContent();
    });
  }
  window.onload = init;
</script>

Notes and troubleshooting:

  • Attach the submit listener after the editor is initialized so editor exists. Doing it earlier can leave the hidden field blank.
  • Don’t rely on onchange/onfocus on the editor container; contenteditable editors don’t always fire those events. The form submit event is the dependable hook.
  • Use browser DevTools (Network/Request Payload) to confirm the POST contains your content value, and check server-side with $_POST['content'].
  • If you submit via AJAX, send editor.getContent() explicitly.
  • Sanitize/escape HTML on the server to avoid XSS or broken markup.

This removes the extra visible textarea and the manual copy button while ensuring the editor HTML is included in every form submit.

Recommended Answers

All 2 Replies

Member Avatar for Member #905211

I would say try using Tiny MCE instead, much more features and there is a jQuery plugin for it as well. Tiny MCE uses an actual textarea instead of divs.

http://www.tinymce.com/tryit/full.php

Member Avatar for AlexandraKl

You may set onsubmit event handler and set editor content as value of form field when the event occurs:

<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" onsubmit="setEditorContent()">
...
<script>
   function setEditorContent(){
      document.getElementById('content').value = editor.getContent()
   }
</script>

If you have further questions about dhtmlx components, you can ask them on dhtmlx forum http://forum.dhtmlx.com/viewforum.php?f=1 (the registration is free)

Edited by Ezzaral because: Added code tags. Please use them to format any code that you post.
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.