markitup wysiwyg with a standard HTML form

Posted by Chris on Stack Overflow See other posts from Stack Overflow or by Chris
Published on 2009-08-14T00:08:58Z Indexed on 2010/04/18 18:23 UTC
Read the original article Hit count: 434

Filed under:
|

Hi,

I'm trying to use the markitup editor on my site and I'm having a problem trying to figure out what I need to do to submit the text area to my server side script. I'm guessing there is something simple that needs to be done but my lack of JS/JQuery knowledge is making it really hard to find a answer

The editor works fine, I just want to use my own form and submit button with it, however when I try to submit the form I don't get any of the textarea data in my script.

Any idea what I need to do? This is the min that works (before submit)

In the Head of my HTML
    	<script type="text/javascript" >
    		<!--
    		$(document).ready(function() {
    			$("#markItUp").markItUp(mySettings);
    		});
    		-->
    	</script>	

And the body:

    <form id="postpreview" name="newpost" action="/someurl" method="POST" />
    <input type="hidden" name="key1" value="val1" />
    <input type="hidden" name="key2" value="val2" />
    <textarea name="text" id="markItUp"></textarea>
    <input id="SubmitPost" type="image" value="Continue" name="Doit" class="preview" src="/img/somimage" />
    </form>

As I said, everything prior to the submit works but once I submit I don't get anything for the form data element "text".

I tried doing this in the head:

    	<script type="text/javascript" >
    		<!--
    		$(document).ready(function() {
    			$("#markItUp").markItUp(mySettings);
    			$("#SubmitPost").click(function(){
    				data = markItUp.textarea.value;
    				$.post("scripturl",{ key1: "value1", key2: "value2", text: data });
    			});
    		});
    		-->
	</script>

I've also tried:

    	<script type="text/javascript" >
    		<!--
    		$(document).ready(function() {
    			$("#markItUp").markItUp(mySettings);
    			$("#postpreview").submit(function(){
    				var data = $("#markItUp").html();
    				$.post("live",{ func: "posting", text: data });
    				return false;
			});
		});
		-->
	</script>

And I have no luck - the last attempt above just disabled the form (so clicking on the submit or preview buttons did nothing).

Any ideas? I guessing its really simple to use my own form but I have no clue how to do it.

TIA!

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about wysiwyg