popup form preview?

[CodilX]

Hi there,

I'm tackling this script with no success, so my only shot is to ask you guys :)

What I have is a simple form. (add_article.php)

<form action="process.php" method="post">
<p>Title:<br />
<input name="title" type="text" maxlength="60" class="textfield" /></p>
<p>Article:<br />
<textarea name="content" cols="45" rows="7" class="textfield"></textarea><br />
<p>Preview: <a href='#' onclick=\"return popup('preview.php')\" /></p>
<input name="submit" type="submit" value="Submit" class="submit" />

Now my goal is to create an <a href> link, (preview.php) that when clicked on I would get a popup with the text inserted into my design code. The mock-up preview.php would be

<? 
echo "
<h2>$title</h2>
<div class='dots'></div><br />
$content
<div class='nfooter'></div>
";
?>

I'm struggling to get the information that I wrote in the add_article.php into preview.php. The point of having this, is that I want to first see if the text is correctly aligned, the overall look etc, before pressing the Submit button which submits my form to the server.

Thanks

[cameraman]

If you want to keep it strictly php, you'll need to actually submit the form data back to the server. The processing script would check to see which button was pressed to determine whether it's a real submit (that saves the data wherever you're saving it) or a preview. In the case of a preview, it would send the content back to the form's text area. You could put the preview content into an iframe at that point.

The most complex way would be to use an AJAX request to send the data back to the server, which would send you the html document that you could open in a new window.

The easiest way (IMO) would be to use javascript to pop up a window that has:
<h2>$title</h2>
<div class='dots'></div><br />

<div id="content"></div>

<div class='nfooter'></div>

which could be sourced as preview.php.
After opening the window, use more javascript to take the content of the textarea and set it in the empty div.

It's not as complicated as it sounds above, something like this pseudocode (add a name attribute to your form, e.g. name="artform"):
onclick='preview();'

function preview() {
var handle = window.open(params);
handle.document.getElementById('content').innerHTML = forms.artform.content.value;
}

I'm not strong on javascript so it would take me a couple of hours to flesh it out and correct the syntax, but the cats over in the javascript forum could probably help you without even scratching their heads (you might even find something in a forum search that's close enough to not be too much trouble to hack).

[henry0]

I like doing it server side
add a col in your DB: published default:n
then call a preview page similar to your real output script, but the preview needs to contain
where published =="n"
if OK go back to your admin, have a "publish" form to update n to y

The final output script uses where published=="y"

[CodilX]

This is an idea I have. Having the actual form and the preview in one php, making the transfer maybe a bit more easier

<?
  $page = $_GET['id'];
   
   if($page == 'preview') {
   
     echo "
     
     <h2>$title</h2>
     <div class='dots'></div><br />
     $content
     <div class='nfooter'></div>
"; 
     
   } else {
   
   echo "
   
   <p>Title:<br />
<input name='title' type='text' maxlength='60' class='textfield' /></p>
<p>Article:<br />
<textarea name='content' cols='45' rows='7' class='textfield'></textarea><br />
<p>Preview: <a href='#' onclick=\"return popup('?id=preview')\" /></p>
<input name='submit' type='submit' value='Submit' class='submit' /> 
}   
   
?>

Now, once again, I have no idea how to get the text from the unsent forms :/

[edited by: CodilX at 4:57 pm (utc) on Oct. 21, 2007]