1

I want to create a preview function for posts that allows people to view the output of what they enter into a textarea how it would appear once submitted. The forum uses bbcode and does not allow html in posts and the id of the textarea box is "message"

Can anyone help me create a popup that would preview this post in a popup window without passing any of its data to a database and back?

I should really have supplied more info, I realise... Basically we have a post form in the form of 

<textarea id=\"message\" name=\"message\" style=\"width:515; height:160; font-family: Verdana; font-size: 8pt; color: #000000\" onKeyDown=\"countit()\"></textarea>

with a submit button 

<input type=\"image\" src=\"newlayout/images/reply.png\" height=\"35\" width=\"109\" border=\"0\" alt=\"Submit\">

When it's clicked, the form gets sent to another page, from where it's inserted into the database. I would like there to be a preview button like the one on livejournal, where a new popup gets created and shows what the post would look like. I looked at the source code on livejournal and it supplied jQuery, so I tried the code given here: http://haacked.com/archive/2009/12/15/live-preview-jquery-plugin.aspx However, this did not work, as nothing showed up and also I wasn't fond of the live preview idea.

I also tried a javascript code from here: http://www.codingforums.com/showthread.php?t=174810, but once again, it didn't come up with anything...

I hope that's good info, if I should include anything else, please let me know :)

Elizabeth
  • 173
  • 3
  • 14
  • removed the PHP tag. Also, what have you tried? – Ben D Feb 11 '12 at 19:29
  • oops, sorry about that... the site's php and I must've done it without thinking :P thanks for editing it out Ben! I've tried using a redirect to another page, but it didn't pull the data from the textarea... I also tried a jQuery for live action update, but that didn't even show up. – Elizabeth Feb 11 '12 at 19:34

3 Answers3

1

This question is getting close to "write my code for me", but if you're just trying to get help with the best approach, here are a few:

The cleanest would be have a button that (via javascript) changes the action and target of the form and triggers a submit()... this would send all the data via post to a template page which can pick up the $_POST data and place it into a template that mimics the live template.

Alternately, you could have JavaScript/Jquery grab all the field values, and build the HTML template in javascript and then pass this into div on the page that has been styles to look (a) like a pop-up and (b) has css that mimics the live page.

There are lots of ways to do this, but those would both work. If you try something and get into a tight spot, let us know and we'll give you a hand.

Ben D
  • 14,321
  • 3
  • 45
  • 59
  • I'll edit in more info in case it can help, sorry for making it seem like a "write my code for me" questions, I was a little hasty in asking – Elizabeth Feb 11 '12 at 20:11
  • Solved it with the second option and some help from another code.... now I just need to figure out how to have the output from the javascript document.write format itself in BBcode XD Thanks for the suggestions! – Elizabeth Feb 11 '12 at 22:08
1

You would want to bind a keyup event to the textarea. Every time a user releases a key it would fire the function. Then your function grabs the value of the textarea and parses it for the BBCode, which I'm not familiar with. It then would take that output and place it as the contents of any element.

HTML:

<textarea id="myText"></textarea>

<div id="preview"></div>

JavaScript (jQuery):

$(document).ready(function() {

    var $textarea = $('#myText'),
        $preview = $('#preview');

    $textarea.on('keyup', function() {

        var $this = $(this),
            output = $this.val();

        // Do something with the value of the code to parse out the BBCode stuff.

        $preview.html(output);

    });

});
Seth
  • 6,240
  • 3
  • 28
  • 44
0

Why don't you try a WYSIWYG editor like TinyCME, or CKEditor?

Alex Peta
  • 1,407
  • 1
  • 15
  • 26