How to make a preview function to the chronoform??

Hi everyone,

I have currently created a form by ChronoForms and want to have a preview function available in the form for users to preview their post before the data actually inputs into the database. I have tried to add an extra button "Preview" to pop up a new window to display the result layout. However, the variables from the form cannot pass through to the "preview.php" page which was created simply by myself.

Here is the code I've got at the moment:

<------ Form HTML code of the ChronoForms ------>
<div class="form_item">
<div class="form_element cf_heading">
<h1 class="cf_text">For sale</h1>
</div>
<div class="clear"> </div>
</div>

<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label">*Title:</label>
<input class="cf_inputbox required" maxlength="150" size="30" title="" id="text_1" name="title" type="text" value="<?php echo $title1; ?>" />

</div>
<div class="clear"> </div>
</div>

<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label">Price: (AUD$)</label>
<input class="cf_inputbox validate-number validate-currency-dollar" maxlength="150" size="30" title="" id="text_2" name="price" type="text" value="<?php echo $price1; ?>"/>

</div>
<div class="clear"> </div>
</div>

<div class="form_item">
<div class="form_element cf_textarea">
<label class="cf_label">Description:</label>
<?php
$editor =& JFactory::getEditor('jce');
echo $editor->display( 'description', $desc1 , '80%', '300', '55', '20', false ) ;

?>

</div>
<div class="clear"> </div>
</div>

<div class="form_item">
<div class="form_element cf_fileupload">
<label class="cf_label">Image:</label>
<input class="cf_fileinput cf_inputbox" title="" size="20" id="file_5" name="file_5" type="file" value="<?php echo $image1; ?>"/>
<a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" src="components/com_chronocontact/css/images/tooltip.png"/></a>
<div class="tooltipdiv">Image: :: Maximum 1MB, only jpg, gif, and pdf can be uploaded</div>
</div>
<div class="clear"> </div>
</div>

<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label">Location:</label>
<input class="cf_inputbox" maxlength="150" size="30" title="" id="text_6" name="location" type="text" value="<?php echo $location1; ?>"/>

</div>
<div class="clear"> </div>
</div>

<div class="form_item">
<div class="form_element cf_textbox">
<label class="cf_label">Suburb:</label>
<input class="cf_inputbox" maxlength="150" size="30" title="" id="text_7" name="suburb" type="text" value="<?php echo $suburb1; ?>"/>

</div>
<div class="clear"> </div>
</div>

<div class="form_item">
<div class="form_element cf_button">
<input value="Submit" type="submit" /><input type="reset" value="Reset"/>
<form method="post" action="preview.php">
<input value="Preview" type="submit" onClick="window.open('../preview.php','pwin','location=no,status=no,scrollbars=no,resizeable=yes,toolbar=no')" />
</form>
</div>
<div class="clear"> </div>
</div>

<------ This is the code of the preview.php ------>
<?php
// Check to ensure this file is included in Joomla!
defined('_JEXEC') or die( 'Restricted access' );

//set variables
$title = $_POST['title'];
$price = $_POST['price'];
$desc = $_POST['description'];
$email = $_POST['email'];
$image = $_POST['file_5'];
$location = $_POST['location'];
$suburb = $_POST['suburb'];



//Preview layout
echo "<table width=\"400\" border=\"0\">";
echo "<tr>";
echo "<td valign=\"top\"><b>Title: </b></td>";
echo "<td valign=\"top\">" . $title . "</td>";
echo "</tr>";
echo "<tr>";
echo "<td valign=\"top\"><b>Price: </b></td>";
echo "<td valign=\"top\">" . $price . "</td>";
echo "</tr>";
echo "<tr>";
echo "<td valign=\"top\"><b>Description: </b></td>";
echo "<td valign=\"top\">" . $desc . "</td>";
echo "</tr>";
echo "<tr>";
echo "<td valign=\"top\"><b>Email: </b></td>";
echo "<td valign=\"top\">" . $email . "</td>";
echo "</tr>";
echo "<tr>";
echo "<td valign=\"top\"><b>Location: </b></td>";
echo "<td valign=\"top\">" . $location . "</td>";
echo "</tr>";
echo "<tr>";
echo "<td valign=\"top\"><b>Suburb: </b></td>";
echo "<td valign=\"top\">" . $suburb . "</td>";
echo "</tr>";
echo "<tr>";
echo "<td valign=\"top\"><b>Image: </b></td>";
echo "<td valign=\"top\"><a href=\"components/com_chronocontact/uploads/for_sale/" . $image . "\" target=\"_blank\"><img src=\"components/com_chronocontact/uploads/for_sale/" . $image . "\" width=\"300\" height=\"300\"/ ></a></td>";
echo "</tr>";
echo "</table>";

?>

When I clicked on the Preview button, the preview.php page will come up in a new page but cannot display the variables (ie the variables are empty). At the same time, I will also have the same result as clicking on the submit button which means the preview button is also doing the submit button's job. It insert all the variables into the database.

How can I give a preview function to the form? Am I doing the right thing now? Thank you for your help in advance!

Cheers,
Victor

The problem here, is that you are using a separate form for your preview, as such, none of the fields in your original form will belong to the preview one.

I believe you could achieve this with some creative JavaScripts though. Add some link, with an onClick event. Next, have the triggered code build a http-query (for your preview.php script), and tell your browser to open this in a new window.
Unfortunately, I'm not an expert in JS, and I think this scripting is a bit over my head.

/Fredrik

Hi whmok,

please use the confirmation page plugin for this task as this is what it does!

Cheers
Max

Thank you for your advice Max!

I have successfully created the confirmation page with the plugin. Is there anyway for me to change the alignment of the buttons in the confirmation page?

Thank you for your help!

Cheers,
Victor

I have just found the php page under the plugin folder to edit the layout. All the problems have been solved!🙂

oops... There is another problem comes up on the confirmation page.
I'm using JCE editor to let users to input the content in the form. If the user try to copy and paste some text from a website to the content area of the form and pass the entry to the confirmation page, the confirmation page seems like to be messed up by the HTML format of the original website.

Here is a screenshot of the confirmation page:


Those paragraphs above the Grey "Title" words are duplicated. Anyone has idea how to fix this problem? Thanks!!

Hi Victor,

This is expected, the confirmation page is HTML and it views some broken HTML now and so it will get broken, you can use PHP in the confirmation code box so you may want to clean the HTML of the user but I have no idea if this is possible because it depends on your application!

Regards
Max

Hi whmok,

please use the confirmation page plugin for this task as this is what it does!

Cheers
Max

Where can I find this plugin? I'm having this same problem, I need a preview button.

Hi lyndaray909,

This is an old thread and talks about a previous version of ChronoForms.

Please see this FAQ

Bob