HTML form preview then INSERT using PHP & MySQL

[SteveSoler]

Hello everyone! This is regarding HTML forms, PHP & MySQL.

My Question:

How do you create an html form that goes to a preview screen and then allows the user to move back to the form if they made any errors and corrections are needed or click the send button to submit the form. The form's contents are then inserted into a database table.

[redhead]

Quite simple:

<?php
  if(!isset($preview) || (isset($preview) && $preview == 1))
  {
    if(isset($preview))
      {
        echo "your current issue is:<br>
           some setup of how the $whatever_fieldnames should be shown";
      }
    else
        $preview =0;
    echo "
             <form action='$PHP_SELF' method=post>
              <input type=hidden value='$preview+1' name='preview'>
               <input type='text' name='some_field' value='$some_field'> 
               <!-- and so on with the rest of the fields used -->
              <input type=submit></form>
              ";
  }
else
   {
        /* $preview must be > 1 
            thus its a second submission.
        */
          $DB=mysql_connect("localhost", "user", "passwd");
          mysql_select_db("some_db");
          mysql_query("INSERT INTO whatever VALUES (some_field='$some_field' ...)", $DB);
  header("Location: /what/ever/page.php");
  }
?>

Only one page for everything, only drawback for this one, is, theres only one preview, uppon seccond submit you'll have the entry parsed onto your sql database. But then again you're forcing the user to have that one preview.

Or did I missunderstood your question? In this, the user will uppon submit, be shown a preview, he can chose to change something in it, or leave as it is, and just press submit again, which will store the info in your database. It needs some error checking, but for a fast one, it covers the aspects.

[redhead]

Thread is now moved to "Web development" where it is more suited.

[SteveSoler]

redhead,

Forgive me but i'm just learning PHP, MySQL, SQL. This is all new to me. I do know HTML though (big deal).

The actions I want the user to take are as follows:
1) Fill out form.
2) Press Preview Button (the only button on that page).
3) Look over preview of text entered. (this should be on a new page and appear as text, not text in form fields.)
4a) If user finds mistake in text of Preview, click Edit button (or link or Browser back button) to go back to form and make changes. Then user repeats steps 1 (editing not re-entering data) through 4.
4b) If user does not find mistakes in text of Preview, clicks submit button that INSERTS form data into MySQL table.
5) User gets a new page thats says "thank you. form submitted."

Does the script/s you are working on function like this?

If not does anyone know how I can get this to work?

I already know how to INSERT form data into a table and ECHO the data onto a page after the data was inserted, but I can't figure out how to add the Preview in the middle before inserting the data.

Thanks!

[redhead]

Originally posted by SteveSoler

The actions I want the user to take are as follows:
1) Fill out form.
2) Press Preview Button (the only button on that page).
3) Look over preview of text entered. (this should be on a new page and appear as text, not text in form fields.)
4a) If user finds mistake in text of Preview, click Edit button (or link or Browser back button) to go back to form and make changes. Then user repeats steps 1 (editing not re-entering data) through 4.
4b) If user does not find mistakes in text of Preview, clicks submit button that INSERTS form data into MySQL table.
5) User gets a new page thats says "thank you. form submitted."

Does the script/s you are working on function like this?

The page code I displayed will work in a similar way, the first page the user will have displayed, (At this time no info has been entered into the form fields) is a page, where theres only the form itself, with a single 'submit' button. (you could make a small check, that would display it as 'preview' and on submit change it to 'submit')
Uppon clicking the submit button, after fillining the form, the user will see a page, where the top part will be a sample of how the info in the form will be displayed. (The echo "your current issue... part will display that)
The second half of the page, will be the form once again, this time with the info the user submitted allready entered into the fields.
Uppon editing (or what ever the user feel is needed) he presses submit once again, and this time the values of the input fields, will be stored into the database, with no chance of previewing.

That was just the way my tired head thought this up. It's easy because you use the same segment of code for the form, no matter if its the first time viewed, with no data entered into any field, or if it's the second time, with the preview displayed.

In your requirements, you'll need two submit buttons, each sending different infos, where the first time viewed, only one will be displayed.

But to follow your requirements, here's this days shot at it (mind that this next code segment hasn't been tested in any way, its directly written into the reply form, just like yesterdays code, it comes with no warentie)

<?php
  if(!isset($view) || isset($edit) || $view == 1)
  {
    /* this condition should cover the following:
        1) First view here, no values in fields yet
        2) Preview time, $view should be 1 now.
        3) Edit time, $view is 2, but who cares lets edit
    */
    if(isset($preview))
      {
        /* we only want this part displayed if it 
            truely is a 'preview' press that directed
             us here
        */
        echo "your current issue is:<br>
some setup of how the $whatever_fieldnames should be shown";
        $type = "hidden";
      }
    else
      {
         /* only solution to end here, at this point,
             is if 'edit' has been pressed, or its a 
             first view, so it's safest to set $view to 0
          */
         $type = "text";
         $view = 0;
       }
    echo "
             <form action='$PHP_SELF' method=post>
<input type='hidden' value='$view+1' name='view'>
<input type='$type' name='some_field' value='$some_field'> 
<!-- and so on with the rest of the fields used -->
        ";
       if($view == 0)
         {
               /* first time here, or we are editing it.
                     only preview available 
               */
         echo "<input type='submit' name='preview' value='preview'>";
       }
     else
       {
          /* second time, alot of options */
         echo "<input type='submit' name='edit' value='edit'>
                   <input type='submit' name='submit' value='submit'>";
        }
     echo "
         </form>";
  }
else
   {
        /* The 'submit' must've been pushed
            insted of edit or preview, so we want it
            into the database for good
        */
          $DB=mysql_connect("localhost", "user", "passwd");
          mysql_select_db("some_db");
          mysql_query("INSERT INTO whatever VALUES (some_field='$some_field' ...)", $DB);
          header("Location: /what/ever/page.php");
  }
?>

As you can se, the $type can only be set to 'text', so if you have more than that type of input field, create a $type_field for each of those.

The page functionality is now as this:
1) first time here, only a form, with input fields and a single preview button
2) preview is pressed, and you see a preview of how its gonna be, a 'edit' and a 'submit' button displayed.
3a) pressing 'edit' results in step 1, with the fields holding the values allready in use.
3b) pressing 'submit' results in submitting data to database, and redirecting to /what/ever/page.php.

Was that how it was intended ?

I'm beginning to lose objectivity in this small input field.. But I think every possible outcome has been covered.

[SteveSoler]

redhead,

That sounds like a plan. I'll give it a try. If it does not work, I'll play around with it till it does or if I'm desperate enough, I'll submit the code for review.

Thanks for all your help! :rock:

[itsme85]

redhead,

I tried your code above. But it's gonna stay on the page with the preview button. When I push the preview button, nothing happend. I have changed the field_name, table_name, database connection and location page only. Could you please help me?

Thanks in advance.

[redhead]

It's been a while since I made this, and since then PHP-4/5.whatever has come out, where most likely register_globals is turned off by default, the code portion here requires it to be turned on, altho if you were to change it to something like this, it should work.

PHP Code:

<?php
  isset($_POST['view']) ? $view = $_POST['view'] : $view = 0;
  $type = "text";
  if(!isset($_POST['view']) || isset($_POST['edit']) || $_POST['view'] == 1)
  {
    /* this condition should cover the following:
        1) First view here, no values in fields yet
        2) Preview time, $view should be 1 now.
        3) Edit time, $view is 2, but who cares lets edit
    */
    if(isset($_POST['preview']))
      {
        /* we only want this part displayed if it 
            truely is a 'preview' press that directed
             us here
        */
        echo "your current issue is:<br>
some setup of how the $_POST['some_field'] should be shown";
        $type = "hidden";
      }
    else
      {
         /* only solution to end here, at this point,
             is if 'edit' has been pressed, or its a 
             first view, so it's safest to set $view to 0
          */
         $view = 0;
       }
    echo "
             <form action='$PHP_SELF' method='post'>
<input type='hidden' value='$view+1' name='view'>
<input type='$type' name='some_field' value=\"$_POST['some_field']\"> 
<!-- and so on with the rest of the fields used -->
        ";
       if($view == 0)
         {
               /* first time here, or we are editing it.
                     only preview available 
               */
         echo "<input type='submit' name='preview' value='preview'>";
       }
     else
       {
          /* second time, alot of options */
         echo "<input type='submit' name='edit' value='edit'>
                   <input type='submit' name='submit' value='submit'>";
        }
     echo "
         </form>";
  }
else
   {
        /* The 'submit' must've been pushed
            insted of edit or preview, so we want it
            into the database for good
        */
          $DB=mysql_connect("localhost", "user", "passwd");
          mysql_select_db("some_db");
          mysql_query("INSERT INTO whatever VALUES (some_field=\"$_POST['some_field']\" ...)", $DB);
          header("Location: /what/ever/page.php");
  }
?>

[itsme85]

Hello Redhead,

I tried your new preview code. But it doesn't display the form. I checked the form echo and I think it's ok. I also changed this:

PHP Code:

if(isset($_POST['preview'])) 


into

PHP Code:

if(isset($_POST['view'])) 


I don't know if that's ok. But it doesn't help also.

Maybe I have to change something in the if/else statements.

Do you have any idea?

[redhead]

Here is one that will work:

PHP Code:

<?php
switch($_POST['view'])
{
 case 1: /* first time submit, show preview */
   $type = "hidden";
   $field = $_POST['field'];
   $view = 2;
   $EXTRA_INFO = "Are your sure you want to submit:<br> <pre>$field</pre>";
   $INPUT_BUTTON = "<input type='submit' name='submit' value='Edit'>
                   <input type='submit' name='submit' value='Submit'>";
   break;
 case 2: /* second time submit, if edit pressed, then edit else submit */
   if($_POST['submit'] == "Edit")
     { /* Edit and reset to first time here */
       $field = $_POST['field'];
       $type = "text";
       $view = 1;
       $INPUT_BUTTON = "<input type='submit' name='preview' value='preview'>";
       $EXTRA_INFO = "Please edit your input:<br>";
     }
   else
     { /* Submit info */
       $field = $_POST['field'];
       if(($DB=mysql_connect("localhost", "user", "passwd"))==NULL)
         $EXTRA_INFO = "Error connecting to database";
       if(!mysql_select_db("some_db"))
         $EXTRA_INFO = "Error selecting database";
       if(!mysql_query("INSERT INTO whatever VALUES (field='$field' ...)", $DB))
         $EXTRA_INFO = "Error inserting data into database";
       else
         $EXTRA_INFO = "The following entry has been submitted:<br><pre>$field</pre>";
       $type = "hidden";
     }
   break;
 default: /* either we've never been here or something has screwed our counter */
   $EXTRA_INFO = "Please input your desired submission:<br>";
   $INPUT_BUTTON = "<input type='submit' name='preview' value='preview'>";
   $type = "text";
   $view = 1;
   break;
}
/* display our page accordingly */

echo $EXTRA_INFO;
echo "<form action='$PHP_SELF' method='post'>
       <input type='hidden' value='$view' name='view'>
        <input type='$type' name='field' value='$field'><br>
        <!-- and so on for the rest -->";
echo $INPUT_BUTTON;
echo "</form>";

?>

[itsme85]

I tried to put a dropdown box between the code like this:

PHP Code:

echo $EXTRA_INFO;
echo "<form action='$PHP_SELF' method='post'>
       <input type='hidden' value='$view' name='view'>
       <p>Name:
        <input type='$type' name='product_name' value='$product_name'><br>
        <p>Category: <select name='category_name'>
            <!-- Drop down -->';
            
            while($row = mysql_fetch_array($categoryresult)){
   echo "<option value=".$row['category_id'].">".$row['category_name']."</option>";    
}
    echo '<option value='category_name'>(category_name)</option>
            </select>
        <!-- and so on for the rest -->";
echo $INPUT_BUTTON;
echo "</form>"; 


But when I do that, there is nothing displayed anymore. There goes something wrong with the echo's I think.

[redhead]

What s wrong is your string isn't terminated befor the echo should end

PHP Code:

   <!-- Drop down -->; 
while($row = mysql_fetch ... 


Should be

PHP Code:

   <!-- Drop down -->"; 
while($row = mysql_fetch ... 


[itsme85]

Hello Redhead,

The dropdownbox works fine now.

This is my code

PHP Code:

include("connectdb.php");
    
$categoryquery = "SELECT DISTINCT category_name, category_id FROM category";

$categoryresult = mysql_query($categoryquery) or die(mysql_error());

switch($_POST['view'])
{
 case 1: /* first time submit, show preview */
   $type = "hidden";
   $product_name = $_POST['product_name'];
   $category_id = $_POST['category_name'];
   $view = 2;
   $EXTRA_INFO = "Are your sure you want to submit:<br> <p>Name: $product_name <p>Category: $category_id";
   $INPUT_BUTTON = "<input type='submit' name='submit' value='Edit'>
                   <input type='submit' name='submit' value='Submit'>";
   break;
 case 2: /* second time submit, if edit pressed, then edit else submit */
   if($_POST['submit'] == "Edit")
     { /* Edit and reset to first time here */
       $product_name = $_POST['product_name'];
       $category_name = $_POST['category_name'];
       $type = "text";
       $view = 1;
       $INPUT_BUTTON = "<input type='submit' name='preview' value='preview'>";
       $EXTRA_INFO = "Please edit your input:<br>";
     }
   else
     { /* Submit info */
       $product_name = $_POST['product_name'];
       if(($DB=mysql_connect("localhost", "root", "root"))==NULL)
         $EXTRA_INFO = "Error connecting to database";
       if(!mysql_select_db("mvm"))
         $EXTRA_INFO = "Error selecting database";
       if(!mysql_query("INSERT INTO product(product_name) values('$product_name')", $DB))
         $EXTRA_INFO = "Error inserting data into database";
       else
         $EXTRA_INFO = "The following entry has been submitted:<br><pre>$product_name</pre>";
       $type = "hidden";
     }
   break;
 default: /* either we've never been here or something has screwed our counter */
   $EXTRA_INFO = "Please input your desired submission:<br>";
   $INPUT_BUTTON = "<input type='submit' name='preview' value='preview'>";
   $type = "text";
   $view = 1;
   break;
}
/* display our page accordingly */

echo $EXTRA_INFO;
echo "<form action='$PHP_SELF' method='post'>
       <input type='hidden' value='$view' name='view'>
       <p>Name:
       <input type='$type' name='product_name' value='$product_name'><br>
        <p>Category: <select name='category_name'>
            <!-- Drop down -->";
            
            while($row = mysql_fetch_array($categoryresult)){
   echo "<option value=".$row['category_id'].">".$row['category_name']."</option>";    
}
    echo "<option value='category_name'>(category_name)</option>
            </select>
        <!-- and so on for the rest -->";
echo $INPUT_BUTTON;
echo "</form>"; 


Now I am trying to display the category_name at the preview page. I want to hold the category_id but display the category_name. I tried with the select option. But I think I don't need to (when I put a "while" in case1 it doesn't work), the category_name is in the dropdown selection already.

And I have another problem when I put the dropdownbox between the code. I see this on my preview page.

Are your sure you want to submit:

Name: $category_name

Category: $category_id

Name:

Category: dropdownbox

edit submit

But I don't want to see the form again.

[redhead]

Then do it like this:

PHP Code:

$categoryresult = mysql_query($categoryquery) or die(mysql_error());

switch($_POST['view'])
{
 case 1: /* first time submit, show preview */
   $type = "none";
   $product_name = $_POST['product_name'];
   $category_id = $_POST['category_name'];
   $view = 2;
   $EXTRA_INFO = "Are your sure you want to submit:<br> <p>Name: $product_name <p>Category: $category_id";
   $INPUT_BUTTON = "<input type='submit' name='submit' value='Edit'>
                   <input type='submit' name='submit' value='Submit'>";
   break;
 case 2: /* second time submit, if edit pressed, then edit else submit */
   if($_POST['submit'] == "Edit")
     { /* Edit and reset to first time here */
       $product_name = $_POST['product_name'];
       $category_name = $_POST['category_name'];
       $type = "block";
       $view = 1;
       $INPUT_BUTTON = "<input type='submit' name='preview' value='preview'>";
       $EXTRA_INFO = "Please edit your input:<br>";
     }
   else
     { /* Submit info */
       $product_name = $_POST['product_name'];
       if(($DB=mysql_connect("localhost", "root", "root"))==NULL)
         $EXTRA_INFO = "Error connecting to database<br>";
       if(!mysql_select_db("mvm"))
         $EXTRA_INFO .= "Error selecting database<br>";
       if(!mysql_query("INSERT INTO product(product_name) values('$product_name')", $DB))
         $EXTRA_INFO .= "Error inserting data into database<br>";
       else
         $EXTRA_INFO = "The following entry has been submitted:<br><pre>$product_name</pre>";
       $type = "none";
     }
   break;
 default: /* either we've never been here or something has screwed our counter */
   $EXTRA_INFO = "Please input your desired submission:<br>";
   $INPUT_BUTTON = "<input type='submit' name='preview' value='preview'>";
   $type = "block";
   $view = 1;
   break;
}
/* display our page accordingly */

echo $EXTRA_INFO;
echo "<form action='$PHP_SELF' method='post'>
      <span name='input_form' style='display: $type'>
       <input type='hidden' value='$view' name='view'>
       <p>Name:
       <input type='text' name='product_name' value='$product_name'><br>
        <p>Category: <select name='category_name'>
            <!-- Drop down -->";
            
            while($row = mysql_fetch_array($categoryresult)){
   echo "<option value=".$row['category_id'].">".$row['category_name']."</option>";    
}
    echo "<option value='category_name'>(category_name)</option>
            </select>
        <!-- and so on for the rest -->
        </span>";
echo $INPUT_BUTTON;
echo "</form>"; 


The hide/show part is accomplished by hiding the input fields in a <span> which is either set to display or hide

[itsme85]

Before I submit or preview the page I want to validate it. But I doesn't show me the page anymore. The validation.php works with cases also. Is that a problem? An I have no idea what i have to do here

PHP Code:

 else 
  {
    $message = "All fields have been validated successfully!";
    
    // here you would either email the form contents to someone or store it in a database. 
    // To redirect to a "thankyou" page, you'd just do this:
    header("Location: ok/formtablecategory.php");
  }
} 


This is the total code:

PHP Code:

 <?php

$errors = array(); // set the errors array to empty, by default
$fields = array(); // stores the field values
$success_message = "";

if (isset($_POST['submit']))
{
  // import the validation library
  require("validation.php");

  $rules = array(); // stores the validation rules

  // standard form fields
  $rules[] = "required,product_name,Please enter a product name.";
  $rules[] = "required,category_name,Please select a category.";
  
  $errors = validateFields($_POST, $rules);

  // if there were errors, re-populate the form fields
  if (!empty($errors))
  {  
    $fields = $_POST;
  }
  
  // no errors! redirect the user to the thankyou page (or whatever)
  else 
  {
    $message = "All fields have been validated successfully!";
    
    // here you would either email the form contents to someone or store it in a database. 
    // To redirect to a "thankyou" page, you'd just do this:
    header("Location: ok/formtablecategory.php");
  }
}
          
?>

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<?php include("ok/connectdb.php");
    
switch($_POST['view'])
{
case 1: /* first time submit, show preview */
    $type = "none";
    $product_name = $_POST['product_name'];
    $category_id = $_POST['category_id'];
    
    $category_name_result = mysql_query("SELECT category_name FROM category WHERE 
        category_id = '$category_id'") or die(mysql_error());
    $row = mysql_fetch_assoc($category_name_result);
    $category_name = $row['category_name']; 
    
    $view = 2;
    $EXTRA_INFO = "Are your sure you want to submit:<br> <p>Name: $product_name 
        <p>Category: $category_name";
    $INPUT_BUTTON = "<input type='submit' name='submit' value='Edit'>
                   <input type='submit' name='submit' value='Submit'>";
break;
case 2: /* second time submit, if edit pressed, then edit else submit */
    if($_POST['submit'] == "Edit")
    { /* Edit and reset to first time here */
    $product_name = $_POST['product_name'];
    $category_id = $_POST['category_id'];
    $type = "block";
    $view = 1;
    $INPUT_BUTTON = "<input type='submit' name='preview' value='preview'>";
    $EXTRA_INFO = "Please edit your input:<br>";
    }
    else
    { /* Submit info */
    $product_name = $_POST['product_name'];       
    $category_id = $_POST['category_id'];
    
    $category_name_result = mysql_query("SELECT category_name FROM category WHERE 
        category_id = '$category_id'") or die(mysql_error());
    $row = mysql_fetch_assoc($category_name_result);
    $category_name = $row['category_name'];
    
    if(!mysql_query("INSERT INTO product(product_name) values('$product_name')"))
    $EXTRA_INFO = "Error inserting data into database";
    $product_id = mysql_insert_id();
    if (!mysql_query("INSERT INTO product_category(product_id, category_id) 
        values ('$product_id','$category_id')"))
    $EXTRA_INFO = "Error inserting data into database";
    else
    $EXTRA_INFO = "The following entry has been submitted:<br><pre>$product_name, 
        $category_name</pre>";
    $type = "none";
    }
break;
default: /* either we've never been here or something has screwed our counter */
    $EXTRA_INFO = "Please input your desired submission:<br>";
       $INPUT_BUTTON = "<input type='submit' name='preview' value='preview'>";
       $type = "block";
       $view = 1;
break;
    }
/* display our page accordingly */
         
echo $EXTRA_INFO;
echo "<form action='$PHP_SELF' method='post'>";

    
    // if $errors is not empty, the form must have failed one or more validation 
    // tests. Loop through each and display them on the page for the user
    if (!empty($errors))
    {
      echo "<div class='error' style='width:100%;'>Please fix the following errors:\n<ul>";
      foreach ($errors as $error)
        echo "<li>$error</li>\n";
    
      echo "</ul></div>"; 
    }
    
    if (!empty($message))
    {
      echo "<div class='notify'>$success_message</div>";
    }
 
echo "<span name='input_form' style='display: $type'>
      <input type='hidden' value='$view' name='view'>
      <p>Name:
      <input type='text' name='product_name' value="=$fields['user_name']"><br>
      <p>Category: <select name='category_id'>
      <!-- Drop down -->";

$categoryresult = mysql_query("SELECT DISTINCT category_name, category_id FROM category") 
    or die(mysql_error());  

while($row = mysql_fetch_array($categoryresult)){
echo "<option value=".$row['category_id'].">".$row['category_name']."</option>";    
}
echo "<option value='category_name'>(category_name)</option>
      </select>
      <!-- and so on for the rest -->
      </span>";
echo $INPUT_BUTTON;
echo "</form>";  
?>

</body>
</html>