Preview post in PHP using Javascript

[Readie]

For an admin panel I've been coding for the last week or so, one of the functions of the panel is to post news stories to the public front page of the website.

Now, I've been asked to include a "preview post" capability to the news post page, and this is the method I've thought up of doing it:

<script type="text/javascript">
<!--
function preview() {
 var subject = window.document.newspost.subject.value;
 var content = window.document.newspost.content.value;
 window.document.newspreview.subject.value = subject;
 window.document.newspreview.content.value = content;
}
//-->
</script>

...
Table/tr/td tags removed:

<form name="newspost" method="post" action="/admin/news/post">
<input type="text" name="subject" onchange="preview();" />
<textarea name="content" onchange="preview();" /></textarea>
<input type="submit" value="Submit" />
</form>
 
<form name="newspreview" method="post" action="/admin/news/preview">
<input type="hidden" name="subject" />
<input type="hidden" name="content" />
<input type="submit" value="Preview post" />
</form>

And then re-populate the form and generate the preview using the 2 hidden values.

But... Because I know at least one of my prospective users is in the habit of using FireFox with JS disabled, I was wondering if there was any method of doing this that wasn't dependent on JS?

[TheMadScientist]

I think the way to do it without JS would be to add a col to the DB called 'published' (or something) which defaults to 0 and is 1 if it's published, then you could select all the entries from a preview page and put a publish button on there and change the value from 0 to 1 to show it on the main page...

You will have to change you main select to check for a 1 in the 'published' col and it's a good idea to set them all to one before you add a test article, but both of those should be simple things to do.

Anyway, that's the best I can think of without JS...

Of course you could put <noscript>Hey, turn your flipping JS on if you really want to be able to preview articles. It's not like I'm going to try to do anything malicious, so just turn it on, please! Also, I have a re-work an easy solution fee of my normal rate X 2 for those who don't comply</noscript> ;) LOL

[JS_Harris]

The easiest way is to publish your own sites RSS feed to the desired area, you then have full control over how much of a snippet you post and you can add images easily. Several free php scripts exist for this already.

[Readie]

I like the <noscript> idea scientist :P

Anyway, reading your post actually gave me an idea (your word choice :)). Instead of having a button that say's "preview post" - right above the submit button I could have a select menu, and then code something like this:

$action = $_POST['action'];
 
switch($action) {
 
case "post":
MySQL string, confirmation message
break;
 
case "preview":
Generate preview, re-populate form
break;
}

Anyways, thanks for the replies guys :)

[rocknbil]

A lesson from previous posts: build it without JS first, then add JS. :-)

Number of ways to do that, observe what they do here. It's a pretty standard approach. You have a post and a preview button.

If they hit preview, you can do one of two things: store the data in a "temp" table or file, and reference it by ID, or go old school, encode the data and carry it in hidden fields through the preview. When submit is hit, you write to the DB and delete temp data if you use method 1.

No Javascript required, now if you want you can go back and add JS. Personally, a new window for a preview is not what I would call a "good use" of a JS new window, people are freaked out about "popups" as it is. I'd restrict JS to just validation of input in this scenario.

But that doesn't mean it's wrong, just saying . . . . why, if you don't have to.

[Readie]

I was taking the lesson from previous posts, it was my reason for posting here in the first place :) It's just the title we see now is not my original one, and at time of posting that was the only method I could think of... I probably shouldn't be posting at 2:15am on that note... ^_^

I personally find pop-ups annoying, so not going to go down that route.

One of the things I am at a loss how to do is differentiate between 2 buttons, I noticed when checking the source code here that the preview button and the submit button are both input type="submit"... but with different names (and ofcourse values). Can you find out which button is pressed with $_POST?

[rocknbil]

Sure you can.

<input type="submit" name="subButton" Value="Preview">
<input type="submit" name="subButton" Value="Post">

if (isset($_POST['subButton'])) { echo $_POST['subButton']; }

should display Preview or Post, depending . . . there may be arguments against that, it may be browser dependent, but don't think so, it's always worked. If it makes you nervous, name them different.

The major problem with this

if (isset($_POST['subButton']) and ($_POST['subButton']=='Preview')) { // preview }
else { // post }

is what happens when someone presses enter while focused on anything but a textarea. There will be no subButton set, but if you do the above if/else, seems like the default behavior (else) S/B "expected behavior."

[Readie]

Ahh, that is excellent. If I'd known that was possible I would of had this finished by now :)

Thank's very much ^^

[CyBerAliEn]

It seems you have this all figured out, but some added thought:

Once you have the Submit/Preview buttons all setup... someone pressing Submit will get it submitted; someone pressing preview will get it previewed. Duh, right? Pretty straight forward implementation. :)

As suggested, adding JS functionality later is fully reasonable here. You can now add a JS event to the preview button, a la:

<input type="submit" name="subButton" value="Preview" onClick="return buildPreview();">

or you can attach a listener/etc and avoid the onClick; but I'm use to onClick

Then what I'd do, is code up the "buildPreview" JS function to:
(1) grab all the form field values
(2) pass the values along via AJAX to a PHP page (ie: /viewpreview.php)
(3) have the PHP page output the "preview" in desired format (HTML/etc)
(4) via AJAX/JS load up the PHP output into a "popup DIV"
(5) be sure the function returns bool 'false' (this prevents the form, from getting submitted)

Now, when a user presses "Preview"... they will easily get a little pop up box that shows the preview just as it would show. You should extend the functionality, but allowing the user to "close" the popup. And also by using a "loading" type message/image to indicate the process is occurring while it is happening. And in this manner, a user can very easily/quickly modify the entry before actually posting it.

But... because the standard form/HTML method is still "underlying"... anyone who presses "preview" with JS disabled will still see a preview, but via the first/"traditional" way (page reloads, data temporarily stored in DB/session, etc).

You could even have the 'viewpreview.php' page include coding to store the passed data into the DB as a "draft", so that it is saved for later (if need be).

[TheMadScientist]

Of course if you really want to have fun with it and make it cool you can make the preview text area editable then people can type right on the screen rather than needing to have a text area... It's something I use with AJAX, though, so you might need them to enable JavaScript to use it. LOL. I don't cater to people who won't run JS, because you can do sooooo much more cool stuff with it than you can without. I refuse to take away from most users experience or do the same work twice for a few...

[Readie]

@ Cyberalien:

Hmm, I really don't want to use a pop-up, so I'll stick with doing it through PhP. As for the method of calling it... adding <form onsubmit="return function();"> is probably a better way of doing it :)

As for temp. storing it in a database... My users will still be on the same file (<3 $_GET and mod_rewrite), so I'll just be using $_POST to bring the preview through :)

I do like the idea of "save as draft" though - that's a feature I may implement in the future.

@ TheMadScientist:

On the preview page, I'm planning on generating the preview with PhP (And keeping the preview button for non-JS users) - but having the preview update infront of the user using onchange and innerHTML - <sarcasm>although it is going to be fun translating my BB code to HTML without using my PhP arrays...</sarcasm>

It's low priority at any rate. The preview button is the main feature I wanted to implement and I've got that nailed now :)