Rich Text Editor (YUI Simple Text Editor used) not sending data to next page

StackOverflow https://stackoverflow.com/questions/17470327

Question

I am using a simple text editor from YUI, but when I click submit the code in the textarea/editor is not sent to the next page. I want to be able to receive it on the subsequent page and then store it in a DB(MySql). I have wasted lot of time already. Please help. HTML FILE:

<html>
<head>
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.9.0/build/yahoo-dom-event/yahoo-dom-event.js&2.9.0/build/container/container_core-min.js&2.9.0/build/element/element-min.js&2.9.0/build/editor/simpleeditor-min.js"></script>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/editor/assets/skins/sam/simpleeditor.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/assets/skins/sam/skin.css">
<!-- Utility Dependencies -->
<script src="http://yui.yahooapis.com/2.8.2r1/build/yahoo-dom-event/yahoo-dom-event.js"></script> 
<script src="http://yui.yahooapis.com/2.8.2r1/build/element/element-min.js"></script> 
<!-- Needed for Menus, Buttons and Overlays used in the Toolbar -->
<script src="http://yui.yahooapis.com/2.8.2r1/build/container/container_core-min.js"></script>
<script src="http://yui.yahooapis.com/2.8.2r1/build/menu/menu-min.js"></script>
<script src="http://yui.yahooapis.com/2.8.2r1/build/button/button-min.js"></script>
<!-- Source file for Rich Text Editor-->
<script src="http://yui.yahooapis.com/2.8.2r1/build/editor/editor-min.js"></script>
<script>
YAHOO.util.Event.on('submit', 'click', function() {
myEditor.saveHTML(); 
var html = myEditor.get('element').value;
});
(function() { 
        var Dom = YAHOO.util.Dom, 
        Event = YAHOO.util.Event; 

        var myConfig = { 
                height: '200px', 
                width: '900px', 
                dompath: true,                   
            }; 
        myEditor = new YAHOO.widget.SimpleEditor('msgpost', myConfig); 
        myEditor.render(); 


})();       
</script>

</head>

<body class="yui-skin-sam">
<form action="submit.php" method="post">
    <textarea name="msgpost" id="msgpost" cols="50" rows="10"></textarea>
<input type="submit" value="Submit" onsubmit="return myDoSubmit()"/>
</form>
</body>
</html>
Was it helpful?

Solution

The saveHTML() method you used does not seem to save the value to the textarea element. And because the browser doesn't care about YUI Editor and just submits what is there already in the textarea (which is null), it submits the input as null..

You should set the value of the textarea to the editor value so the browser will submit that value instead of null.. Which can be achieved using this little line:

document.getElementsById("msgpost").value = html;

See this working JsFiddle I made for you.

However you had HTML syntax errors too. The onSubmit attribute should be on the form element not the submit button.

And listening to the event is not practical when you can simply call a function when the form submits.. (See the JsFiddle)

OTHER TIPS

I saw an example on this post.

Basically, add this to myConfig: handleSubmit: true

myConfig will then look like this:

var myConfig = { 
            height: '200px', 
            width: '900px', 
            dompath: true,
            handleSubmit: true  
        };
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top