Hi there,
currently I have a form that the user can fill out and then submit to a database. What I would like to have is a form that the user can fill out and then can either preview it on the same page just below the form (only previewing and not submitting to the database), or they can submit it.
My problem is that if I submit the data from the form, then it gets submitted the database...but if I don't then there's nothing stored in the session ... any suggestions?
You can post the form to itself and then just echo all the variables from the POST array. On the second submit, send the POST array to the data processing page:
<html>
<body>
<form name="approval" id="approval" method="post" enctype="multipart/form-data" action="<?php echo $PHP_SELF;?>">
<input type="text" name="Address_Street" id="Address_Street" size="36" value="<?php echo $_POST['Address_Street']; ?>">
<?php
if (isset($_POST['NSubmit']))
{
.... Send the data to the data processing page.
}
else {
if (empty($_POST['Submit'])) {
print '<input type="submit" name="Submit" id="Submit" value="View Form Data">';
}
else { print '<input type="submit" name="NSubmit" id="NSubmit" value="Submit Form">';}
}
?>
</body>
</html>but what if they want to "preview" it more than once...ie they made and error, so they fixed it, now they want to check it again to make sure it's all good
You can have two buttons.. preview and submit.. preview will only recall the form page..(with echo'ed $_POST variables) while submit goes a head and submits the form (assuming of course that your form is checked (both from user's proper info and variable sanitization).
Cheers,
NRG
What about hiding all input elements in form for preview , and show that elements by clicking edit , and submit when confirm button press.
Step 1: Edit from
Step 2: On clicking preview (same page but) hide input elements
Step 3: On clicking edit button on preview page (same page but) just show hidden elements
Step 4: On clicking confirm button on preview page , submit the page.
edit form (NEXT)-> preview page ->(BACK) to edit form OR (CONFIRM) to submit
So my idea is creating a script to find and hide/show input elements BUT shoe value in those elements.If anybody have that script please reply.
Thank you.
Let me start it as a new thread
Continue here.. 
Excuse for my grammer..
If a form contains lots of elements , then its time taking to pass those values to preview form , again we have to pass those values to first form if there is some edit .
Idea is like this
<html>
<form name='form_preview' action=''>
Item :<input type='text' name='text1' value='Table'>
Amount :<input type='text' name='text1' value='25000'>
Payment :<select name="payment">
<option>Cash</option>
<option>Cheque</option>
</select>
<input type="button" name='preview' onclick="preview('form_preview')" value='Preview'/>
<input type="submit" name='submit' onclick="preview('form_preview')" style="display:none"/>
<input type="button" name='edit' onclick="preview('form_preview')" style="display:none" value='Edit'/>
</form>
<script>
function preview(form_name)
{
document.form_name.input1.disabled=false;
//find input1 , i dont know how to do that.. 
}
</script>
/<!-- No border css for preview page -->/
input { font-family: Verdana, Arial, Helvetica, sans-serif; font-size:
10 px; color: #003068; text-decoration: none; background-color: #FFFFFF;
border-color: #FFFFFF #FFFFFF #FFFFFF; border-style: solid;
border-top-width: 0 px; border-right-width: 0 px; border-bottom-width: 0
px; border-left-width: 0 px; }
textarea { font-family: Verdana, Arial, Helvetica, sans-serif; font-size:
10 px; color: #003068; text-decoration: none; background-color: #FFFFFF;
border-color: #FFFFFF #FFFFFF #FFFFFF; border-style: solid;
border-top-width: 0 px; border-right-width: 0 px; border-bottom-width: 0
px; border-left-width: 0 px; }
select { font-family: Verdana, Arial, Helvetica, sans-serif; font-size:
10 px; color: #003068; text-decoration: none; background-color: #FFFFFF;
border-color: #FFFFFF #FFFFFF #FFFFFF; border-style: solid;
border-top-width: 0 px; border-right-width: 0 px; border-bottom-width: 0
px; border-left-width: 0 px; }
<script>
function toggleAlert() {toggleDisabled(document.getElementById('content'));}
toggleAlert();
function toggleDisabled(el) {
try {el.disabled = el.disabled ? false : true;}
catch(E){}
if (el.childNodes && el.childNodes.length > 0) {
for (var x = 0; x < el.childNodes.length; x++) {toggleDisabled(el.childNodes[x]);}
}}
</script>;
Use Javascript to preview the form.
For example, do something like this:
<script type="text/javascript">
$(document).ready(function() {
$('#db').hide();
});
function preview()
{
var add=document.getElementById('Address_Street').value;
if(add.trim()!="")
{
$('#db').show();
document.getElementById('p_Address_Street').value=add;
}
}
</script>
and the body would be somthing like this:
<body>
<form name="approval" id="approval" method="post" enctype="multipart/form-data" action="">
<input type="text" name="Address_Street" id="Address_Street" size="36" value="">
<input type="submit" value="Submit" >
<input type="button" value="Preview" onclick="preview()">
</form>
<div id="db">
Address Street: <input type="text" name="p_Address_Street" id="p_Address_Street" size="36" value="" readonly="readonly">
</div>
</body>
I have just shown you how you can preview the form..
And for the submit part, you already know how to do that..
Thank you for addressing my question.
Yes , I think this is the right method. The script I posted above was to find all elements in the form to hide and show.
Given two images (edit.jpg , preview.jpg) is having same code, edit.jpg is showing input elements , preview.jpg is hiding elements.I dont know how long I can go using this script , so I am using the way you have shown to me.