HTML Form , Validate & Preview in Same Page

Question

redkowloon 0 Newbie Poster

9 Years Ago

Hi , i already build up a php form which is will sent data on same page, validate it , but i stuck how to switch to new display that become a preview data .

My coding :

<?php

    // dapatkan data dulu cha

$fname = $_POST['fname'];
$lname = $_POST['lname'];
$gender = $_POST['gender'];
$address = $_POST['address'];
$group = $_POST['group'];
$email = $_POST['email'];

// validate data dulu, kot2 ada salah isi email ker, x isi lansung kerrr 
$fnameErr = $lnameErr = $genderErr = $addressErr = $groupErr = $groupErr = $emailErr = "";
$fname = $lname = $gender = $address = $email = "";

if ($_SERVER["REQUEST_METHOD"] == "POST") {    
  if (empty($_POST["fname"])) {
      $fnameErr = "First name is required";
    }

elseif (preg_match("/^[A-Z][a-zA-Z -]+$/", $_POST["fname"]) === 0) {
  $fnameErr = "First name must contain letters and spaces only";
}

else  {
$fname = $_POST["fname"];
} 
    if (empty($_POST["lname"])) {
        $lnameErr = "Last name is required";
    }
elseif (preg_match("/^[A-Z][a-zA-Z -]+$/", $_POST["lname"]) === 0) {
  $lnameErr = "Last name must contain letters and spaces only";
}
    else {
        $lname = $_POST["lname"];
    }

     if (empty($_POST["address"]))  {
        $addressErr = "Address is required";
    }
    else {
        $address = $_POST["address"];
    }


 if ($group == 'Please Choose')  {
        $groupErr = "Class is required?";
    }
    else {
        $group = $_POST["group"];
    }

  if (empty($_POST["gender"]))  {
        $genderErr = "Gender is required ";
    }
    else {
        $gender = $_POST["gender"];
    }
if (empty($_POST["email"]))  {
        $emailErr = "Email is required";
    }
   elseif (preg_match("/^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/", $_POST["email"]) === 0)  {
        $emailErr = "Please enter a valid email";
    }
    else {
        $email = $_POST["email"];

    }
   }








<title>Untitled 1</title>
<style type="text/css">
.style1 {
    border-collapse: collapse;
    border: 1px solid #000000;
    background-color: #99FF99;
}
.style3 {
    text-align: center;
    font-size: large;
}
.style4 {
    color: #0000FF;
}
.style5 {
    text-align: center;
}
.style6 {
    background-color: #FEFECB;
}
.error {
    color: #FF0000;
}
</style>
</head>

<body>

<table style="width: 600px" cellspacing="0" cellpadding="25" align="center" class="style1">
    <tr>
    <form method="POST"
 action="echo htmlspecialchars($_SERVER["PHP_SELF"]);">     <td>
        <div class="style3">
            :: <strong><span class="style4">STUDENT INFORMATION</span> </strong>
            ::</div>
        <table style="width: 100%">
                    </table>
        <table style="width: 100%" class="style6" cellpadding="5">
            <tr>
                <td style="height: 30px; width: 106px">First Name&nbsp;</td>
                <td style="width: 14px; height: 30px;" class="style5"><strong>:</strong></td>
                <td style="width: 204px; height: 30px;"><input name="fname" type="text" value="<?php echo htmlspecialchars($fname);?>">&nbsp;</td>
                <td style="height: 30px"><span class="error"><?php echo $fnameErr;?></span></td>
            </tr>
            <tr>
                <td style="width: 106px">&nbsp;</td>
                <td style="width: 14px" class="style5"><strong></strong></td>
                <td style="width: 204px">&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td style="width: 106px">Last Name</td>
                <td style="width: 14px" class="style5"><strong>:</strong></td>
                <td style="width: 204px"><input name="lname" type="text" value="<?php echo htmlspecialchars($lname);?>"></td>
                <td><span class="error"><?php echo $lnameErr;?></span></td>
            </tr>
            <tr>
                <td style="width: 106px">&nbsp;</td>
                <td style="width: 14px" class="style5"><strong></strong></td>
                <td style="width: 204px">&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td style="width: 106px">Gender</td>
                <td style="width: 14px" class="style5"><strong>:</strong></td>
                <td style="width: 204px"><input name="gender" type="radio" value="Male" />Male&nbsp;
                <input name="gender" type="radio" style="width: 20px" value="Female" />Female</td>
                <td><span class="error"><?php echo $genderErr;?></span></td>
            </tr>
            <tr>
                <td style="width: 106px">&nbsp;</td>
                <td style="width: 14px" class="style5"><strong></strong></td>
                <td style="width: 204px">&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td style="width: 106px">Address</td>
                <td style="width: 14px" class="style5"><strong>:</strong></td>
                <td style="width: 204px"><textarea name="address" cols="20" rows="2" ></textarea></td>
                <td><span class="error"><?php echo $addressErr;?></span></td>
            </tr>
            <tr>
                <td style="width: 106px">&nbsp;</td>
                <td style="width: 14px" class="style5"><strong></strong></td>
                <td style="width: 204px">&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td style="width: 106px">Class</td>
                <td style="width: 14px" class="style5"><strong>:</strong></td>
                <td style="width: 204px"><select name="group">
                <option selected="selected">Please Choose</option>
                <option>DIP4B</option>
                <option>DIP4A</option>
                </select></td>
                <td><span class="error"><?php echo $groupErr;?></span></td>
            </tr>
            <tr>
                <td style="width: 106px">&nbsp;</td>
                <td style="width: 14px" class="style5"><strong></strong></td>
                <td style="width: 204px">&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td style="width: 106px">Email</td>
                <td style="width: 14px" class="style5"><strong>:</strong></td>
                <td style="width: 204px"><input name="email" type="text" ></td>
                <td><span class="error"><?php echo $emailErr;?></span></td>
            </tr>
            <tr>
                <td style="width: 106px">&nbsp;</td>
                <td style="width: 14px" class="style5"><strong></strong></td>
                <td style="width: 204px">&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td colspan="4" class="style5">
                <input name="Submit1" type="submit" value="Submit" />
                <input name="Reset1" type="reset" value="Reset" />&nbsp;</td>
            </tr>
            <tr>
                <td style="width: 106px">&nbsp;</td>
                <td style="width: 14px" class="style5"><strong></strong></td>
                <td style="width: 204px">&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
        </table>
        </td>
        </form>
    </tr>
</table>

</body>

</html>

?>

I stuck on how switch a new display that have a data such as this code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<style type="text/css">
.style1 {
    border-collapse: collapse;
    border: 1px solid #000000;
    background-color: #99FF99;
}
.style3 {
    text-align: center;
    font-size: large;
}
.style4 {
    color: #0000FF;
}
.style5 {
    text-align: center;
}
.style6 {
    background-color: #FEFECB;
}
.error {
    color: #FF0000;
}
</style>
</head>

<body>

<table style="width: 600px" cellspacing="0" cellpadding="25" align="center" class="style1">
    <tr>
        <td>
        <div class="style3">
            :: <strong><span class="style4">STUDENT INFORMATION</span> </strong>
            ::</div>
        <table style="width: 100%">
                    </table>
        <table style="width: 100%" class="style6" cellpadding="5">
            <tr>
                <td style="height: 27px; width: 106px">First Name&nbsp;</td>
                <td style="width: 14px; height: 27px;" class="style5"><strong>:</strong></td>
                <td style="width: 204px; height: 27px;"><?php $fname ?>$fname</td>
                <td style="height: 27px"><span class="error"></span></td>
            </tr>
            <tr>
                <td style="width: 106px">&nbsp;</td>
                <td style="width: 14px" class="style5"><strong></strong></td>
                <td style="width: 204px">&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td style="width: 106px">Last Name</td>
                <td style="width: 14px" class="style5"><strong>:</strong></td>
                <td style="width: 204px">$lname&nbsp;</td>
                <td><span class="error"></span></td>
            </tr>
            <tr>
                <td style="width: 106px">&nbsp;</td>
                <td style="width: 14px" class="style5"><strong></strong></td>
                <td style="width: 204px">&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td style="width: 106px">Gender</td>
                <td style="width: 14px" class="style5"><strong>:</strong></td>
                <td style="width: 204px">$gender</td>
                <td><span class="error"></span></td>
            </tr>
            <tr>
                <td style="width: 106px">&nbsp;</td>
                <td style="width: 14px" class="style5"><strong></strong></td>
                <td style="width: 204px">&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td style="width: 106px">Address</td>
                <td style="width: 14px" class="style5"><strong>:</strong></td>
                <td style="width: 204px">$address</td>
                <td><span class="error"></span></td>
            </tr>
            <tr>
                <td style="width: 106px">&nbsp;</td>
                <td style="width: 14px" class="style5"><strong></strong></td>
                <td style="width: 204px">&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td style="width: 106px">Class</td>
                <td style="width: 14px" class="style5"><strong>:</strong></td>
                <td style="width: 204px">$group</td>
                <td><span class="error"></span></td>
            </tr>
            <tr>
                <td style="width: 106px">&nbsp;</td>
                <td style="width: 14px" class="style5"><strong></strong></td>
                <td style="width: 204px">&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td style="width: 106px">Email</td>
                <td style="width: 14px" class="style5"><strong>:</strong></td>
                <td style="width: 204px">$email</td>
                <td><span class="error"></span></td>
            </tr>
            <tr>
                <td style="width: 106px">&nbsp;</td>
                <td style="width: 14px" class="style5"><strong></strong></td>
                <td style="width: 204px">&nbsp;</td>
                <td>&nbsp;</td>
            </tr>

            <tr>
                <td style="width: 106px">&nbsp;</td>
                <td style="width: 14px" class="style5"><strong></strong></td>
                <td style="width: 204px">&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
        </table>
        </td>
    </tr>
</table>

</body>

</html>

If you understand, it will switch from first html design to second html design in same page after all the condition were complete

html-css php

4 Contributors
16 Replies
2K Views
4 Days Discussion Span
Latest Post 9 Years Ago Latest Post by Bensirpent07

Bensirpent07 0 Junior Poster

9 Years Ago

Well this may work but I would suggest making sure everything you want replaced is wrapped in a main div. Then having your PHP replace that div with what you want the preview to look like. I'm not totally sure I'm understanding exactly what you are asking but if there is a chance can I see a screenshot of what you're trying to do just to be clear on what you mean?

Traevel 216 Light Poster

9 Years Ago

You can't alter the same page using PHP since it runs on the server-side and not the client-side. You can have the page post to itself, which will refresh the page, then you can use that POST data.

You would have to make sure that when POST variables are empty you show the form, when POST variables are partially set you show the validation and when POST variables are all correctly set you show the entered data.

Another option would be to use AJAX to send the POST data to an external PHP page and handle its response with JavaScript.

Bensirpent07 0 Junior Poster

9 Years Ago

What do you mean you can't alter the same page using PHP? I have a contact form that when submited just replaces the form with, "Your form has been submitted... blah blah blah". So I'm not sure what you mean by that. The page does not refresh to display that.

Bensirpent07 0 Junior Poster

9 Years Ago

I found a website that might be able to explain some of this a little easier: http://www.inmotionhosting.com/support/edu/website-design/using-php-and-mysql/how-to-create-a-custom-php-contact-form . The only thing it doesn't have is what would be in between (the preview). But that part would be easy, you would just take the submitted data from PHP and insert into the HTML, and just have another "Confirm" button that would then carryout whatever needs to be carried out. Which I'm sure would be e-mail, going to a new page, etc...

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

redkowloon 0 Newbie Poster · Answer 1 · 2015-01-08T20:15:28+00:00

good idea, wrap using div , but how to switch to div?

redkowloon 0 Newbie Poster · Answer 2 · 2015-01-09T03:55:57+00:00

Example :

Form :

Validation :

Preview :

All this happen on same page . But how?

redkowloon 0 Newbie Poster · Answer 3 · 2015-01-09T04:44:16+00:00

hold on , i just configure using div , but how to project a div content in echo?

for example :

<div id="preview">

<?php echo $fname ?>

</div>

so if the condition in form validatin is filled in/complete, than it will display the "preview" div .

for example validation :

<?php 

$fname = $_POST['fname'];
$lname = $_POST['lname'}

if ($fname == // condition fname 
else ( // condition fname 2 

if (lname ==// condition lname
else { 
//display the preview div
}

hows that?

vramsngrai 0 Newbie Poster · Answer 4 · 2015-01-09T05:00:44+00:00

why did you not using Jquey ?Jquey is easy to use

redkowloon 0 Newbie Poster · Answer 5 · 2015-01-09T05:09:10+00:00

redkowloon 0 Newbie Poster

9 Years Ago

hows that bro?

Bensirpent07 0 Junior Poster · Answer 6 · 2015-01-09T06:01:55+00:00

I've never used Jquery for forms... I've heard good about it... I might starting testing out with it haha. And redkowloon your code looks good. I think I would give it a little test before actually using it and making sure it is giving you the results you want.

Traevel 216 Light Poster · Answer 7 · 2015-01-09T07:34:44+00:00

What do you mean you can't alter the same page using PHP?

You can't run PHP code, have the user do something, then run some more PHP code on that page without refreshing/leaving the page. PHP is a serverside language.

I have a contact form that when submited just replaces the form with, "Your form has been submitted... blah blah blah". So I'm not sure what you mean by that.

That's either done by JavaScript, or because you are posting to the same page.

Change

action="echo htmlspecialchars($_SERVER["PHP_SELF"]);">

to

action=<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>

and you can handle POST data on that same page.

If you want to use jQuery I would suggest reading up on the post function it provides. It is not a bad idea to keep your logic separated from your form and layout. You can use jQuery's selectors and its manipulators for inserting the AJAX response into the form page.

redkowloon 0 Newbie Poster · Answer 8 · 2015-01-10T07:09:31+00:00

anyone can help me here how to toggle using jquery?

redkowloon 0 Newbie Poster · Answer 9 · 2015-01-10T09:37:24+00:00

redkowloon 0 Newbie Poster

9 Years Ago

bump , anyone please

redkowloon 0 Newbie Poster · Answer 10 · 2015-01-13T13:52:03+00:00

hi all, thanks for reply, at last , i manage to configure it myself, switching or toggle using div css and php hahahaha , so much easy than using ajax

Traevel 216 Light Poster · Answer 11 · 2015-01-13T14:04:55+00:00

using div css and php hahahaha , so much easy than using ajax

Yea, silly us for telling you to use this monster:

$.ajax({
    url: "whatever.php",
    type: "POST",
    data: { 
         id : 0,
         and : "whatever",
         data : "we",
         would : "want"
    },
    context: document.body
}).done(function(response) {
    $(this).html(response);
});

Bensirpent07 0 Junior Poster · Answer 12 · 2015-01-13T15:15:13+00:00

I know right haha XD , ajax is amazing I have learned that quite quickly haha